/* books.css v0.6: the years column matches the snaps desktop gallery, min(1280px, calc(100vw - 32px)). v0.5: cover mosaic gutter is 2px at every width. v0.4 (jay 2026.10.30): covers stay the same grid. glow-gold is an explicit top recommendation (pulsing gold border). glow-orange is a favorite (pulsing brand-orange #FF4D1A border). each read-year is a .year, newest first.
   the heading matches the snaps month caption (snaps.css .month h2): italic mono, 11px / 10px on a phone,
   --c, 22px above and 10px below. those month headings are not sticky, so these are not either.
   the first year sits under the note the way the first month sits under the backlog (margin-top 0). */
body.board .years{--gw:min(1280px,calc(100vw - 32px));width:var(--gw);max-width:none;margin:0 calc((100% - var(--gw)) / 2)}
body.board .year h2{margin:22px 0 10px;text-align:center;font-family:var(--mono);font-size:11px;font-style:italic;font-weight:500;line-height:1.25;color:var(--c);text-shadow:0 0 8px rgba(var(--bg-rgb),.8)}
body.board .year:first-child h2{margin-top:0}
@media (max-width:760px){body.board .year h2{font-size:10px}}
body.board .covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:100%}
@media (min-width:760px){body.board .covers{grid-template-columns:repeat(5,1fr);gap:2px}}
@media (min-width:1100px){body.board .covers{grid-template-columns:repeat(6,1fr)}}
body.board .covers li{position:relative;aspect-ratio:2/3;overflow:hidden;background:rgba(var(--bg-rgb),.6)}
body.board .covers a{display:block;width:100%;height:100%;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body.board .covers img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}
body.board .covers .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-family:var(--mono);font-size:10px;font-style:italic;line-height:1.25;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .15s;pointer-events:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (min-width:760px){body.board .covers .cap{font-size:11px}}
@media (hover:hover){body.board .covers a:hover .cap{opacity:1}}
body.board .covers a:focus-visible .cap,body.board .covers a.show .cap{opacity:1}
body.board .covers a:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
/* gold: explicit top recommendation. orange: favorite. the border pulses on the cover. reduced motion keeps a steady glow. */
@keyframes book-glow-gold{0%,100%{box-shadow:inset 0 0 0 2px #C9A227,0 0 8px 1px rgba(255,215,0,.55)}50%{box-shadow:inset 0 0 0 2px #FFE566,0 0 18px 4px rgba(255,215,0,.95)}}
@keyframes book-glow-orange{0%,100%{box-shadow:inset 0 0 0 2px #B8300A,0 0 8px 1px rgba(255,77,26,.55)}50%{box-shadow:inset 0 0 0 2px #FF8A5E,0 0 18px 4px rgba(255,77,26,.95)}}
body.board .covers li.glow-gold,body.board .covers li.glow-orange{overflow:visible;z-index:1}
body.board .covers a.glow-gold{animation:book-glow-gold 1.8s ease-in-out infinite}
body.board .covers a.glow-orange{animation:book-glow-orange 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  body.board .covers a.glow-gold{animation:none;box-shadow:inset 0 0 0 2px #FFD700,0 0 12px 2px rgba(255,215,0,.85)}
  body.board .covers a.glow-orange{animation:none;box-shadow:inset 0 0 0 2px #FF4D1A,0 0 12px 2px rgba(255,77,26,.85)}
}
body.board .covers .nocover{display:flex;flex-direction:column;justify-content:center;gap:6px;height:100%;padding:8px;box-sizing:border-box;font-family:var(--mono);font-size:10px;font-style:italic;line-height:1.25;color:var(--fg);border:1px solid rgba(var(--c-rgb),.45);text-align:center;overflow:hidden}
body.board .covers .nocover b{font-weight:600;font-style:normal;color:var(--c)}