@font-face{font-family:"Source Serif 4";src:url("book/style/fonts/SourceSerif4-Regular.otf.woff2") format("woff2");font-display:swap}
:root{--ink:#151713;--blue:#67b9e4;--green:#75ca62;--paper:#f5f1e8;--line:rgb(21 23 19 / 18%);font-family:"Avenir Next","PingFang SC",sans-serif;color:var(--ink);background:#dceaf1}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:linear-gradient(115deg,#dceaf1 0 58%,#d3e5ed 58% 100%)}
body::before{position:fixed;inset:0;content:"";pointer-events:none;opacity:.24;background-image:url("book/style/paper-grain.svg");mix-blend-mode:multiply}
.shelf-room{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;padding:24px clamp(20px,4vw,64px) 20px;overflow:hidden}
.masthead,footer{display:flex;align-items:center;justify-content:space-between;border-block:1px solid var(--line);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.masthead{padding:12px 0}.masthead p{margin:0}.masthead h1{margin:0;font:400 17px/1 "Source Serif 4",serif;letter-spacing:.01em;text-transform:none}
.manage-link{display:none;color:inherit;font:500 11px/1 "Avenir Next","PingFang SC",sans-serif;letter-spacing:.08em;text-decoration:none}
.collection{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(300px,1.28fr);align-items:center;gap:clamp(28px,7vw,100px);width:min(1120px,100%);margin:auto;padding:48px 0}
.eyebrow{margin:0 0 20px;color:#4d6b79;font-size:10px;letter-spacing:.2em}
.intro h2{margin:0;font:400 clamp(38px,5vw,74px)/1.07 "Source Serif 4","Songti SC",serif;letter-spacing:-.05em}
.book-object{position:relative;justify-self:center;width:min(53vh,440px);aspect-ratio:.78;text-decoration:none;color:#f7f4ea;perspective:1200px;filter:drop-shadow(0 26px 24px rgb(32 57 66 / 24%))}
.book-shadow{position:absolute;z-index:-1;right:-9%;bottom:-6%;width:92%;height:12%;border-radius:50%;background:rgb(15 30 36 / 28%);filter:blur(18px)}
.book-cover{position:absolute;inset:0;overflow:hidden;border-radius:3px 12px 12px 3px;background:#596981;box-shadow:inset 12px 0 20px rgb(15 24 39 / 22%),inset 2px 0 #9baec2;transform:rotateY(-8deg) rotateZ(1.2deg);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s}
.book-cover::before{position:absolute;inset:0;content:"";background:radial-gradient(circle at 77% 16%,var(--blue) 0 7%,transparent 7.3%),radial-gradient(circle at 84% 24%,var(--green) 0 3.5%,transparent 3.8%),linear-gradient(135deg,transparent 45%,rgb(255 255 255 / 8%) 45% 46%,transparent 46%)}
.book-grid{position:absolute;inset:auto -5% -6% 28%;height:54%;transform:rotate(-7deg);opacity:.58;background:repeating-linear-gradient(90deg,transparent 0 30px,#f4eee2 30px 42px),repeating-linear-gradient(0deg,transparent 0 30px,#f4eee2 30px 42px);mix-blend-mode:screen}
.book-title{position:absolute;top:13%;left:12%;font:400 clamp(64px,8vw,112px)/.82 "Source Serif 4",serif;letter-spacing:-.08em}.book-title span{display:block;margin-left:1em;color:var(--green);font-style:italic}
.book-meta{position:absolute;top:14%;right:10%;font-size:9px;line-height:1.6;letter-spacing:.16em;text-align:right}
.book-label{position:absolute;left:12%;bottom:9%;font-size:9px;letter-spacing:.2em}
.book-object:hover .book-cover,.book-object:focus-visible .book-cover{transform:rotateY(-18deg) rotateZ(.3deg) translateY(-8px);filter:saturate(1.1)}
.book-object:focus-visible{outline:2px solid var(--ink);outline-offset:12px}
footer{padding:10px 0;color:#5c727d}
@media(max-width:720px){.shelf-room{padding:16px 18px}.masthead p:first-child{display:none}.collection{grid-template-columns:1fr;padding:30px 0 40px}.intro{text-align:center}.intro h2{font-size:43px}.book-object{width:min(70vw,340px)}footer{font-size:8px}}
@media(min-width:721px){.masthead{position:relative}.manage-link{position:absolute;right:0;bottom:-34px;display:block}}
@media(prefers-reduced-motion:reduce){.book-cover{transition:none}}