/* Bookhatch community library: shelf + readers. Loaded after /assets/site.css; every class is prefixed cl- to stay independent of it. */
:root{--cl-wood:#B98955;--cl-wood-hi:#D6AD7A;--cl-wood-lo:#7E5A34;--cl-paper:#FFFBF2}

.cl-hero .in{padding-block:28px 28px}
.cl-hero h1{margin-top:16px;font-size:clamp(36px,4.8vw,60px)}
.cl-hero .cl-lede{font-size:19px;color:var(--ink-2);max-width:60ch;margin-top:16px}
.cl-hero .cl-note{font-size:15px;color:var(--ink-2);max-width:62ch;margin-top:10px}

/* filter chips */
.cl-filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.cl-chip{border:1.5px solid var(--rule);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:8px 15px;font:700 15px/1.2 var(--body);cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.cl-chip:hover{border-color:var(--ink-2);color:var(--ink)}
.cl-chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.cl-chip .n{font-variant-numeric:tabular-nums;opacity:.75;font-weight:800;font-size:13px}
.cl-status{position:absolute;left:-9999px}

/* the shelf: every slot has the same height, so the wooden planks can be painted as a repeating background */
.cl-shelfwrap{padding-block:24px 64px}
.cl-shelf{--stage:250px;--plank:18px;--label:78px;--gap:34px;--pitch:calc(var(--stage) + var(--plank) + var(--label) + var(--gap));
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));column-gap:0;row-gap:var(--gap);
  background-image:
    linear-gradient(to bottom,transparent 0 var(--stage),var(--cl-wood-hi) var(--stage) calc(var(--stage) + 3px),var(--cl-wood) calc(var(--stage) + 3px) calc(var(--stage) + var(--plank) - 4px),var(--cl-wood-lo) calc(var(--stage) + var(--plank) - 4px) calc(var(--stage) + var(--plank)),rgba(60,40,20,.16) calc(var(--stage) + var(--plank)) calc(var(--stage) + var(--plank) + 7px),transparent calc(var(--stage) + var(--plank) + 7px));
  background-size:100% var(--pitch);background-repeat:repeat-y;border-radius:4px}
.cl-shelf li{display:flex;flex-direction:column;min-width:0}
.cl-book{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:8px;height:100%}
.cl-stage{height:var(--stage);display:flex;align-items:flex-end;justify-content:center;padding:0 14px}
.cl-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(var(--stage) - 14px);border-radius:2px 4px 4px 2px;background:var(--sunk);
  box-shadow:0 1px 1px rgba(27,26,31,.18),6px 10px 18px -8px rgba(27,26,31,.45),inset 0 0 0 1px rgba(0,0,0,.04);transform-origin:50% 100%;transition:transform .2s ease,box-shadow .2s ease}
