/* THE BOOK SHELF (Books tab, js/books-shelf.js): real covers from the catalog drift by in two rows, opposite ways, as
   line art, and one after another a brush of colour sweeps across, as the catalog's hover does; a hover colours one at once */
.shelf{position:relative;margin:-8px calc(50% - 50vw) 34px;padding:14px 0 18px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.shelf-track{display:flex;gap:22px;width:max-content;animation:shelfDrift 110s linear infinite;padding:0 11px 12px;   /* each row on its ledge */
  background:linear-gradient(180deg,rgba(var(--accent),.32),rgba(var(--accent),.1)) 0 100%/100% 6px no-repeat}
.shelf-track+.shelf-track{margin-top:22px}
.shelf-track.rev{animation-direction:reverse;animation-duration:125s}
.shelf:hover .shelf-track,.shelf:focus-within .shelf-track{animation-play-state:paused}
.shelf-js .shelf-track{animation:none;will-change:transform;cursor:grab;user-select:none;-webkit-user-select:none}   /* moved by the script, and by hand */
.shelf-js .shelf-track:active{cursor:grabbing}
.shelf-js img{-webkit-user-drag:none;pointer-events:none}
.shelf-scroll{overflow-x:auto;-webkit-mask:none;mask:none}
@keyframes shelfDrift{to{transform:translateX(-50%)}}
.bk{position:relative;display:block;width:clamp(120px,15vw,168px);flex:none;text-decoration:none;color:inherit;outline:none}
.bk-art{position:relative;display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#f4f1ea;
  box-shadow:0 1px 2px rgba(15,77,71,.18),0 10px 22px -10px rgba(15,77,71,.45);transform:translateY(0) rotate(var(--tilt,0deg));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.bk-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bk-art .b{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.5,0,.25,1)}   /* the line art over the colour: wiped away */
.bk-art::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-30%;width:26%;pointer-events:none;opacity:0;   /* the brush's glint */
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-14deg)}
.bk.lit .bk-art .b{clip-path:inset(0 0 0 100%)}
.bk.lit .bk-art::after{animation:shelfGlint 1.1s cubic-bezier(.5,0,.25,1)}
@keyframes shelfGlint{0%{left:-30%;opacity:1}100%{left:105%;opacity:.2}}
.bk:hover .bk-art,.bk:focus-visible .bk-art{transform:translateY(-8px) rotate(0deg);box-shadow:0 2px 4px rgba(15,77,71,.2),0 18px 30px -12px rgba(15,77,71,.55)}
.bk:focus-visible .bk-art{outline:3px solid rgb(var(--accent));outline-offset:3px}
.bk-pub{position:absolute;top:6px;left:6px;z-index:2;padding:2px 7px;border-radius:9px;font:700 10px/1.4 var(--font-display);letter-spacing:.02em;
  color:#fff;background:rgba(var(--accent),.92)}
.up-next{display:inline-flex;align-items:center;gap:6px;margin:18px auto 0;padding:6px 4px;border:0;background:none;cursor:pointer;
  font:600 14px var(--font-display);color:#3c5561}
.up-next span{color:rgb(var(--accent))}
.up-next:hover span{text-decoration:underline}
html.night-page .bk-art{background:#1b2a36;box-shadow:0 10px 22px -10px rgba(0,0,0,.7)}
html.night-page .up-next{color:var(--night-text)}
@media (prefers-reduced-motion:reduce){
  .shelf-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding:0 20px}
  .bk-art .b{transition:none}.bk.lit .bk-art::after{animation:none}
}
@media (max-width:640px){.shelf-track{gap:14px;animation-duration:70s}.shelf{margin-bottom:26px}}

/* THE WEB SHELF (Web tab, same file's script): real pages in little browser windows, two rows drifting opposite ways;
   one at a time scrolls down through its whole page and back, as a visitor would; a hover scrolls one */
.web-shelf .shelf-track{gap:26px}
.win{position:relative;display:block;width:clamp(220px,24vw,300px);flex:none;text-decoration:none;outline:none;border-radius:9px;overflow:hidden;
  background:#fff;box-shadow:0 1px 2px rgba(15,77,71,.16),0 14px 28px -14px rgba(15,77,71,.5);transform:rotate(var(--tilt,0deg));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.win-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;background:linear-gradient(#f3f1ec,#e9e6df);border-bottom:1px solid rgba(0,0,0,.06)}
.win-bar i{width:7px;height:7px;border-radius:50%;background:#e2786b}
.win-bar i+i{background:#e8c25a}.win-bar i+i+i{background:#7cbd6b}
.win-bar span{flex:1;margin-left:6px;height:12px;border-radius:6px;background:rgba(255,255,255,.85)}
.win-view{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#f4f1ea}
.win-view img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 5.5s cubic-bezier(.45,0,.3,1)}
.win.lit .win-view img{transform:translateY(var(--to,0))}
.win:hover,.win:focus-visible{transform:translateY(-8px) rotate(0deg);box-shadow:0 2px 4px rgba(15,77,71,.2),0 22px 34px -14px rgba(15,77,71,.6)}
.win:focus-visible{outline:3px solid rgb(var(--accent));outline-offset:3px}
html.night-page .win{background:#1b2a36;box-shadow:0 14px 28px -14px rgba(0,0,0,.75)}
html.night-page .win-bar{background:linear-gradient(#22313d,#1b2833);border-color:rgba(255,255,255,.05)}
html.night-page .win-bar span{background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){.win-view img{transition:none}}