@property --item-scale{syntax:"<number>";inherits:true;initial-value:1}@property --item-angle{syntax:"<angle>";inherits:true;initial-value:0deg}.shelf{display:grid;gap:1.75rem;grid-template-columns:repeat(4,1fr);perspective:3000px;margin-bottom:4rem}@media (max-width:1100px){.shelf{grid-template-columns:repeat(3,1fr)}}@media (max-width:760px){.shelf{grid-template-columns:repeat(2,1fr);gap:1.25rem}}@media (max-width:460px){.shelf{grid-template-columns:1fr}}.shelf__header{grid-column:1/-1;margin-bottom:.25rem}.shelf__header .label{display:block;margin-bottom:.5rem}.shelf__title{font-family:var(--font-display),Georgia,serif;font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:600;letter-spacing:-.02em;color:hsl(var(--fg))}.story{--deg:0.5deg;--y:0;display:block;opacity:min(var(--item-scale),1);transform:rotate(var(--deg)) translateY(var(--y)) scale(var(--item-scale)) rotateX(var(--item-angle));transition:transform .35s cubic-bezier(.2,.7,.3,1);transform-style:preserve-3d;will-change:transform;text-decoration:none;color:hsl(var(--fg))}.story:nth-child(2n){--deg:-0.5deg}.story:focus-visible,.story:hover{--deg:0deg!important;--y:-8px;outline:none}@supports (animation-timeline:view()){.story{animation:story-enter ease-in-out both,story-exit ease-in-out reverse both;animation-timeline:view(block);animation-range:entry,exit}}@keyframes story-enter{0%{--item-scale:0.7;--item-angle:-35deg;transform-origin:top}}@keyframes story-exit{0%{--item-scale:0.7;--item-angle:35deg;transform-origin:bottom}}@media (prefers-reduced-motion:reduce){.story{--deg:0deg;--y:0;animation:none;opacity:1;transition:none}}