.cl-stage img.sq{width:150px}.cl-stage img.tall34{width:150px}.cl-stage img.tall23{width:138px}
.cl-book:hover .cl-stage img,.cl-book:focus-visible .cl-stage img{transform:translateY(-6px) rotate(-1deg);box-shadow:0 1px 1px rgba(27,26,31,.18),8px 18px 26px -10px rgba(27,26,31,.5)}
.cl-book:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.cl-label{height:var(--label);margin-top:var(--plank);padding:12px 10px 0;text-align:center;display:flex;flex-direction:column;gap:3px}
.cl-label b{font:500 16.5px/1.2 var(--display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cl-label span{font:700 13px/1.3 var(--body);color:var(--ink-2);letter-spacing:.01em}
.cl-book:hover .cl-label b{color:var(--teal)}
@media (max-width:560px){
  .cl-shelf{--stage:206px;--label:80px;--gap:26px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-stage{padding:0 10px}
  .cl-stage img.sq{width:124px}.cl-stage img.tall34{width:124px}.cl-stage img.tall23{width:116px}
  .cl-label b{font-size:15.5px}
}
.cl-empty{color:var(--ink-2);padding:24px 0}

/* sample badge */
.cl-badge{display:inline-flex;align-items:center;gap:8px;background:var(--yolk-soft);color:#5A4413;border:1px solid #E6D3A6;border-radius:999px;padding:5px 12px;font:800 12.5px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.cl-badge::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--yolk)}

/* book detail */
.cl-detail .in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;align-items:start;padding-block:24px 56px}
@media (max-width:820px){.cl-detail .in{grid-template-columns:minmax(0,1fr);gap:28px}}
.cl-crumbs{grid-column:1/-1}
.cl-cover{margin:0;justify-self:center;width:100%;max-width:340px}
.cl-cover img{display:block;width:100%;height:auto;border-radius:3px 7px 7px 3px;box-shadow:0 1px 2px rgba(27,26,31,.2),14px 22px 40px -18px rgba(27,26,31,.55)}
@media (max-width:820px){.cl-cover{max-width:260px}}
.cl-info h1{font-size:clamp(32px,4vw,50px);margin-top:14px}
.cl-info .cl-sub{font:500 20px/1.3 var(--display);color:var(--ink-2);margin-top:8px}
.cl-info .cl-by{margin-top:10px;font-weight:700;color:var(--ink-2)}
.cl-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:22px 0 0;border:1px solid var(--rule);border-radius:16px;background:var(--surface);overflow:hidden}
.cl-facts div{padding:12px 14px;border-right:1px solid var(--rule)}
.cl-facts div:last-child{border-right:0}
.cl-facts dt{font:800 11.5px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cl-facts dd{margin:3px 0 0;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
@media (max-width:560px){.cl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-facts div:nth-child(2){border-right:0}.cl-facts div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.cl-blurb{margin-top:20px;font-size:18px;max-width:60ch}
.cl-info .actions{margin-top:24px}
.cl-made{margin-top:14px;font-size:14px;color:var(--ink-2);max-width:60ch}

/* reader shell */
.cl-reader{padding-block:56px 72px}
.cl-reader .head{margin-bottom:28px}
.cl-hint{font-size:15px;color:var(--ink-2)}

/* picture book */
.cl-pb{max-width:1040px;margin:0 auto}
.cl-pages{list-style:none;margin:0;padding:0}
.cl-spread{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(27,26,31,.45),0 0 0 1px var(--rule)}
.cl-spread + .cl-spread{margin-top:24px}
.cl-pb.js .cl-spread + .cl-spread{margin-top:0}
.cl-spread .art{position:relative;background:var(--sunk);aspect-ratio:4/3}
.cl-spread .art img{display:block;width:100%;height:100%;object-fit:cover}
.cl-spread .txt{background:var(--cl-paper);padding:clamp(24px,5%,52px);display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;box-shadow:inset 22px 0 26px -22px rgba(0,0,0,.28)}
.cl-spread .txt p{font:600 clamp(18px,2vw,23px)/1.55 var(--body);color:#2B2A33;max-width:30ch}
.cl-spread .folio{position:absolute;bottom:14px;right:20px;font:700 13px var(--body);color:#8C8475;font-variant-numeric:tabular-nums}
@media (max-width:760px){.cl-spread{grid-template-columns:minmax(0,1fr)}.cl-spread .txt{box-shadow:inset 0 18px 22px -20px rgba(0,0,0,.25);padding:22px 20px 40px}.cl-spread .txt p{font-size:18px;max-width:none}}
.cl-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.cl-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);font:800 20px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.cl-nav button:hover:not(:disabled){background:var(--ink);color:var(--surface)}
.cl-nav button:disabled{opacity:.35;cursor:default}
.cl-count{font:800 16px var(--body);font-variant-numeric:tabular-nums;min-width:9ch;text-align:center}
.cl-dots{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.cl-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--rule);cursor:pointer}
.cl-dots button[aria-current="true"]{background:var(--teal)}
.cl-pb:not(.js) .cl-nav,.cl-pb:not(.js) .cl-dots{display:none}
.cl-pb.js .cl-pages{touch-action:pan-y}

/* coloring grid + lightbox */
.cl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:900px){.cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.cl-grid a{display:block;text-decoration:none;width:100%;padding:10px;background:#fff;border:1px solid var(--rule);border-radius:6px;cursor:zoom-in;box-shadow:0 14px 30px -20px rgba(27,26,31,.45);transition:transform .15s}
.cl-grid a:hover{transform:translateY(-3px)}
.cl-grid img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
.cl-grid .cap{display:block;margin-top:8px;font:700 13px var(--body);color:var(--ink-2);text-align:center;font-variant-numeric:tabular-nums}
.cl-lb{border:0;padding:0;background:transparent;max-width:min(96vw,760px);width:100%;max-height:96vh;overflow:visible}
.cl-lb::backdrop{background:rgba(20,22,18,.78)}
.cl-lb .box{background:var(--surface);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:94vh}
.cl-lb img{display:block;width:100%;height:auto;max-height:calc(94vh - 110px);object-fit:contain;background:#fff;border-radius:6px}
.cl-lb .bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.cl-lb .bar .grp{display:flex;gap:8px;align-items:center}
.cl-lb .ib{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:800 18px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.cl-lb .ib:hover{border-color:var(--ink)}
.cl-lb .cl-count{min-width:6ch}

/* reading view */
.cl-read{max-width:68ch;margin:0 auto;font:400 19px/1.75 var(--body);color:#26252B}
.cl-toc{max-width:68ch;margin:0 auto 36px;border:1px solid var(--rule);border-radius:16px;background:var(--surface);padding:16px 20px}
.cl-toc ol{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:4px;font-weight:700}
.cl-toc li::marker{color:var(--yolk);font-weight:800}
.cl-chap{scroll-margin-top:24px}
.cl-chap + .cl-chap{margin-top:64px;padding-top:48px;border-top:1px solid var(--rule)}
.cl-chap .num{display:block;font:800 13px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.cl-chap h3{font:600 clamp(28px,3.4vw,38px)/1.15 var(--display);color:var(--teal);text-align:center;margin:8px 0 28px;letter-spacing:-.01em}
.cl-chap figure{margin:0 0 30px}
.cl-chap figure img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 20px 40px -26px rgba(27,26,31,.5)}
.cl-read p{margin:0}
.cl-read p + p{text-indent:1.5em}
.cl-read .first::first-letter{font:600 3.3em/.82 var(--display);float:left;margin:.07em .1em 0 0;color:var(--teal)}
.cl-read .sign{text-indent:0!important;text-align:center;font-weight:800;letter-spacing:.06em;margin:18px 0}
.cl-end{max-width:68ch;margin:48px auto 0;text-align:center;color:var(--ink-2);font-size:16px}
.cl-end b{display:block;font:500 20px var(--display);color:var(--ink);margin-bottom:6px}
@media (max-width:560px){.cl-read{font-size:18px}}

/* more books */
.cl-more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:820px){.cl-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cl-more a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.cl-more .im{height:200px;display:flex;align-items:flex-end;justify-content:center}
.cl-more img{display:block;width:auto;height:auto;max-height:200px;max-width:100%;border-radius:2px 4px 4px 2px;box-shadow:6px 10px 18px -8px rgba(27,26,31,.45)}
.cl-more b{font:500 16px/1.2 var(--display);text-align:center}
.cl-more span{font:700 13px var(--body);color:var(--ink-2);text-align:center}
.cl-more a:hover b{color:var(--teal)}
@media (max-width:560px){.cl-more .im{height:160px}.cl-more img{max-height:160px}}

@media (prefers-reduced-motion:reduce){.cl-stage img,.cl-grid a{transition:none}}
.cl-label .nw{white-space:nowrap;color:inherit;font:inherit}