/* Library: the bookshelves drawn by assets/js/library.js on the Library page template. Everything the script makes
   carries an lb- class, so nothing here touches the rest of the theme. */
@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2"); }

.library-head { border-bottom: 0; padding-top: 0; padding-bottom: 0.5rem; text-align: center; }
.library-head .statement-text, .library-head .statement-desc, .library-head .library-intro { margin-left: auto; margin-right: auto; }
.library-intro { max-width: 38rem; margin-top: 1.25rem; color: var(--graphite); }
.library-intro > * { margin: 0; }
.library-intro > * + * { margin-top: 1em; }
.library-intro:empty { display: none; }

.lib { --lb-grain-h: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px, rgba(255,255,255,.035) 3px 4px, transparent 4px 9px, rgba(0,0,0,.04) 9px 10px, transparent 10px 15px); --lb-grain-v: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px, rgba(255,255,255,.035) 3px 4px, transparent 4px 9px, rgba(0,0,0,.04) 9px 10px, transparent 10px 15px); --lb-under: 0.72; --lb-ground: 0.34; --lb-wood: #9A6236; --lb-wood-l: #B8794A; --lb-wood-d: #4E2E18; --lb-edge: #2A1608; padding: 0.5rem 0 4rem; }
html[data-scheme="dark"] .lib { --lb-under: 0.62; --lb-ground: 0.5; --lb-wood: #7A4A26; --lb-wood-l: #94602F; --lb-wood-d: #2E1A0D; --lb-edge: #170B03; }
@media (prefers-color-scheme: dark) {
    html[data-scheme="auto"] .lib { --lb-under: 0.62; --lb-ground: 0.5; --lb-wood: #7A4A26; --lb-wood-l: #94602F; --lb-wood-d: #2E1A0D; --lb-edge: #170B03; }
}

.lib-msg { max-width: none; margin: 1rem 0 0.75rem; min-height: 1.5em; color: var(--graphite); font-size: 0.95rem; }
.lib[hidden] { display: none; }

/* The landing: pictures of the bookcases, made ahead of time by extras/shelves (npm run shelves) and already in the page.
   Each is one button. All the bookcases stand in one row across the window, so the page still shows around them; on a phone they stand one under another. */
.lib-shelves { display: flex; align-items: flex-end; width: min(calc((100vw - 48px) * 0.8), 1900px); margin: 0.5rem 0 4rem calc((100% - min(calc((100vw - 48px) * 0.8), 1900px)) / 2); }
.lib-landing[hidden], .lib-shelves[hidden] { display: none; }
.lib-shelf { position: relative; flex: none; display: block; margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; container-type: inline-size; transition: translate 0.2s ease; -webkit-tap-highlight-color: transparent; }
/* a bookcase you point at or tab to wobbles a little, about its top board, so Booster up there stays with it (it used to lift, and left her behind) */
@keyframes lib-wobble { 0%, 100% { rotate: 0deg; } 18% { rotate: -1.1deg; } 42% { rotate: 0.9deg; } 66% { rotate: -0.55deg; } 85% { rotate: 0.25deg; } }
.lib-shelf { transform-origin: 50% 9%; }
.lib-shelf:hover, .lib-shelf:focus-visible { animation: lib-wobble 0.75s ease-in-out; }
.lib-shelf.lib-opening { animation: none; }
.lib-shelf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.lib-shelf-img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-select: none; user-select: none; }
.lib-shelf-dark { display: none; }
html[data-scheme="dark"] .lib-shelf-light { display: none; }
html[data-scheme="dark"] .lib-shelf-dark { display: block; }
@media (prefers-color-scheme: dark) {
    html[data-scheme="auto"] .lib-shelf-light { display: none; }
    html[data-scheme="auto"] .lib-shelf-dark { display: block; }
}
.lib-shelf-cap { position: absolute; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--cap); color: var(--graphite); white-space: nowrap; pointer-events: none; }
/* Chosen: sparkles start at once and keep drifting while the bookcase loads; the picture and the live bookcase then grow together
   (library.js, playMorph). */
.lib-shelf.lib-opening { cursor: progress; }

