.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,260px));gap:34px;margin:30px 0 10px}
.card{text-decoration:none;display:block;padding:12px;transition:transform .15s}
.card:hover{transform:rotate(-1.2deg) translateY(-4px)}
.card img{width:100%;height:auto;aspect-ratio:1000/1414;object-fit:cover;background:#111}
.card .no{font-family:Impact,sans-serif;color:var(--hop);letter-spacing:.2em;font-size:.85rem;margin-top:12px}
.card h3{font-size:1.5rem;margin:2px 0}.card p{color:var(--dim);font-size:.85rem;margin:0}
.card .prog{height:4px;background:rgba(238,232,220,.15);margin-top:10px}.card .prog i{display:block;height:100%;background:var(--blood)}
.rough{border:2px solid var(--chalk);border-radius:2px 14px 3px 18px/16px 3px 14px 2px;box-shadow:3px 4px 0 rgba(238,232,220,.15)}
.lib-hero{display:flex;align-items:center;gap:28px;padding:40px 0 10px}.lib-hero img{width:120px}
.lib-hero .tate{writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;font-size:1.6rem;letter-spacing:.2em;color:rgba(238,232,220,.18);margin-left:auto}
.video{aspect-ratio:16/9;width:100%;border:0;background:#111}
.facade{position:relative;aspect-ratio:16/9;cursor:pointer;background:#111 center/cover;display:grid;place-items:center;max-width:720px}
.facade span{font-size:3rem;text-shadow:0 0 12px #000}
.vids{display:grid;gap:22px;max-width:720px}
/* reader */
body.reading{overflow:hidden}
#reader{display:none;position:fixed;inset:60px 0 0;flex-direction:column;background:var(--bg) url(img/chalk.png)}
body.reading #reader{display:flex}body.reading #library{display:none}
.rbar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:2px dashed rgba(238,232,220,.2);flex-wrap:wrap}
.rbar h1{font-size:1.1rem;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.rbar h1 small{color:var(--hop);font-family:var(--jp);letter-spacing:.2em;margin-right:8px}
.tb{background:none;border:2px solid var(--chalk);color:var(--chalk);font:600 .78rem/1 var(--body);letter-spacing:.12em;padding:8px 10px;cursor:pointer;border-radius:3px 10px 4px 12px/10px 4px 12px 3px}
.tb:hover,.tb[aria-pressed=true]{color:var(--bg);background:var(--hop);border-color:var(--hop)}
.tb.plank{border:0;background:url(img/plank.svg) center/100% 100% no-repeat;padding:12px 20px;font-family:Impact,sans-serif;font-size:1rem}
.tb.plank:hover{background:url(img/plank.svg) center/100% 100% no-repeat;color:var(--hop)}
.tb:disabled{opacity:.3;cursor:default}
.counter{font-family:Impact,sans-serif;letter-spacing:.1em;min-width:70px;text-align:center}
.counter select{background:var(--bg);color:var(--chalk);border:1px solid var(--dim);font:inherit;padding:2px}
.stage{flex:1;position:relative;overflow:auto;display:flex;justify-content:center;align-items:flex-start;touch-action:pan-y pinch-zoom;user-select:none}
.stage .pg{display:flex;gap:6px;margin:auto;padding:10px}
.stage img{background:#111;box-shadow:0 0 0 2px rgba(238,232,220,.6),4px 6px 0 rgba(0,0,0,.6)}
.fit-height .stage img{max-height:calc(100vh - 60px - 140px - 20px);width:auto;max-width:calc((100vw - 40px)/var(--n,1))}
.fit-width .stage img{width:calc((min(100vw,1400px) - 40px)/var(--n,1));height:auto}
.hot{position:absolute;top:0;bottom:0;width:50%;cursor:pointer;z-index:2}.hot.l{left:0;cursor:w-resize}.hot.r{right:0;cursor:e-resize}
.strip{display:flex;gap:8px;overflow-x:auto;padding:8px 14px;border-top:2px dashed rgba(238,232,220,.2);scrollbar-width:thin}
.strip button{flex:0 0 auto;padding:0;border:2px solid transparent;background:none;cursor:pointer;position:relative}
.strip button.on{border-color:var(--hop)}.strip img{height:70px;width:auto;aspect-ratio:1000/1414}
.strip span{position:absolute;bottom:0;right:2px;font:700 .7rem var(--body);text-shadow:0 0 3px #000}
.endcard{padding:40px;text-align:center}
@media(max-width:700px){.rbar h1{max-width:100%;flex-basis:100%}.hide-sm{display:none}.strip img{height:54px}.fit-height .stage img{max-height:calc(100vh - 60px - 190px)}.lib-hero .tate{display:none}}
/* compact phone reader */
@media(max-width:700px){
body.reading>nav{display:none}
#reader{inset:0;height:100dvh}
.rbar{flex-wrap:nowrap;gap:6px;padding:4px 6px;border-bottom-width:1px}
.rbar h1,#fit{display:none}
.rbar .tb{padding:6px 8px;font-size:.72rem}
.tb.plank{padding:7px 12px;font-size:.85rem}
.counter{min-width:0;font-size:.85rem;margin:0 auto}
.stage .pg{padding:4px}
.stage img{box-shadow:0 0 0 1px rgba(238,232,220,.5)}
.fit-height .stage img,.fit-width .stage img{width:min(calc(100vw - 8px),calc((100dvh - 96px)*1000/1414));height:auto;max-height:none;max-width:none}
.stage{align-items:center}
.strip{padding:4px 6px;gap:5px;border-top-width:1px}
.strip img{height:38px}
}