/* Illustrated shelf joinery and spines: no images, external assets or scripts. */
.jcbb-library { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 0 0 32px; color: #243c3c; font: 18px/1.5 Georgia, 'Times New Roman', serif; container-type: inline-size; }
.jcbb-library *, .jcbb-library *::before, .jcbb-library *::after { box-sizing: border-box; }
/* v0.4.6 age-band shelves: overlap-aware grouping and balanced shelves up to 10 books on desktop. */
.jcbb-library__age-group { margin: 0 0 46px; }
.jcbb-library__age-group:last-child { margin-bottom: 0; }
.jcbb-library__age-heading { margin: 0 0 10px; padding: 0; color: #164c50; font: 700 clamp(24px, 3cqw, 34px)/1.2 Georgia, 'Times New Roman', serif; text-align: center; letter-spacing: .01em; }

.jcbb-library .jcbb-library__shelves { display: grid; --jcbb-columns: 3; --jcbb-shelf-edge: max(0px, calc((100cqw - var(--jcbb-columns) * 100px) / 2)); grid-template-columns: repeat(3, minmax(0, 100px)); justify-content: center; gap: 38px 0; list-style: none; margin: 0; padding: 0 !important; }
.jcbb-library__slot { position: relative; min-width: 0; display: flex; align-items: flex-end; justify-content: center; --jcbb-row-start: 0; --jcbb-row-end: 0; --jcbb-tail-shift: 0; pointer-events: none; padding: 24px 7px 26px; margin: 0; isolation: isolate; }
.jcbb-library__slot::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(2deg, transparent 0 5px, #5c35151a 5px 6px, transparent 6px 11px), linear-gradient(180deg, #ead0a0 0 2px, #cfab72 2px 6px, #b98950 6px 9px, #a67441 9px 22px, #744a29 22px); box-shadow: inset 0 1px #fff2cf, 0 10px 13px -6px #3f2c2066; }
.jcbb-library__slot::before { content: ''; position: absolute; inset: auto 0 26px; height: 32px; background: linear-gradient(0deg, #6b472220, transparent); z-index: -1; }
/* Book tracks are grouped; only the outer wood segments extend to the full shelf edges. */
.jcbb-library__slot::before, .jcbb-library__slot::after { left: calc(-1 * var(--jcbb-row-start) * var(--jcbb-shelf-edge)); right: calc(-1 * var(--jcbb-row-end) * var(--jcbb-shelf-edge)); pointer-events: none; }
.jcbb-library__slot--start-3 { --jcbb-row-start: 1; }
.jcbb-library__slot--end-3 { --jcbb-row-end: 1; }
.jcbb-library__slot--tail-3 { --jcbb-tail-shift: var(--jcbb-tail-3); }
.jcbb-library__filler { display: none; }
.jcbb-library__filler--3 { display: flex; }
.jcbb-library .jcbb-library__spine { --jcbb-spine-color: #164c50; --jcbb-book-height: 296px; --jcbb-book-width: 74px; position: relative; left: calc(var(--jcbb-tail-shift) * min(100px, 100cqw / var(--jcbb-columns))); pointer-events: auto; display: block; flex: 0 1 auto; width: var(--jcbb-book-width); max-width: 100%; min-width: 44px; height: var(--jcbb-book-height); border: 1px solid #20231e80; border-radius: 7px 9px 3px 3px; background: linear-gradient(90deg, #00000038, transparent 13%, #ffffff18 24%, transparent 42%, #00000026 88%, #ffffff20 97%), var(--jcbb-spine-color); color: #fff4d5; text-decoration: none; box-shadow: inset 3px 0 3px #ffffff12, 4px 4px 5px #3b2d252b; transform-origin: bottom center; transition: transform .16s ease, box-shadow .16s ease; }
.jcbb-library__spine::before, .jcbb-library__spine::after { content: ''; position: absolute; left: 6px; right: 6px; height: 5px; border-top: 1px solid #ead6a6b3; border-bottom: 1px solid #ead6a666; }
.jcbb-library__spine::before { top: 13px; }
.jcbb-library__spine::after { bottom: 15px; }
.jcbb-library .jcbb-library__spine--1 { --jcbb-spine-color: #583d55; --jcbb-book-height: 312px; --jcbb-book-width: 80px; }
.jcbb-library .jcbb-library__spine--2 { --jcbb-spine-color: #2f4b62; --jcbb-book-height: 280px; --jcbb-book-width: 68px; }
.jcbb-library .jcbb-library__spine--3 { --jcbb-spine-color: #43513b; --jcbb-book-height: 302px; --jcbb-book-width: 76px; }
.jcbb-library .jcbb-library__spine--4 { --jcbb-spine-color: #785528; --jcbb-book-height: 320px; --jcbb-book-width: 82px; }
.jcbb-library .jcbb-library__spine--5 { --jcbb-spine-color: #6a3940; --jcbb-book-height: 288px; --jcbb-book-width: 72px; }
.jcbb-library .jcbb-library__spine--6 { --jcbb-spine-color: #245953; --jcbb-book-height: 308px; --jcbb-book-width: 78px; }
.jcbb-library .jcbb-library__spine--7 { --jcbb-spine-color: #754432; --jcbb-book-height: 284px; --jcbb-book-width: 66px; }
.jcbb-library__spine-title { position: absolute; inset: 38px 8px; display: flex; align-items: center; justify-content: center; }
.jcbb-library__spine-title > span { display: block; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); height: 100%; max-width: 100%; font: 600 18px/1.35 Georgia, 'Times New Roman', serif; text-align: center; overflow-wrap: anywhere; }
.jcbb-library__motif { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: 16px; line-height: 1; color: #ead6a6; }
.jcbb-library__binding { position: absolute; bottom: 27px; left: 35%; right: 35%; border-top: 1px solid #ead6a6b3; }
.jcbb-library__ornament { position: absolute; inset: 32px 4px; border: 1px solid #ead6a64d; border-radius: 12px 12px 3px 3px; pointer-events: none; }
.jcbb-library__ornament::before, .jcbb-library__ornament::after { content: ''; position: absolute; left: 4px; right: 4px; height: 6px; border-top: 1px dotted #ead6a6a6; }
.jcbb-library__ornament::before { top: 4px; }
.jcbb-library__ornament::after { bottom: 0; }
.jcbb-library .jcbb-library__theme--celestial { --jcbb-spine-color: #263b60; border-radius: 9px 9px 3px 3px; }
.jcbb-library .jcbb-library__theme--forest { --jcbb-spine-color: #36553f; }
.jcbb-library .jcbb-library__theme--ocean { --jcbb-spine-color: #245b72; border-radius: 5px 12px 3px 3px; }
.jcbb-library .jcbb-library__theme--berry { --jcbb-spine-color: #793b56; }
.jcbb-library .jcbb-library__theme--golden { --jcbb-spine-color: #79582b; }
.jcbb-library .jcbb-library__theme--cloud { --jcbb-spine-color: #426a75; border-radius: 12px 12px 3px 3px; }
.jcbb-library .jcbb-library__theme--botanical { --jcbb-spine-color: #536040; }
.jcbb-library .jcbb-library__theme--mystery { --jcbb-spine-color: #493652; }
.jcbb-library .jcbb-library__theme--adventure { --jcbb-spine-color: #864c35; border-radius: 5px 7px 3px 3px; }
.jcbb-library .jcbb-library__theme--whimsical { --jcbb-spine-color: #844e61; }
.jcbb-library .jcbb-library__theme--classic { --jcbb-spine-color: #603e68; }
.jcbb-library__theme--celestial .jcbb-library__ornament { border-style: dotted; border-radius: 16px; }
.jcbb-library__theme--forest .jcbb-library__ornament, .jcbb-library__theme--botanical .jcbb-library__ornament { border-left: 2px double #ead6a666; border-right: 2px double #ead6a666; border-radius: 16px 4px; }
.jcbb-library__theme--ocean .jcbb-library__ornament { border-style: double; border-width: 3px 1px; border-radius: 18px 6px; }
.jcbb-library__theme--cloud .jcbb-library__ornament { border-style: dashed; border-radius: 18px; }
.jcbb-library__theme--golden .jcbb-library__ornament, .jcbb-library__theme--mystery .jcbb-library__ornament { border-style: double; border-width: 3px; border-radius: 3px; }
.jcbb-library__theme--berry .jcbb-library__ornament, .jcbb-library__theme--whimsical .jcbb-library__ornament { border-radius: 14px 4px 14px 4px; }
.jcbb-library__theme--celestial .jcbb-library__spine-title, .jcbb-library__theme--mystery .jcbb-library__spine-title { inset: 42px 8px 34px; }
.jcbb-library__theme--adventure .jcbb-library__spine-title, .jcbb-library__theme--golden .jcbb-library__spine-title { inset: 36px 8px 40px; }
.jcbb-library__theme--cloud .jcbb-library__spine-title, .jcbb-library__theme--berry .jcbb-library__spine-title { inset: 40px 8px 32px; }
.jcbb-library .jcbb-library__spine--long { height: var(--jcbb-long-height, var(--jcbb-book-height)); }
.jcbb-library__spine--long .jcbb-library__spine-title > span { font-size: 15px; line-height: 1.25; overflow-wrap: normal; word-break: normal; }
.jcbb-library__spine--extra-long .jcbb-library__spine-title > span { font-size: 14px; line-height: 1.22; }
.jcbb-library__spine--very-long .jcbb-library__spine-title > span { font-size: 13px; line-height: 1.2; }
.jcbb-library .jcbb-library__spine:focus-visible { outline: 3px solid #164c50; outline-offset: 5px; box-shadow: 0 0 0 6px #fffaf0, 4px 4px 5px #3b2d252b; z-index: 3; }
.jcbb-library__empty { margin: 0; padding: 24px; border: 1px solid #e3d8c1; border-radius: 16px; background: #fffaf0; }
@container (max-width: 230px) { .jcbb-library__slot { --jcbb-row-start: 0; --jcbb-row-end: 0; --jcbb-tail-shift: 0; } .jcbb-library__slot--start-2 { --jcbb-row-start: 1; } .jcbb-library__slot--end-2 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-2 { --jcbb-tail-shift: var(--jcbb-tail-2); } .jcbb-library .jcbb-library__shelves { --jcbb-columns: 2; grid-template-columns: repeat(2, minmax(0, 100px)); } .jcbb-library .jcbb-library__filler--3 { display: none; } .jcbb-library .jcbb-library__filler--2 { display: flex; } }
@container (max-width: 559px) { .jcbb-library__spine-title > span { font-size: 16px; } }
@container (min-width: 560px) { .jcbb-library__slot { --jcbb-row-start: 0; --jcbb-row-end: 0; --jcbb-tail-shift: 0; } .jcbb-library__slot--start-4 { --jcbb-row-start: 1; } .jcbb-library__slot--end-4 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-4 { --jcbb-tail-shift: var(--jcbb-tail-4); } .jcbb-library .jcbb-library__shelves { --jcbb-columns: 4; grid-template-columns: repeat(4, minmax(0, 100px)); } .jcbb-library .jcbb-library__filler--3 { display: none; } .jcbb-library .jcbb-library__filler--4 { display: flex; } }
@container (min-width: 900px) { .jcbb-library__slot { --jcbb-row-start: 0; --jcbb-row-end: 0; --jcbb-tail-shift: 0; } .jcbb-library__slot--start-1 { --jcbb-row-start: 1; } .jcbb-library__slot--end-1 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-1 { --jcbb-tail-shift: var(--jcbb-tail-1, 0); } .jcbb-library__slot--start-2 { --jcbb-row-start: 1; } .jcbb-library__slot--end-2 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-2 { --jcbb-tail-shift: var(--jcbb-tail-2, 0); } .jcbb-library__slot--start-3 { --jcbb-row-start: 1; } .jcbb-library__slot--end-3 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-3 { --jcbb-tail-shift: var(--jcbb-tail-3, 0); } .jcbb-library__slot--start-4 { --jcbb-row-start: 1; } .jcbb-library__slot--end-4 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-4 { --jcbb-tail-shift: var(--jcbb-tail-4, 0); } .jcbb-library__slot--start-5 { --jcbb-row-start: 1; } .jcbb-library__slot--end-5 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-5 { --jcbb-tail-shift: var(--jcbb-tail-5, 0); } .jcbb-library__slot--start-6 { --jcbb-row-start: 1; } .jcbb-library__slot--end-6 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-6 { --jcbb-tail-shift: var(--jcbb-tail-6, 0); } .jcbb-library__slot--start-7 { --jcbb-row-start: 1; } .jcbb-library__slot--end-7 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-7 { --jcbb-tail-shift: var(--jcbb-tail-7, 0); } .jcbb-library__slot--start-8 { --jcbb-row-start: 1; } .jcbb-library__slot--end-8 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-8 { --jcbb-tail-shift: var(--jcbb-tail-8, 0); } .jcbb-library__slot--start-9 { --jcbb-row-start: 1; } .jcbb-library__slot--end-9 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-9 { --jcbb-tail-shift: var(--jcbb-tail-9, 0); } .jcbb-library__slot--start-10 { --jcbb-row-start: 1; } .jcbb-library__slot--end-10 { --jcbb-row-end: 1; } .jcbb-library__slot--tail-10 { --jcbb-tail-shift: var(--jcbb-tail-10, 0); } .jcbb-library .jcbb-library__shelves { --jcbb-columns: var(--jcbb-desktop-columns); grid-template-columns: repeat(var(--jcbb-desktop-columns), minmax(0, 100px)); } .jcbb-library .jcbb-library__filler { display: none; } }
@media (hover: hover) and (pointer: fine) { .jcbb-library .jcbb-library__spine:hover { transform: translateY(-4px); box-shadow: inset 3px 0 3px #ffffff12, 6px 8px 8px #3b2d2538; } }
@media (prefers-reduced-motion: reduce) { .jcbb-library .jcbb-library__spine { transition: none; } .jcbb-library .jcbb-library__spine:hover { transform: none; } }