/* The live bookcase is drawn out of sight while one is pointed at: in the page's column, so it measures as it will be shown */
.lib.lib-warm { position: fixed; top: 0; visibility: hidden; pointer-events: none; }
.lib.lib-fadein { animation: lib-fade 0.28s ease-out; }
@keyframes lib-fade { from { opacity: 0; } to { opacity: 1; } }
.lib-shelves-msg { margin: 0 0 1rem; text-align: center; color: var(--graphite); font-size: 0.95rem; }
.lib-shelves-msg[hidden] { display: none; }
/* A second row of bookcases (Shelves 4 and 5) sits centred under the first, close to it */
.lib-shelves:has(+ .lib-shelves-2) { margin-bottom: 1rem; }
.lib-shelves-2 { justify-content: center; margin-top: 0; }
@media (max-width: 899px) {
    .lib-shelves, .lib-shelves:has(+ .lib-shelves-2) { flex-direction: column; align-items: center; width: 100%; margin-left: 0; margin-bottom: 0; }
    .lib-shelves-2 { margin-bottom: 2rem; }
    .lib-shelf { width: calc(min(100%, 560px) * var(--rel, 1)) !important; margin: 0 0 1.5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    .lib-shelf { transition: none; }
    .lib-shelf:hover, .lib-shelf:focus-visible { animation: none; }
        .lib.lib-bloom { animation: none; }
}
/* Nothing on the shelves can be text-selected, so a long press on a phone picks a thing up instead of opening the copy menu */
/* The shelves use the whole width of the page and nothing crops them: a zoomed case grows across and down the page */
#lib-vp { width: 100vw; margin-left: calc(50% - 50vw); overflow: visible; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#lib-sizer { position: relative; margin: 0 auto; }
/* The page's main column clips anything wider than itself; on the Library page that clip is lifted so the shelves can
   use the full width. The page itself is kept from scrolling sideways until a case is zoomed. */
main:has(.lib) { overflow-x: visible; }
html:has(.lib):not(.lib-zoomed) { overflow-x: clip; }
html.lib-zoomed, html.lib-zoomed body { overflow-x: auto; }
.lib-zoomreset { position: fixed; right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 10px 26px -12px rgba(12, 13, 16, 0.6); cursor: pointer; }
.lib-zoomreset[hidden] { display: none; }
@media (min-width: 900px) { .lib-zoomreset { bottom: 1.25rem; } }
#lib-case { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.lib-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.lib-lab, .lib-cap, #lib-palette, .lib-group { font-family: var(--mono); font-size: 0.75rem; color: var(--graphite); }
.lib-field { position: relative; display: flex; flex-direction: column; gap: 0.2rem; }
/* Menus: a pill that opens a panel in the page's own paper and ink. A phone keeps its own picker behind the same pill. */
.lib select, .lib-pill { border-radius: 999px; min-width: 9.5rem; }
.lib select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-repeat: no-repeat; background-position: right 0.8rem center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.lib select.lib-native { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.lib-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 44px; margin: 0; padding: 0 0.9rem 0 1rem; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; line-height: 1.2; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); cursor: pointer; }
.lib-pill:hover { background: var(--wash); }
.lib-pill i { display: inline-flex; color: var(--graphite); transition: transform 0.15s; }
.lib-pill[aria-expanded="true"] i { transform: rotate(180deg); }
.lib-menu, .lib-topics { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; max-height: 60vh; overflow: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 16px 36px -14px rgba(12, 13, 16, 0.55); }
.lib-menu { display: flex; flex-direction: column; min-width: 100%; padding: 0.35rem; }
.lib-menu[hidden], .lib-topics[hidden], .lib-opt[hidden] { display: none; }
.lib-menu.lib-up, .lib-topics.lib-up { top: auto; bottom: calc(100% - 1.1rem + 6px); }
.lib-opt { margin: 0; padding: 0.55rem 0.8rem; text-align: left; white-space: nowrap; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; color: var(--ink); background: none; border: 0; border-radius: 9px; cursor: pointer; }
.lib-opt:hover, .lib-opt:focus-visible { background: var(--wash); outline: none; }
.lib-opt[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.lib-topics { width: min(34rem, 92vw); padding: 0.9rem; }
.lib-group { margin: 0.8rem 0 0.4rem; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lib-chip { min-height: 36px; margin: 0; padding: 0.3rem 0.75rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; }
.lib-chip:hover { background: var(--wash); }
.lib-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 600px) { .lib-topics { position: fixed; top: auto; left: 0.5rem; right: 0.5rem; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 60vh; } }
.lib-icon { justify-content: center; width: 44px; padding: 0; }
.lib-icon svg { display: block; }
.lib select, .lib-ctl, .lb-ctl {
    display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 0.9rem;
    font-family: var(--sans); font-size: 0.875rem; font-weight: 500; line-height: 1.2; text-decoration: none;
    color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; cursor: pointer;
}
.lib-ctl:hover, .lb-ctl:hover { background: var(--wash); }
.lib-ctl[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lib select:focus-visible, .lib-pill:focus-visible, .lib-chip:focus-visible, .lib-ctl:focus-visible, .lb-ctl:focus-visible, .lb-book:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lib-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.lib-tools[hidden], .lib-ctl[hidden] { display: none; }
.lib-cap { margin: 1rem 0 0.4rem; }
#lib-palette { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
#lib-palette span { display: flex; align-items: center; gap: 0.25rem; }
#lib-palette i { display: block; width: 14px; height: 14px; border: 1px solid var(--rule); border-radius: 3px; }

/* The card for the selected book: fixed to the corner, clear of the floating menu */
#lib-info {
    position: fixed; right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: none; gap: 0.9rem; align-items: flex-start; width: min(420px, calc(100vw - 2rem)); max-height: 70vh; overflow: auto;
    padding: 0.9rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#lib-info.lb-on { display: flex; }
#lib-info { box-sizing: border-box; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--graphite) transparent; }
#lib-info::-webkit-scrollbar { width: 9px; }
#lib-info::-webkit-scrollbar-track { background: transparent; }
#lib-info::-webkit-scrollbar-thumb { background: var(--graphite); border-radius: 6px; border: 2px solid var(--paper); }
#lib-info h2 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
#lib-info p { margin: 0 0 0.15rem; font-size: 0.875rem; color: var(--graphite); }
#lib-info .lb-f { flex: 1; min-width: 0; }
#lib-info .lb-ctl { margin-top: 0.6rem; }
.lb-cover {
    position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: 132px; height: 192px; padding: 18px 12px; text-align: center; font-family: "IM Fell English SC", Georgia, serif;
    background-color: var(--c);
    background-image: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 8%, rgba(255,255,255,.08) 50%, rgba(0,0,0,.22));
    border: 1px solid rgba(20, 10, 4, 0.8); border-radius: 2px 5px 5px 2px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.45);
}
.lb-cover::before { content: ""; position: absolute; inset: 7px; border: 1px solid currentColor; border-radius: 3px; opacity: 0.65; }
.lb-cover b { font-weight: 400; line-height: 1.15; overflow-wrap: anywhere; }
.lb-cover small { font-size: 10px; line-height: 1.2; }
.lb-cover.lb-photo { padding: 0; overflow: hidden; }
.lb-cover.lb-photo::before { content: none; }
.lb-cover.lb-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* The bookcases */
.lb-fr { position: absolute; }
/* The landing: every bookcase drawn small, for choosing. Nothing inside responds; each bookcase is one button. */
.lib-over > *:not(#lib-vp) { display: none !important; }
.lib-over .lb-box { cursor: pointer; transition: translate 0.2s ease; }
.lib-over .lb-box:hover, .lib-over .lb-box:focus-visible { translate: 0 -14px; outline: none; }
.lib-over .lb-box * { pointer-events: none; }
.lib-over .lb-glow0, .lib-over .lb-glow1, .lib-over .lb-glow2 { animation: none; }
@media (prefers-reduced-motion: reduce) { .lib-over .lb-box { transition: none; } }
/* One box per bookcase. They stand side by side in rows, or one under another on a narrow screen. Each box holds flat
   layers for the back panel, the books and the curios; nothing is turned in 3D, which keeps the page quick to draw. */
.lb-box { position: absolute; left: 0; top: 0; }
.lb-plane { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-plane > * { pointer-events: auto; }
.lb-cap { visibility: hidden; /* the shelf titles are gone; the space stays so nothing moves */ z-index: 3; font-family: var(--mono); font-size: 24px; line-height: 34px; text-align: center; color: var(--graphite); }
/* A darker, straighter bookcase */
.lb-dark { --lb-wood: #4A382F; --lb-wood-l: #5C473B; --lb-wood-d: #241A16; --lb-edge: #120C09; }
/* Shelf 4: a tall oak case. Shelf 5: the ladder, with oak rails and white shelves */
.lb-oak { --lb-wood: #A8703A; --lb-wood-l: #BC8348; --lb-wood-d: #4C2F18; --lb-edge: #22130A; }
.lb-pale { --lb-wood: #D9B27A; --lb-wood-l: #F2F1ED; --lb-wood-d: #E8E4DB; --lb-edge: #8A7A5C; }
html[data-scheme="dark"] .lb-oak { --lb-wood: #8A5A2E; --lb-wood-l: #9C6A38; --lb-wood-d: #3A2412; }
html[data-scheme="dark"] .lb-pale { --lb-wood: #B8935F; --lb-wood-l: #D6D4CE; --lb-wood-d: #C2BEB4; }
@media (prefers-color-scheme: dark) {
    html[data-scheme="auto"] .lb-oak { --lb-wood: #8A5A2E; --lb-wood-l: #9C6A38; --lb-wood-d: #3A2412; }
    html[data-scheme="auto"] .lb-pale { --lb-wood: #B8935F; --lb-wood-l: #D6D4CE; --lb-wood-d: #C2BEB4; }
}
.lb-ladder .lb-plank { background-image: linear-gradient(180deg, rgba(255,255,255,.95) 0 3px, rgba(255,255,255,0) 3px, rgba(0,0,0,.1)); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.32), inset 0 -2px 0 rgba(0, 0, 0, 0.07); }
/* The ladder leans on the wall: nothing behind the shelves, so the page shows through */
.lb-ladder .lb-back, .lb-ladder .lb-tshade, .lb-ladder .lb-shade, .lb-ladder .lb-fairy { display: none; }
.lb-ladder .lb-topb { background-color: var(--lb-wood-l); background-image: linear-gradient(180deg, rgba(255,255,255,.95) 0 3px, rgba(255,255,255,0) 3px, rgba(0,0,0,.1)); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.07); }
/* A figure's moving parts (library-art.js) play while its curio is hovered, focused or held; never for visitors who ask for less motion */
.lb-curio .mv { animation-duration: var(--d, 1.6s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; animation-play-state: paused; }
.lb-curio:hover .mv, .lb-curio:focus-visible .mv, .lb-curio.lb-lift .mv, .lb-curio.lb-drag .mv { animation-play-state: running; }
html.lib-zoomed .lb-curio .mv { animation: none; }
@media (prefers-reduced-motion: reduce) { .lb-curio .mv { animation: none !important; } }
@keyframes lbm-swayA { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes lbm-swayB { from { transform: rotate(12deg); } to { transform: rotate(-18deg); } }
@keyframes lbm-swayC { from { transform: rotate(-30deg); } to { transform: rotate(26deg); } }
@keyframes lbm-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes lbm-tail { from { transform: skewY(-6deg) rotate(-4deg); } to { transform: skewY(7deg) rotate(5deg); } }
@keyframes lbm-spin { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes lbm-nod { from { transform: rotate(-3deg); } to { transform: rotate(6deg); } }
@keyframes lbm-cape { from { transform: skewX(-3deg); } to { transform: skewX(4deg); } }
@keyframes lbm-wob { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes lbm-dag { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes lbm-hair { from { transform: skewX(-2deg); } to { transform: skewX(3deg); } }
@keyframes lbm-hem { from { transform: skewX(-1.5deg); } to { transform: skewX(2deg); } }
@keyframes lbm-flick { from { transform: scaleY(.94) skewX(-2deg); } to { transform: scaleY(1.06) skewX(2deg); } }
@keyframes lbm-breath { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
.lib-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; margin: 0 0 1rem; }
.lib-nav:empty { display: none; }
.lib .lib-navb { min-height: 40px; padding: 0 0.9rem; border-radius: 999px; color: var(--ink); background: var(--paper); }
.lib .lib-navb[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.lib .lib-navb[data-step] { width: 40px; padding: 0; justify-content: center; font-size: 1.25rem; line-height: 1; }
.lib .lib-navb[data-view] { margin-left: 0.6rem; }
.lb-back {
    z-index: 0; background-color: var(--lb-wood-d); border: 2px solid var(--lb-edge); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 7%, rgba(0,0,0,0) 93%, rgba(0,0,0,.55)), repeating-linear-gradient(90deg, transparent 0 60px, rgba(0,0,0,.2) 60px 62px), radial-gradient(ellipse 9px 22px at 31% 27%, rgba(20,8,2,.5), transparent), radial-gradient(ellipse 7px 16px at 78% 64%, rgba(20,8,2,.45), transparent), var(--lb-grain-v);
}
/* The wood has some age: grain, a knot or two, uneven tone, a worn lighter edge and the odd scratch */
.lb-post, .lb-topb, .lb-skirt, .lb-foot, .lb-plank { background-color: var(--lb-wood); border: 2px solid var(--lb-edge); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 226, 180, 0.16); }
.lb-post { z-index: 3; background-image: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,0) 35%, rgba(0,0,0,.34)), radial-gradient(ellipse 6px 13px at 46% 22%, rgba(40,18,5,.6), rgba(40,18,5,.2) 60%, transparent), radial-gradient(ellipse 5px 10px at 60% 71%, rgba(40,18,5,.5), transparent), linear-gradient(176deg, transparent 0 41%, rgba(255,235,200,.2) 41% 41.3%, transparent 41.3%), linear-gradient(180deg, rgba(0,0,0,.1), transparent 30%, rgba(255,255,255,.05) 55%, rgba(0,0,0,.16)), var(--lb-grain-v); }
.lb-topb, .lb-skirt { z-index: 3; background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%, rgba(0,0,0,.3)), radial-gradient(ellipse 15px 5px at 18% 55%, rgba(40,18,5,.55), rgba(40,18,5,.2) 60%, transparent), radial-gradient(ellipse 11px 4px at 67% 42%, rgba(40,18,5,.5), transparent), linear-gradient(94deg, transparent 0 58%, rgba(255,235,200,.22) 58% 58.2%, transparent 58.2%), linear-gradient(90deg, rgba(0,0,0,.12), transparent 28%, rgba(255,255,255,.06) 60%, rgba(0,0,0,.14)), var(--lb-grain-h); }
.lb-topb { display: flex; align-items: flex-end; justify-content: center; }
.lb-foot { z-index: 2; background-image: var(--lb-grain-v); }
.lb-wedge { z-index: 2; background: #C8281E; border: 2px solid var(--lb-edge); border-radius: 2px; box-shadow: inset 0 -3px 0 #F4F2EC; }
.lb-plank {
    z-index: 1; background-color: var(--lb-wood-l); box-shadow: 0 7px 9px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 226, 180, 0.16);
    background-image: linear-gradient(180deg, rgba(255,255,255,.34) 0 3px, rgba(255,255,255,.06) 3px, rgba(0,0,0,.34)), radial-gradient(ellipse 13px 4px at 24% 60%, rgba(40,18,5,.55), rgba(40,18,5,.2) 60%, transparent), radial-gradient(ellipse 9px 3px at 81% 45%, rgba(40,18,5,.5), transparent), linear-gradient(92deg, transparent 0 37%, rgba(255,235,200,.22) 37% 37.15%, transparent 37.15%), linear-gradient(90deg, rgba(0,0,0,.14), transparent 22%, rgba(255,255,255,.07) 48%, transparent 70%, rgba(0,0,0,.16)), var(--lb-grain-h);
}
/* The shadow under the top board stays inside the case */
.lb-tshade { z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,var(--lb-under)), rgba(0,0,0,.3) 40%, rgba(0,0,0,.08) 75%, rgba(0,0,0,0)); }
.lb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The shadow on the page under each case */
.lb-ground { z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,var(--lb-ground)), rgba(0,0,0,0) 68%); }
/* Fairy lights behind the books: the bulbs brighten and dim slowly, in three groups on different timings */
.lb-fairy { z-index: 1; pointer-events: none; }
.lb-fairy svg { display: block; overflow: visible; }
.lb-glow0, .lb-glow1, .lb-glow2 { animation: lb-glow 4s ease-in-out infinite alternate; }
.lb-glow1 { animation-duration: 5.3s; }
.lb-glow2 { animation-duration: 6.7s; }
@keyframes lb-glow { from { opacity: 0.1; } to { opacity: 0.7; } }
/* While zoomed in, the lights hold still: animating them at that size is what made the page crawl */
html.lib-zoomed .lb-glow0, html.lib-zoomed .lb-glow1, html.lib-zoomed .lb-glow2 { animation: none; }
@keyframes lb-glow-soft { from { opacity: 0.4; } to { opacity: 0.7; } }
.lb-plank span { position: absolute; top: 19px; font-family: var(--sans); font-size: 12px; font-style: italic; white-space: nowrap; color: var(--ink); }
/* The top of each shelf board: books stand at its back, curios in front of them, and a little board shows in front of those */
.lb-floor { display: none; position: absolute; left: 0; bottom: 100%; width: 100%; height: 22px; pointer-events: none; background-color: var(--lb-wood-l); background-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 55%, rgba(255,255,255,.12)), var(--lb-grain-h); }
.lb-inner, .lb-rshade { display: none; }
.lb-shade { position: absolute; left: 0; top: calc(100% + 2px); width: 100%; height: 140px; pointer-events: none; z-index: 1; background: linear-gradient(rgba(0,0,0,var(--lb-under)), rgba(0,0,0,.3) 40%, rgba(0,0,0,.08) 75%, rgba(0,0,0,0)); }
.lb-deco { z-index: 3; transform-origin: 50% 100%; }
.lb-deco svg { display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.lb-flame { animation: lb-flicker 1.1s ease-in-out infinite; }
@keyframes lb-flicker { 50% { opacity: 0.45; } }

/* The books */
.lb-book {
    position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
    transform-origin: 0 100%; transition: opacity 0.35s, scale 0.15s;
    background-color: var(--c);
    background-image: linear-gradient(90deg, rgba(0,0,0,.44), rgba(0,0,0,0) 20%, rgba(255,255,255,.22) 36%, rgba(0,0,0,0) 58%, rgba(0,0,0,.46));
    border: 1px solid rgba(20, 10, 4, 0.8); border-radius: 2px 2px 1px 1px;
    box-shadow: 3px -3px 7px rgba(0,0,0,.42), inset 0 6px 5px rgba(0,0,0,.24), inset 0 -4px 4px rgba(0,0,0,.26);
}
.lb-book.lb-flat {
    background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.22) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.46));
    box-shadow: 2px 3px 6px rgba(0,0,0,.45), inset 5px 0 5px rgba(0,0,0,.22), inset -5px 0 5px rgba(0,0,0,.22);
}
.lb-book.lb-face {
    cursor: grab; touch-action: pan-x pan-y; border-radius: 2px 5px 5px 2px; box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0) 9%, rgba(255,255,255,.08) 50%, rgba(0,0,0,.22));
}
.lb-book span {
    position: relative; z-index: 1; flex: none; writing-mode: vertical-rl; text-align: center;
    font-family: "IM Fell English SC", Georgia, serif; font-size: 12px; line-height: 13px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.lb-book.lb-hz span, .lb-book.lb-flat span, .lb-book.lb-face span { writing-mode: horizontal-tb; }
/* Curios: in front of the books, movable, and hidden all at once by the Hide curios button */
.lb-curio { position: absolute; left: 0; top: 0; z-index: 500; margin: 0; padding: 0; border: 0; background: none; cursor: grab; touch-action: pan-x pan-y; appearance: none; -webkit-appearance: none; transform-origin: 0 100%; transition: scale 0.15s; }
/* A curio glides into place only after being dropped, never on first draw or a sort */
.lb-curio.lb-settle { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.15s; }
.lb-curio svg { display: block; overflow: visible; filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.4)); }
.lb-curio:focus-visible { outline: 2px solid #E3B23C; outline-offset: 3px; }
/* a leaning comic is only its painted cover: the clear corners of its box let a click through to the pile behind */
/* Where the layers are tucked together, the ones behind stand a little higher, smaller and darker, so the case has depth */
.lb-tucked .lb-p-books1 { transform: translate(5px, -10px) scale(0.985); transform-origin: 50% 100%; filter: brightness(0.8); }
.lb-tucked .lb-p-books2 { transform: translate(10px, -20px) scale(0.97); transform-origin: 50% 100%; filter: brightness(0.64); }
.lb-curio.lb-lean { pointer-events: none; }
.lb-curio.lb-lean svg g[clip-path] { pointer-events: auto; cursor: pointer; }
.lb-nocurios .lb-curio:not(.lb-pile) { display: none; }
.lb-orn { position: absolute; left: 0; top: 0; pointer-events: none; }
.lb-orn svg { display: block; }
.lb-sel { outline: 3px solid #E3B23C; outline-offset: 2px; }
.lb-drag { transition: none !important; }
/* By hand on a touch screen: a swipe still scrolls the page; press and hold a book to pick it up */
.lb-manual .lb-book { cursor: grab; touch-action: pan-x pan-y; }
/* Picked up: a little larger and brighter, so it is clear what is in hand. Faded: outside the chosen topic */
.lb-lift { filter: brightness(1.12); cursor: grabbing; } /* the grow is in the item's transform (library.js, lift()), so it cannot move the item */
.lb-curio.lb-lift { filter: none; }
.lb-dim { opacity: 0.16; filter: grayscale(0.7); }
@media (prefers-reduced-motion: reduce) {
    .lb-book, .lb-curio { transition: none; }
    .lb-flame { animation: none; }
    .lb-ring .lb-box, .lb-box { transition: none; }
    /* A slow fade in place is not movement, so the lights keep a gentle glow */
    .lb-glow0, .lb-glow1, .lb-glow2 { animation-name: lb-glow-soft; animation-duration: 9s; }
}

/* "Or see all N books as a list" under the bookcases */
.lib-allbooks { margin: -2.2rem 0 1.5rem; text-align: center; font-family: var(--mono); font-size: 0.85rem; }
.lib-allbooks a { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.lib-allbooks a:hover, .lib-allbooks a:focus-visible { color: var(--ink); text-decoration-color: currentColor; outline: none; }
@media (max-width: 899px) { .lib-allbooks { margin-top: 0.5rem; } }

/* Sparkles (made by library.js): a burst when a bookcase is chosen, more drifting up while it loads. A book chosen in the list
   gets one burst and the live bookcase blooms outward from its middle. */
.lib-sparks { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.lib-spark { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background: var(--c); opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: lib-spark var(--d) cubic-bezier(0.15, 0.7, 0.3, 1) var(--w) forwards; }
@keyframes lib-spark { 0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); } 12% { opacity: 1; } 55% { opacity: 0.85; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); } }
.lib-glow { position: absolute; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 217, 138, 0.55), rgba(255, 197, 107, 0.18) 45%, transparent 70%); opacity: 0; animation: lib-glow-burst 0.7s ease-out forwards; }
@keyframes lib-glow-burst { 0% { opacity: 0; transform: scale(0.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
/* The copy of the picture that grows into the live bookcase */
.lib-ghost { position: fixed; z-index: 65; max-width: none; margin: 0; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; }
.lib-landing:focus { outline: none; }
.lib.lib-bloom { transform-origin: 50% 40%; animation: lib-bloom 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lib-bloom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* The list of books */
.lib-books { padding: 0.5rem 0 4rem; }
.lib-books[hidden] { display: none; }
.lib-books-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.lib-books-head h2 { margin: 0; font-size: 1.4rem; line-height: 1.2; }
.lib-books-head h2:focus { outline: none; }
.lib-books-count { font-family: var(--mono); font-size: 0.8rem; color: var(--graphite); }
.lib-books-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.lib-books-q { flex: 1 1 16rem; min-height: 44px; margin: 0; padding: 0 1rem; font: 0.9rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; }
.lib-books-q:focus-visible, .lib-books-tools select:focus-visible, .lib-row:focus-visible, .lib-books-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lib-books-tools select { min-height: 44px; margin: 0; padding: 0 1rem; font: 500 0.875rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; }
.lib-books-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.lib-books-topics { max-height: 4.9rem; overflow: hidden; }
.lib-books-topics.is-open { max-height: none; }
.lib-books-link { margin: 0 0 0.9rem; padding: 0; font: 0.8rem var(--mono); color: var(--graphite); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.lib-books-link:hover { color: var(--ink); }
.lib-books-empty { margin: 1rem 0; color: var(--graphite); }
.lib-books-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lib-books-list > li { border-bottom: 1px solid var(--rule); }
.lib-row { display: grid; grid-template-columns: 14px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.8fr) minmax(7rem, auto); align-items: center; gap: 0.2rem 0.9rem; width: 100%; margin: 0; padding: 0.6rem 0.4rem; text-align: left; font: 0.875rem/1.3 var(--sans); color: var(--ink); background: none; border: 0; cursor: pointer; }
.lib-row:hover { background: var(--wash); }
.lib-sw { width: 10px; height: 26px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.lib-r-t { font-weight: 600; overflow-wrap: anywhere; }
.lib-r-a, .lib-r-m, .lib-r-w { color: var(--graphite); overflow-wrap: anywhere; }
.lib-r-m { font-size: 0.8rem; }
.lib-r-w { font: 0.75rem var(--mono); text-align: right; white-space: nowrap; }
.lib-books-more { display: block; margin: 1.2rem auto 0; }
@media (max-width: 700px) {
    .lib-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
    .lib-r-t { grid-column: 2; }
    .lib-r-w { grid-column: 3; grid-row: 1; }
    .lib-r-a, .lib-r-m { grid-column: 2 / 4; }
}

/* The card of a pile of comics: a search box, a grid of covers (one per title), the chosen title's issues */
#lib-info .lb-f-pile { display: flex; flex-direction: column; }
.lb-pq { width: 100%; box-sizing: border-box; margin: 0.45rem 0; padding: 0.45rem 0.8rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.875rem; }
.lb-cg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; }
.lb-ct { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lb-ct b { display: block; margin-top: 0.3rem; font-size: 0.72rem; line-height: 1.2; }
.lb-ct small { color: var(--graphite); font-size: 0.68rem; }
.lb-cv { aspect-ratio: 150 / 215; border-radius: 3px; background-repeat: no-repeat; background-color: #222; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
/* a title with no cover: a plate in its pile's colours, ruled like the cover of a Gotham special, with the imprint at the foot */
.lb-cv.plate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.4rem 0.3rem 0.9rem; text-align: center; font-size: 0.6rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; box-shadow: inset 0 0 0 3px #0c0c0e, inset 0 0 0 4.5px currentColor, 0 2px 6px rgba(0, 0, 0, 0.4); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.3)); }
.lb-cv.plate span { display: block; padding: 0.15rem 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.lb-cv.plate small { position: absolute; left: 0; right: 0; bottom: 0.4rem; font-size: 0.42rem; font-weight: 800; letter-spacing: 0.06em; opacity: 0.85; }
.lb-ct[aria-pressed="true"] .lb-cv { outline: 3px solid var(--ink); outline-offset: 1px; }
.lb-cd { margin: 0.6rem 0 0; }
.lb-cdr { display: flex; gap: 0.7rem; padding: 0.7rem; border: 1px solid var(--rule); border-radius: 10px; }
.lb-cdr .lb-cv { flex: none; width: 88px; }
.lb-cdr h3 { margin: 0 0 0.15rem; font-size: 0.95rem; }
.lb-cdr p { margin: 0 0 0.4rem; font-size: 0.8rem; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.4rem; }
.lb-chips span { padding: 0.1rem 0.5rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.74rem; }
.lb-chips span.lb-top { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lb-pn { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0; }
.lb-pg { padding: 0.2rem 0.6rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.78rem; cursor: pointer; }
.lb-pg[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Booster, the library cat: painted frames on a canvas over the pictures; only she can be pressed, and only where she is drawn. */
.lib-landing { position: relative; }
.lib-cat-btn { position: absolute; padding: 0; border: 0; background: none; opacity: 0; cursor: pointer; border-radius: 12px; }
.lib-cat-btn:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; background: none; }
.lib-cat-bubble { position: absolute; z-index: 8; transform: translate(-50%, -100%); max-width: 16em; padding: 0.4em 0.75em; border: 1px solid var(--rule); border-radius: 0.8em; background: var(--paper); color: var(--ink); font: 600 0.85rem/1.25 var(--sans, system-ui, sans-serif); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); pointer-events: none; opacity: 0; transition: opacity 0.25s ease; }
.lib-cat-bubble.on { opacity: 1; }
.lib-cat-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0.7em; height: 0.7em; margin: -0.38em 0 0 -0.35em; background: var(--paper); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg); }
.lb-plane > .lb-cat { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lib-cat-bubble { transition: none; } }