/* The series and author pages (/series/…, /authors/…) and their index
   (/books-in-order): made monthly from the catalogue by
   tools/pages/build.mjs (README, "Series and author pages"), which asks for
   this file with ?v= its content's hash, so a change here reaches the pages
   on their next build. They share landing.css's nav and footer, page.css's
   badges and kabook.css's theme; this is the page. No style attributes (the
   CSP): the charts are inline SVG coloured by the classes at the end. From
   round 12 (approved 2026-10-12). */
.bp { padding: 40px 0 0; }

/* The top: the tag, the title, one line of fact, the order (or where the
   story starts); three covers fanned, as the app's series screen has them. */
.bp-hd { display: grid; gap: 22px; }
.bp-hd h1 { margin-top: 12px; font-weight: 600; font-size: clamp(34px, 5.6vw, 56px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.bp-fact { margin-top: 14px; font-size: 18px; line-height: 1.45; color: var(--s-lead); }
.bp-fact a { color: var(--s-acc); text-underline-offset: 3px; }
.bp-order { margin-top: 6px; font-size: 14.5px; color: var(--s-mute); }
.bp-fan { position: relative; order: -1; width: 150px; height: 104px; }
.bp-fan .fan { position: absolute; bottom: 0; width: 64px; height: 96px; border-radius: 3px; object-fit: cover; background: var(--s-fill); box-shadow: 0 1px 2px rgb(var(--sh-cv) / .16), 0 6px 16px -6px rgb(var(--sh-cv) / .4); }
.bp-fan .f1 { left: 43px; z-index: 3; }
.bp-fan .f2 { left: 6px; transform: rotate(-9deg) scale(.88); transform-origin: bottom center; z-index: 2; }
.bp-fan .f3 { left: 80px; transform: rotate(9deg) scale(.88); transform-origin: bottom center; z-index: 1; }
@media (min-width: 760px) {
  .bp { padding-top: 56px; }
  .bp-hd { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .bp-fan { order: 0; width: 230px; height: 160px; margin-right: 10px; }
  .bp-fan .fan { width: 96px; height: 144px; }
  .bp-fan .f1 { left: 67px; } .bp-fan .f2 { left: 10px; } .bp-fan .f3 { left: 124px; }
}

/* The books, in order: the place, the cover, the title, year and pages,
   one line of the description. A novella sits in its place, smaller. */
.bp-books { margin-top: 30px; max-width: 780px; }
.bk { display: grid; grid-template-columns: 30px 48px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--s-line); }
.bk-n { margin-top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--s-acc) 13%, transparent); color: var(--s-acc); font-size: 13.5px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.bk-n.word { width: auto; height: 22px; margin-top: 4px; padding: 0 7px; justify-self: start; border-radius: 99px; font-size: 11px; }
.bk-cv { display: block; width: 48px; height: 72px; border-radius: 3px; object-fit: cover; background: var(--s-fill); box-shadow: 0 1px 2px rgb(var(--sh-cv) / .14), 0 3px 10px -4px rgb(var(--sh-cv) / .3); }
.bk h2 { font-size: 17.5px; font-weight: 650; line-height: 1.25; letter-spacing: -.012em; }
.bk-meta { display: block; margin-top: 3px; font-size: 14px; color: var(--s-mute); font-variant-numeric: tabular-nums; }
.bk-ex { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--s-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk.nov { padding: 10px 0; }
.bk.nov .bk-n { width: 28px; height: 22px; margin-top: 4px; border-radius: 99px; font-size: 11.5px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-acc) 35%, transparent); }
.bk.nov .bk-cv { width: 36px; height: 54px; margin-left: 6px; }
.bk.nov h2 { font-size: 15.5px; }
.bk.nov .bk-ex { -webkit-line-clamp: 1; }
@media (min-width: 760px) { .bk-ex { -webkit-line-clamp: 1; } }

