body#reading [role=main] ul{list-style:none;margin:0;padding:0}body#reading [role=main] ul.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(3 * var(--spacing-unit)) calc(2 * var(--spacing-unit))}body#reading [role=main] ul li{display:flex;position:relative}body#reading [role=main] figure{display:grid;grid-template-rows:1fr auto;height:100%;margin:0;width:100%}body#reading [role=main] .book-scene{align-self:end;container-type:inline-size;display:block;isolation:isolate;perspective:900px;position:relative;width:100%}body#reading [role=main] .book{position:relative;transform-style:preserve-3d;transition:transform 350ms var(--ease-expressive);width:100%;z-index:1}body#reading [role=main] .book-pages,body#reading [role=main] .book-spine{backface-visibility:hidden;position:absolute}body#reading [role=main] .book-front{position:relative;transform:translateZ(clamp(6px,.65vw,11px));width:100%}body#reading [role=main] .book-front img,body#reading [role=main] .book-front picture{display:block;height:100%;width:100%}body#reading [role=main] .book-front img{background:var(--color-image-surface);border-radius:0 var(--radius-xsmall) var(--radius-xsmall) 0;height:auto}body#reading [role=main] .book-pages,body#reading [role=main] .book-spine{height:calc(100% - 2px);left:calc(50% - 10px);top:1px;width:20px}body#reading [role=main] .book-spine{background-image:linear-gradient(rgba(17,17,17,.18),rgba(17,17,17,.18)),var(--book-cover);background-position:left center;background-size:auto 100%;transform:rotateY(-90deg) translateZ(50cqw)}body#reading [role=main] .book-pages{background:linear-gradient(90deg,#ddd6c3,#f3eee0 40%,#e6dfcc);box-shadow:inset 1px 0 2px #00000026;transform:rotateY(90deg) translateZ(50cqw)}body#reading [role=main] .book-ground{background:rgba(17,17,17,.16);border-radius:50%;bottom:-5%;filter:blur(8px);height:7%;left:8%;opacity:0;position:absolute;transform:translateX(0) scaleX(.78);transition:opacity 350ms var(--ease-expressive),transform 350ms var(--ease-expressive);width:84%;z-index:0}body#reading [role=main] .collection-card:focus-within .book{transform:rotateY(-20deg)}body#reading [role=main] .collection-card:focus-within .book-ground{opacity:1;transform:translateX(4%) scaleX(.92)}body#reading [role=main] .collection-card:focus-within{z-index:1}@media (hover:hover) and (pointer:fine){body#reading [role=main] .collection-card:hover{z-index:1}body#reading [role=main] .collection-card:hover .book{transform:rotateY(-20deg)}body#reading [role=main] .collection-card:hover .book-ground{opacity:1;transform:translateX(4%) scaleX(.92)}}body#reading [role=main] figcaption{color:var(--color-ink);font-weight:var(--font-weight-medium);min-block-size:5lh;padding-top:var(--space-2)}body#reading [role=main] figcaption span{margin-top:2px}@media (prefers-reduced-motion:reduce){body#reading [role=main] .book,body#reading [role=main] .book-ground{transition:none}}@media screen and (min-width:700px){body#reading [role=main] ul.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media screen and (min-width:900px){body#reading [role=main] ul.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(4 * var(--spacing-unit)) calc(2 * var(--spacing-unit))}}@media screen and (min-width:1140px){body#reading [role=main] ul.grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(5 * var(--spacing-unit)) var(--layout-gap)}}