/* The data pages (/data/…): The books everyone means to read, made from
   Open Library's dumps by tools/to-be-read/ (README, "Books everyone means
   to read"), which asks for this file with ?v= its content's hash. They
   share landing.css's nav and footer, page.css's reading column and badges
   and kabook.css's theme; this is the page. No style attributes (the CSP):
   the bars and charts are inline SVG coloured by the classes at the end, as
   the series pages' are (books.css). */
.dp { padding: 40px 0 0; }
.dp .x { max-width: 1080px; }
.dp ~ .foot { margin-top: 70px; }

/* The top: the tag, the title, the lede and the first three books' covers
   fanned, as a series page's header has them; then three figures. */
.dp-hd { display: grid; gap: 22px; }
.dp-hd h1 { margin-top: 12px; font-weight: 600; font-size: clamp(38px, 6.4vw, 64px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.dp-hd h1 em { font-size: 1.1em; padding-right: .04em; }
.dp-lede { margin-top: 16px; max-width: 620px; font-size: 18px; line-height: 1.5; color: var(--s-lead); }
.dp-fan { position: relative; order: -1; width: 150px; height: 104px; }
.dp-fan img { 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); }
.dp-fan .f1 { left: 43px; z-index: 3; }
.dp-fan .f2 { left: 6px; transform: rotate(-9deg) scale(.88); transform-origin: bottom center; z-index: 2; }
.dp-fan .f3 { left: 80px; transform: rotate(9deg) scale(.88); transform-origin: bottom center; z-index: 1; }
@media (min-width: 760px) {
  .dp { padding-top: 56px; }
  .dp-hd { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .dp-fan { order: 0; width: 230px; height: 160px; margin-right: 10px; }
  .dp-fan img { width: 96px; height: 144px; }
  .dp-fan .f1 { left: 67px; } .dp-fan .f2 { left: 10px; } .dp-fan .f3 { left: 124px; }
}

.dp-figs { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 0; border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.dp-figs div { min-width: 0; }
.dp-figs dt { font-size: 13px; line-height: 1.35; color: var(--s-mute); }
.dp-figs dd { margin: 0 0 4px; font-size: clamp(18px, 5.4vw, 34px); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.dp-figs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
@media (min-width: 760px) { .dp-figs { gap: 28px; padding: 22px 0; } .dp-figs dt { font-size: 14px; } }

/* Section headings and the line under each. */
.dp-sec { margin-top: 54px; }
.dp-sec > h2 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 650; line-height: 1.15; letter-spacing: -.025em; }
.dp-say { margin-top: 8px; max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--s-prose); }
.dp-key { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--s-mute); }
.dp-key span { display: inline-flex; align-items: center; gap: 7px; }
.dp-key i { display: block; width: 14px; height: 8px; border-radius: 2px; background: var(--s-acc); }
.dp-key i.want { background: color-mix(in srgb, var(--s-acc) 20%, transparent); }

/* The list: a row a book, its place, cover, title and author, how many
   have read it as one in so many, the bar (all who shelved it as wanting or
   having read it, the read part solid) and the counts. Two columns from
   1000 px, read down the first and then the second. */
.tb-list { margin-top: 18px; }
@media (min-width: 1000px) { .tb-list { columns: 2; column-gap: 48px; } }
.tb { display: grid; grid-template-columns: 30px 48px minmax(0, 1fr) auto; gap: 0 14px; align-items: start; padding: 15px 0; border-top: 1px solid var(--s-line); break-inside: avoid; }
.tb-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; }
.tb-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); }
.tb-t { min-width: 0; grid-column: 3 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
.tb h3 { font-size: 16.5px; font-weight: 650; line-height: 1.25; letter-spacing: -.012em; overflow-wrap: anywhere; }
.tb-by { grid-column: 1; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--s-mute); }
.tb-by a { color: var(--s-acc); text-underline-offset: 2px; }
.tb-fig { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }
.tb-fig b { display: block; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.tb-fig small { display: block; font-size: 12px; color: var(--s-mute); }
.tb-bar { grid-column: 1 / -1; display: block; width: 100%; height: 8px; margin-top: 10px; border-radius: 4px; overflow: hidden; }
.tb-nums { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--s-mute); font-variant-numeric: tabular-nums; }
.tb-nums b { font-weight: 650; color: var(--s-ink); }

/* The charts: a card each on wide screens, side by side; on a phone the
   column itself. Each is rows of text and bars, so it reflows. */
.dp-charts { margin-top: 54px; display: grid; gap: 34px; }
.dp-ch { min-width: 0; padding-top: 28px; border-top: 1px dashed var(--s-line); }
@media (min-width: 860px) {
  .dp-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
  .dp-ch { padding: 24px 22px 22px; border: 1px solid var(--s-line); border-radius: 18px; }
}
.dp-ch h2 { font-size: 21px; font-weight: 650; line-height: 1.2; letter-spacing: -.018em; }
.dp-ch .dp-say { font-size: 15px; }
.dp-ch-foot { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--s-mute); }

/* Kinds of books: the list's bar, a row a kind; and the books climbing
   Want to Read, a bar as long as the times its share grew. */
.kd, .rs { margin-top: 16px; }
.kd li, .rs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; padding: 10px 0 11px; border-top: 1px solid var(--s-line); }
.kd-name, .rs-name { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.kd-fig, .rs-fig { font-size: 14px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kd .tb-bar { margin-top: 7px; }
.rs-name small { font-size: 13.5px; font-weight: 400; color: var(--s-mute); }
.rs-bar { grid-column: 1 / -1; display: block; width: 100%; height: 8px; margin-top: 7px; }
.rs-sub { grid-column: 1 / -1; margin-top: 5px; font-size: 13px; color: var(--s-mute); font-variant-numeric: tabular-nums; }

/* How this was made, in the reading column. */
.dp-how { margin-top: 64px; padding-top: 34px; border-top: 1px dashed var(--s-line); }
.dp-how .prose { margin-top: 0; max-width: 680px; }
.dp-how .prose h2 { font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -.025em; }

/* Kabook's line */
.dp-kb { margin-top: 56px; padding: 28px 24px; border-radius: 22px; background: var(--s-soft); }
.dp-kb h2 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.dp-kb p { margin-top: 10px; max-width: 620px; font-size: 16.5px; line-height: 1.55; color: var(--s-lead); }
.dp-kb .stores { margin-top: 20px; --bh: 44px; }
.dp-gr { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.dp-gr a { color: var(--s-acc); text-underline-offset: 3px; }
@media (min-width: 760px) { .dp-kb { padding: 36px 40px; } }
.dp-upd { margin-top: 18px; font-size: 13px; color: var(--s-mute); }

/* The marks: the accent, the accent faint for the part not read, and a
   2 px gap of the page between them. */
.tb-bar .read, .rs-bar .read { fill: var(--s-acc); }
.tb-bar .want { fill: var(--s-acc); fill-opacity: .2; }
.tb-bar .gap { fill: var(--s-bg); }