/* Tucked: box sets, companions and books with no number. */
.bp-also { max-width: 780px; margin-top: 4px; border-top: 1px solid var(--s-line); padding-top: 14px; font-size: 14.5px; color: var(--s-mute); }
.bp-also summary { cursor: pointer; width: fit-content; font-size: 15px; font-weight: 600; color: var(--s-acc); }
.bp-also p { margin-top: 8px; }
.bp-also ul { margin-top: 8px; }
.bp-also li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px dashed var(--s-line); color: var(--s-body); }
.bp-also li small { color: var(--s-mute); font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* The charts: a card each on wide screens, three across; on a phone the
   column itself, so the SVG is drawn at its real size (360 wide). */
.bp-data { margin-top: 50px; display: grid; gap: 34px; }
.ch { min-width: 0; padding-top: 28px; border-top: 1px dashed var(--s-line); }
@media (min-width: 760px) {
  .bp-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ch { padding: 22px 20px 20px; border: 1px solid var(--s-line); border-radius: 18px; }
}
@media (min-width: 1100px) { .bp-data { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ch h2 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.ch-svg { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 16px; overflow: visible; }
.ch-say { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: var(--s-prose); }
.ch-foot { margin-top: 4px; font-size: 12.5px; color: var(--s-mute); }
.ch-figs { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 22px; margin-top: 12px; }
.ch-figs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.ch-figs dt { font-size: 12.5px; color: var(--s-mute); }
.ch-figs dd { margin: 2px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.ch-figs div:last-child dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-figs:not(.four) div:last-child dd { font-size: 15px; line-height: 1.75; font-weight: 600; }
.ch-key { margin-top: 10px; counter-reset: k; font-size: 14px; color: var(--s-prose); }
.ch-key li { counter-increment: k; display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.ch-key li::before { content: counter(k); flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--s-acc); color: var(--s-on-ink); font-size: 11px; font-weight: 700; }
[data-theme] .ch-key li::before { color: #fff; }
.ch-key small { color: var(--s-mute); font-size: 12.5px; }

.ch-svg text { font-family: var(--f-sans); font-size: 11.5px; fill: var(--s-mute); }
.ch-svg .ch-v { fill: var(--s-ink); font-weight: 650; }
.ch-svg .ch-n { font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-svg .ch-s { font-size: 10.5px; }
.ch-svg .ch-key { fill: var(--s-ink); font-size: 11px; font-weight: 700; }
.ch-bar { fill: var(--s-acc); }
.ch-faint { fill: var(--s-acc); fill-opacity: .3; }
.ch-axis { stroke: var(--s-line); stroke-width: 1; }
.ch-half { stroke: var(--s-mute); stroke-width: 1; stroke-opacity: .7; }
.ch-gap { stroke: var(--s-acc); stroke-width: 3; stroke-linecap: round; }
.ch-dot { fill: var(--s-mute); stroke: var(--s-bg); stroke-width: 2; }
.ch-dot.hot { fill: var(--s-acc); }
.ch-none { stroke: var(--s-mute); stroke-width: 1.5; stroke-opacity: .6; }

/* Links: the author's other books, the same subjects. */
.bp-links { margin-top: 56px; display: grid; gap: 40px; }
@media (min-width: 900px) { .bp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.ln h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.ln-say { margin-top: 6px; font-size: 14.5px; color: var(--s-mute); }
.cards { margin-top: 14px; display: grid; gap: 8px; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border-radius: 14px; background: var(--s-soft); text-decoration: none; color: inherit; }
a.sc:hover b { color: var(--s-acc); }
.sc b { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.25; }
.sc small { display: block; margin-top: 2px; font-size: 13px; color: var(--s-mute); }
.sc-cv { flex: none; display: block; width: 40px; height: 60px; border-radius: 3px; object-fit: cover; background: var(--s-fill); box-shadow: 0 1px 2px rgb(var(--sh-cv) / .14), 0 3px 8px -4px rgb(var(--sh-cv) / .3); }
.ln-all { margin-top: 14px; }
.ln-all a, .ap-all { font-size: 15px; font-weight: 600; color: var(--s-acc); text-underline-offset: 3px; }

/* Kabook's line */
.bp-kb { margin-top: 56px; padding: 28px 24px; border-radius: 22px; background: var(--s-soft); }
.bp-kb h2 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.bp-kb p { margin-top: 8px; font-size: 16px; color: var(--s-lead); }
.bp-kb .stores { margin-top: 18px; --bh: 44px; }
.bp-gr { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.bp-gr a { color: var(--s-acc); text-underline-offset: 3px; }
.bp-upd { margin-top: 18px; font-size: 13px; color: var(--s-mute); }
.bp ~ .foot { margin-top: 70px; }

/* The author page: where readers start beside the title; each series a
   short list; the standalones by year, in columns on wide screens. */
.ap-start { padding: 16px; border-radius: 18px; background: var(--s-soft); }
.ap-start h2 { font-size: 13.5px; font-weight: 650; color: var(--s-mute); }
.ap-card { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; margin-top: 10px; align-items: start; }
.ap-cv { display: block; width: 70px; height: 105px; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 2px rgb(var(--sh-cv) / .16), 0 6px 14px -6px rgb(var(--sh-cv) / .4); }
.ap-card b { display: block; font-size: 19px; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }
.ap-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--s-prose); }
@media (min-width: 760px) { .ap-hd { grid-template-columns: minmax(0, 1fr) 400px; } .ap-card { grid-template-columns: 84px minmax(0, 1fr); } .ap-cv { width: 84px; height: 126px; } }
.ap-series, .ap-alone { margin-top: 48px; }
.ap-series > h2, .ap-alone > h2 { font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
.ap-sgrid { margin-top: 16px; display: grid; gap: 14px; }
@media (min-width: 760px) { .ap-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ap-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-s { padding: 16px 18px 18px; border: 1px solid var(--s-line); border-radius: 16px; }
.ap-s h3 { display: inline; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.ap-s h3 a { color: inherit; text-decoration-color: color-mix(in srgb, var(--s-acc) 40%, transparent); text-underline-offset: 3px; }
.ap-s h3 a:hover { color: var(--s-acc); }
.ap-n { margin-left: 8px; font-size: 13.5px; color: var(--s-mute); }
.ap-s ol { margin: 10px 0 0; }
.ap-s li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--s-line); font-size: 15px; }
.ap-s .n, .ap-list .y, .ap-s .y { color: var(--s-mute); font-variant-numeric: tabular-nums; font-size: 13.5px; line-height: 1.6; }
.ap-all { display: inline-block; margin-top: 10px; }
.ap-list { margin-top: 12px; }
.ap-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--s-line); font-size: 15.5px; break-inside: avoid; }
.ap-list small { display: block; font-size: 13px; color: var(--s-mute); }
@media (min-width: 760px) { .ap-list { columns: 2; column-gap: 36px; } }
@media (min-width: 1100px) { .ap-list { columns: 3; } }
.ap .bp-also { max-width: none; margin-top: 10px; }
.ap .bp-also li { display: grid; justify-content: stretch; }

/* No cover: the app's violet in a few hues (no style attributes). */
.cv-none.bk-cv, .cv-none.sc-cv, .cv-none.fan, .cv-none.ap-cv { position: relative; overflow: hidden; }
.cv-none .ph b { font-size: 9px; }
.h0 { --h: 262; } .h1 { --h: 330; } .h2 { --h: 24; } .h3 { --h: 200; } .h4 { --h: 150; } .h5 { --h: 290; }

/* The index, /books-in-order: two lists, A to Z, each page's title as a
   link and its fact line under it; side by side from 760 px. */
.bi-cols { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 760px) { .bi-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.bi h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.bi-list { margin-top: 12px; }
.bi-list li { padding: 11px 0; border-top: 1px solid var(--s-line); }
.bi-list a { font-size: 17px; font-weight: 600; color: var(--s-ink); text-decoration: none; }
.bi-list a:hover { color: var(--s-acc); text-decoration: underline; text-underline-offset: 3px; }
.bi-list small { display: block; margin-top: 2px; font-size: 14px; color: var(--s-mute); font-variant-numeric: tabular-nums; }
.bi ~ .foot { margin-top: 70px; }