/* Split 2026-09-25 (speed on phones): only the rules two or more page families share, or that
   must keep their place in the cascade, stay here. A rule only one family uses lives in that
   family's file, public/css/family-{home,book,lists,reader,pages}.css, which each page view
   pushes after this file (layouts/site @stack('family-css')). Add a new family-only rule there;
   a rule that must beat a rule here with the same specificity has to stay here, below it. */
/*
 * v3 page styles: the book page, lists and search, directories, the reader and the
 * listening page, and the root, legal and error frames. Folded 2026-09-23 from the
 * per-slice files (public/css/v3/{book,listings,directories,reader,root}.css), in the
 * order they loaded. Account pages do not load this; they load v3/account.css.
 */

/* ===================================================================== book */
/* v3 book page (pages/book, partials/bde-discussion, partials/facts). Owned by the book slice;
   merged into bde-v3-site.css at the end. Values are the handoff's (designs/Book Details and
   32 Mobile Book Details), through the tokens of bde-v3.css. Prefix bk- so nothing here
   touches another page; the handoff's own .book-hero, .facts and .dl-row rules are not used,
   because their !important phone rules fight this layout. */

.bk-page { padding-top: 16px; padding-bottom: 30px; }
.bk-crumbs li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.bk-crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; }
.bk-crumbs a:hover { color: var(--blue); }
.bk-crumbs [aria-current] { color: var(--sub); font-weight: 600; overflow-wrap: anywhere; }
.bk-hero__tools .btn { width: 100%; height: 34px; padding: 0 8px; white-space: normal; text-align: center; line-height: 1.15; }
.bk-cover img { width: 100%; height: 100%; object-fit: cover; }
.bk-cover__free { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 6px; background: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .6px; color: #fff; }

.bk-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.bk-subtitle { margin: 6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.4px; color: var(--muted); overflow-wrap: anywhere; }
.bk-byline a, .bk-byline b { font-weight: 700; }
.bk-facts dd { margin: 4px 0 0; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.bk-lede { margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: var(--body); text-wrap: pretty; max-width: 78ch; }
.bk-actions .btn-lg { padding: 0 22px; font-size: 13px; }
.bk-actions__main { padding: 0 24px !important; font-weight: 700; font-size: 13.5px !important; box-shadow: 0 10px 22px rgba(20, 120, 255, .28); }
.bk-listen { background: var(--audio); border-color: var(--audio); color: #fff; }
.bk-listen:hover { background: #6836B1; border-color: #6836B1; color: #fff; }
.bk-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-dl__file b { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dl__file span { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.bk-dl__go { justify-self: end; width: 140px; height: 36px; font-weight: 700; font-size: 12px; }
.bk-dl__foot a { font-weight: 600; }
.bk-dl__report:hover { color: #D8465F; }
.bk-audio__open { background: var(--audio); border-color: var(--audio); color: #fff; font-weight: 700; }
.bk-audio__open:hover { background: #6836B1; border-color: #6836B1; color: #fff; }
.bk-audio__side { padding: 20px 22px; border-right: 1px solid var(--line); background: #FBFAFF; }
.bk-audio__kicker { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--audio); }
.bk-audio__facts { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--body); }
.bk-audio__facts > div { display: flex; justify-content: space-between; gap: 12px; }
.bk-audio__facts dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
/* The renewal button catalog-audio.js reveals: a quiet control beside its player. */
.bk-track .btn[data-audio-renew] { margin-top: 8px; height: 36px; border-color: var(--audio-b); background: var(--audio-50); color: var(--audio); }

.bk-noaudio { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: #fff; border: 1px dashed #D9C8F5; border-radius: 16px; }
.bk-noaudio p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.bk-noaudio b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.bk-noaudio a { font-weight: 600; color: var(--audio); }
.bk-prose p { margin: 0 0 12px; text-wrap: pretty; }
.bk-empty p { margin: 0; }
.bk-about .facts__icon { color: var(--blue); display: flex; }
.bk-about .facts__n { font-size: 13px; font-weight: 800; color: var(--ink); }
.bk-about .facts__label { font-size: 10.5px; color: var(--muted); }
.bk-about .facts__note { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.bk-subjects .pill { height: auto; min-height: 28px; padding: 4px 11px; font-size: 11px; color: var(--sub); }
.bk-author__mark img { width: 100%; height: 100%; object-fit: cover; }
.bk-toc a { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid #F1F4F9; color: var(--ink); }
.bk-toc a:hover { background: var(--soft); color: var(--blue); }
.bk-more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.bk-info__note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.bk-side__note { margin: 4px 0 0; font-size: 10.5px; color: var(--muted); }
.bk-rel:hover { color: var(--blue); }
.bk-rel__cover img { width: 100%; height: 100%; object-fit: cover; }
.bk-open .tag { margin-top: 1px; }
.bk-legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); }
.bk-legal a:hover { color: var(--blue); }
.reader-discussion__heading p { margin: 4px 0 0; max-width: 62ch; font-size: 11.5px; line-height: 1.55; font-weight: 500; color: var(--muted); }
.reader-discussion__list > li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.reader-note__meta time, .reader-note__meta span { font-size: 11px; font-weight: 500; color: var(--muted); }
.reader-note__body, .reader-note__spoiler p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: #233A5E; white-space: pre-line; overflow-wrap: anywhere; }
.reader-note--reply .reader-note__meta strong { font-size: 12px; }
.reader-note--reply .reader-note__body { margin-top: 4px; font-size: 12.5px; line-height: 1.65; color: var(--body); }
.bk-discussion .catalog-pagination a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--field); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--sub); }
.reader-discussion__account-note .btn { flex: 0 0 auto; }
@media (max-width: 980px) {
  .bk-audio__side { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .bk-cover__free { top: 6px; left: 6px; padding: 3px 6px; font-size: 9px; }
  .bk-lede { display: none; }
  .bk-actions .btn { width: 100%; min-height: 44px; height: auto; white-space: normal; }
  .bk-hero__tools .btn { height: auto; min-height: 44px; font-size: 12px; }
  .bk-crumbs a { min-height: 44px; }
  .bk-dl__foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .bk-audio__side { padding: 16px; }
  .bk-noaudio { padding: 14px 16px; align-items: flex-start; }
  .bk-noaudio a { display: inline-flex; min-height: 44px; align-items: center; }
  .bk-legal a, .bk-more, .bk-stats a { min-height: 44px; display: inline-flex; align-items: center; }
  .bk-discussion .catalog-pagination a { min-height: 44px; }
  .reader-discussion__account-note .btn { width: 100%; min-height: 44px; height: auto; white-space: normal; }
}

/* Bengali: conjuncts need more line height, and the title's tight tracking is Latin's. */
html.bn .bk-title { line-height: 1.3; letter-spacing: 0; }
html.bn .bk-subtitle, html.bn .bk-facts dd, html.bn .bk-dl__file b, html.bn .bk-rel__title { line-height: 1.45; letter-spacing: 0; }
html.bn .bk-prose, html.bn .bk-lede { line-height: 1.85; }

/* ===================================================================== listings */
/* v3 listings pages: search, book lists, subject, audiobooks, and the two pagers.
   Owned by the listings slice; merged into bde-v3-site.css at the end. Values are the
   handoff's (books/index, partials/pagination, designs Browse, Category Page, Search
   Results, 28 No Search Results, 10 Popular Books, 04 Audiobooks Browse). */

.ls-page { padding-top: 22px; padding-bottom: 40px; }

/* Breadcrumb (design Category Page). */
.ls-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; font-size: 11px; font-weight: 500; color: var(--muted); }
.ls-crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; }
.ls-crumbs a:hover { color: var(--blue); }
.ls-crumbs [aria-current] { color: var(--sub); font-weight: 600; overflow-wrap: anywhere; }
.ls-banner__text { margin: 8px 0 0; max-width: 60ch; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.ls-banner__stats { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: var(--sub); }
.ls-banner__icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px rgba(11, 33, 77, .08); }
.ls-banner__art { flex: 0 0 auto; width: 330px; height: 150px; border-radius: 16px; background: url("/assets/v3/hero-books.webp") center / cover no-repeat; }
.ls-banner__art--sm { width: 236px; height: 118px; border-radius: 12px; }
.ls-banner__tile { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 30px; background: var(--audio-50); color: #8253D6; display: flex; align-items: center; justify-content: center; }
.ls-prose p { margin: 0 0 8px; }
.ls-prose p:last-child { margin-bottom: 0; }

/* The row under the banner: list tabs or narrower shelves, and the count. */
.ls-bar { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.ls-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ls-tabs .pill:hover { border-color: var(--blue); color: var(--blue); }
.ls-tabs__n { font-size: 10.5px; font-weight: 600; opacity: .75; }

/* Search box (design Search Results: blue ring; 28 No Search Results: the Search button). */
.ls-searchbox { display: flex; align-items: center; gap: 10px; max-width: 760px; height: 50px; padding: 0 5px 0 14px; border: 1.5px solid var(--blue); border-radius: 12px; background: #fff; box-shadow: 0 0 0 4px var(--blue-50); }
.ls-searchbox__mark { flex: 0 0 auto; }
.ls-searchbox input[type="search"] { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 14px var(--f2-ui, sans-serif); color: var(--ink); }
.ls-searchbox__clear { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--soft); color: var(--sub); display: flex; align-items: center; justify-content: center; }
.ls-searchbox__clear:hover { background: var(--blue-50); color: var(--ink); }
.ls-searchbox .searchbar__submit { height: 38px; flex: 0 0 auto; }
.ls-filter__group { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ls-filter__title { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.ls-filter__option:hover { background: var(--soft); color: var(--ink); }
.ls-filter__option[aria-current] { color: var(--ink); font-weight: 700; background: #F1F6FD; }
.ls-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.ls-chips__n { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.ls-empty__text { margin: 8px auto 0; max-width: 520px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.ls-empty__actions { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ls-tips li { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.6; color: var(--body); }
.ls-tips a { font-weight: 700; }

/* Pagers (handoff partials/pagination), shared with the author, series and index pages. */
.ls-pager { flex-wrap: wrap; }
.ls-pager a:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 980px) {
  .ls-banner__art { display: none; }
  .ls-filter__group { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-bottom: 0; border-bottom: 0; }
  .ls-filter__title { flex: 1 0 100%; margin: 0; font-size: 13px; }
  .ls-filter__option[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
}

@media (max-width: 560px) {
  .ls-page { padding-top: 16px; }
  .ls-banner__icon { width: 48px; height: 48px; border-radius: 14px; }
  .ls-banner__icon svg { width: 22px; height: 22px; }
  .ls-banner__tile { display: none; }
  .ls-searchbox .searchbar__submit { height: 40px; }
  .ls-empty__actions .btn { white-space: normal; height: auto; min-height: 44px; }
  /* Phone tap targets: 44px. */
  .ls-crumbs a { min-height: 44px; }
  .pagination a, .pagination span { min-width: 44px; height: 44px; }
  .ls-head .btn { height: 44px; white-space: normal; }
}

/* Phone: a long row of shelves or lists scrolls sideways inside itself instead of taking
   a screen of wrapped pills; the page itself never scrolls sideways. */
@media (max-width: 560px) {
  .ls-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; padding-bottom: 4px; scrollbar-width: none; }
  .ls-tabs > * { flex: 0 0 auto; }
  .ls-bar > * { max-width: 100%; }
}

/* ===================================================================== directories */
/* v3 directories pages. Owned by the directories slice; merged into bde-v3-site.css at the end.
   Subject, author and series directories and the author and series hubs (handoff
   directory/{categories,genres,authors,author,series}, designs 01, 02, 05 and 06).
   Every rule is scoped to .dir-page so no other page changes. Values follow the designs;
   colours reuse the handoff's tokens where one exists. */

.dir-page { padding-top: 24px; padding-bottom: 8px; }

/* Hero card (designs 01 and 02): a soft blue-to-peach band, the art on the right. */
.dir-page .dir-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 160px; padding: 30px 38px; border-radius: 22px; background: linear-gradient(110deg, #EEF8FF, #FFF4F1); overflow: hidden; }
.dir-page .dir-hero h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.8px; color: var(--ink); text-wrap: balance; }
.dir-page .dir-hero p { margin: 0; font-size: 15px; line-height: 1.55; color: #53698C; max-width: 620px; }
.dir-page .dir-hero .dir-hero__count { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--sub); }
/* Decoration only, so a background image: a directory never shows a fabricated cover. */
.dir-page .dir-hero__art { flex: 0 0 auto; width: 330px; height: 160px; margin: -8px -8px -8px 0; border-radius: 18px; background: url("/assets/v3/hero-books.webp") center / cover no-repeat; }
.dir-page .dir-head h2 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.dir-page .dir-head p { margin: 0; font-size: 14px; color: var(--muted); }
.dir-page .dir-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.dir-page .dir-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 125px; padding: 20px 14px; border-color: #E7EEF8; text-align: center; color: var(--ink); box-shadow: 0 8px 22px rgba(32, 74, 131, .04); min-width: 0; }
.dir-page .dir-tile:hover { border-color: #CFE0FA; color: var(--ink); }
.dir-page .dir-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 15px; background: #EAF2FF; color: #1466D6; }
.dir-page .dir-tile__name { max-width: 100%; font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dir-page .dir-tile__n { font-size: 12px; font-weight: 600; color: var(--muted); }
.dir-page [data-hue="navy"] { background: #EAF2FF; color: #1466D6; }
.dir-page [data-hue="teal"] { background: #E3F6F3; color: #0E8A7A; }
.dir-page [data-hue="magenta"] { background: #FCEAF3; color: #C23A7E; }
.dir-page [data-hue="gold"] { background: #FFF4E0; color: #B37700; }
.dir-page [data-hue="green"] { background: #E8F8EC; color: #2F8A3C; }
.dir-page [data-hue="plum"] { background: #F3ECFF; color: #7B45C9; }
.dir-page [data-hue="red"] { background: #FDECEE; color: #D0405A; }
.dir-page [data-hue="ember"] { background: #FDF0E6; color: #D0621E; }
.dir-page .dir-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid #E5EDF7; border-radius: 999px; background: #F5F8FC; color: #33496E; font-size: 13px; line-height: 1.3; max-width: 100%; }
.dir-page .dir-chips a:hover { border-color: #CFE0FA; background: #F1F6FD; color: var(--ink); }
.dir-page .dir-chips .rows__grow { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dir-page .dir-chips .rows__side { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dir-page .az__key { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--field); border-radius: 999px; background: #fff; color: var(--sub); font-size: 13px; font-weight: 600; }
.dir-page .az__key:hover { border-color: var(--blue); color: var(--blue); }
.dir-page .az__key--on, .dir-page .az__key--on:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.dir-page .dir-people > a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); min-width: 0; }
.dir-page .dir-people > a:hover { border-color: #CFE0FA; color: var(--ink); }
.dir-page .dir-people .rows__grow { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dir-page .dir-people .rows__side { flex: 0 0 auto; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--sub); }
.dir-page .dir-person__text b { font-size: 13.5px; overflow-wrap: anywhere; }
.dir-page .dir-person__text span { font-size: 11.5px; color: var(--muted); }
.dir-page .dir-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #DFEEFF, #F8EFE6); color: var(--blue); }

/* Breadcrumb (handoff: Home / Authors / name). */
.dir-page .dir-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dir-page .dir-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); }
.dir-page .dir-crumbs a:hover { color: var(--blue); }
.dir-page .dir-crumbs [aria-current] { font-weight: 600; color: var(--sub); overflow-wrap: anywhere; }
.dir-page .dir-portrait { flex: 0 0 auto; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #DFEEFF, #F8EFE6); color: var(--blue); }
.dir-page .dir-author h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.8px; color: var(--ink); overflow-wrap: anywhere; }
.dir-page .dir-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 13px; border: 1px solid #E5EDF7; border-radius: 999px; background: #F5F8FC; color: #4B6387; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.dir-page a.dir-chip { color: #33496E; font-weight: 600; }
.dir-page a.dir-chip:hover { border-color: #CFE0FA; background: #F1F6FD; color: var(--blue); }
.dir-page .dir-chip--on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.dir-page .dir-chip__n { font-size: 11px; font-weight: 600; color: var(--muted); }
.dir-page .dir-pd { margin: 0; max-width: 650px; padding: 10px 14px; border-radius: 10px; background: var(--green-50); color: #0B6E4C; font-size: 13px; line-height: 1.55; }
.dir-page .dir-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dir-page .dir-panel h2 { margin: 0 0 14px; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.4px; color: var(--ink); overflow-wrap: anywhere; }
.dir-page .dir-prose { font-size: 14px; line-height: 1.7; color: var(--body); max-width: 68ch; }
.dir-page .dir-prose p { margin: 0 0 12px; }

/* Series head (design 06): the navy band. */
.dir-page .dir-series-hero { margin-top: 14px; padding: 32px; border-radius: 20px; color: #fff; background: linear-gradient(110deg, #143965, #0B214D 55%, #203D6B); }
.dir-page .dir-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8CC1FF; }
.dir-page .dir-series-hero h1 { margin: 10px 0 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.7px; color: #fff; overflow-wrap: anywhere; }
.dir-page .dir-series-hero p { margin: 12px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.6; color: #E4EDFA; }
.dir-page .dir-series-hero .dir-series-hero__text { color: #C9D7EC; font-size: 14px; }
.dir-page .dir-order > a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid #EDF2F8; color: var(--ink); }
.dir-page .dir-order > a:last-child { border-bottom: 0; }
.dir-page .dir-order > a:hover { background: var(--soft); color: var(--ink); }
.dir-page .dir-order__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EEF6FF; color: var(--blue); font-size: 12px; font-weight: 700; }
.dir-page .dir-order__text b { font-size: 15px; overflow-wrap: anywhere; }
.dir-page .dir-order__text span { font-size: 13px; color: var(--muted); }
.dir-page .dir-order__audio { color: var(--audio); display: inline-flex; }
.dir-page .dir-series-list > a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); min-width: 0; }
.dir-page .dir-series-list > a:hover { border-color: #CFE0FA; color: var(--ink); }
.dir-page .dir-series-list__mark { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #EAF2FF; color: #1466D6; }
.dir-page .dir-series-list .rows__grow { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dir-page .dir-series-list .rows__side { font-size: 12px; color: var(--muted); }

/* Keyboard focus is always visible on every control here. */
.dir-page a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 980px) {
  .dir-page .dir-hero__art { width: 240px; height: 140px; }
}

/* Phone: 44px targets, smaller titles, the portrait above the name. */
@media (max-width: 560px) {
  .dir-page { padding-top: 16px; }
  .dir-page .dir-hero h1, .dir-page .dir-author h1 { font-size: 26px; letter-spacing: -.5px; }
  .dir-page .dir-series-hero { padding: 22px 18px; border-radius: 18px; }
  .dir-page .dir-series-hero h1 { font-size: 25px; }
  .dir-page .dir-head h2 { font-size: 21px; }
  .dir-page .dir-tile__icon { width: 42px; height: 42px; border-radius: 13px; }
  .dir-page .dir-tile__name { font-size: 12.5px; }
  .dir-page .dir-chips a, .dir-page a.dir-chip, .dir-page .az__key, .dir-page .dir-crumbs a { min-height: 44px; }
  .dir-page .dir-people > a, .dir-page .dir-series-list > a { min-height: 56px; padding: 8px 12px; }
}

/* ===================================================================== reader */
/* v3 reader pages. Owned by the reader slice; merged into bde-v3-site.css at the end.
   pages/read (handoff books/read, screens "Online Reader", "33 Mobile Reader") and
   pages/listen (handoff books/listen, screens "Audiobook Player", "34 Mobile Audiobook
   Player"). Values are the handoff's inline styles; the reader's colours are the CSS
   variables bde-v3.js writes on #reader (--r-bg, --r-paper, --r-ink, --r-body, --r-line,
   --r-sub, --r-size, --r-font), with the light theme as the fallback. */

/* A control that ships hidden stays hidden: .btn and .card set a display of their own, which
   would otherwise beat the hidden attribute and show a control before its script runs. */
.reader-v3 [hidden], .listen-v3 [hidden] { display: none !important; }
.reader-v3 .muted { color: var(--r-sub, var(--muted)); }
.reader-bar__in { padding-top: 12px; padding-bottom: 12px; }
.reader-bar__title:hover { color: var(--blue); }
.reader-aa { font-size: 13px !important; font-weight: 700; }
.reader-bar .btn[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.reader-panel .reader-panel__label { color: var(--muted); }

.reader-layout { padding-top: 24px; padding-bottom: 60px; grid-template-columns: 230px minmax(0, 1fr); }
.reader-toc__list a { display: block; padding: 8px 10px; border-radius: 7px; font-size: 12px; line-height: 1.4; color: var(--r-sub, #41567A); overflow-wrap: anywhere; }
.reader-toc__list a:hover { background: rgba(20, 120, 255, .08); color: var(--r-ink, #0B214D); }
.reader-toc__list a[aria-current] { background: #0F2444; color: #fff; font-weight: 600; }
.reader-mark { display: block; padding: 6px 8px; border-radius: 7px; font-size: 12px; color: var(--r-sub, #41567A); background: rgba(20, 120, 255, .06); overflow-wrap: anywhere; }
/* The chapter body is the book's own markup: give it room, never let it push the page wide. */
.reader-text > :first-child { margin-top: 0; }
.reader-text p { margin: 0 0 1em; }
.reader-text img, .reader-text svg { max-width: 100%; height: auto; }
.reader-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.reader-toc-toggle .muted { font-weight: 500; color: var(--muted); }
@media (max-width: 980px) {
  .reader-layout { padding-top: 16px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #contents:target, .reader-toc.open { display: flex !important; flex-direction: column; grid-template-columns: none; max-height: none; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .reader-v3 .btn, .reader-v3 .btn-sm { min-height: 44px; }
  .reader-v3 .btn-icon { width: 44px; }
  .reader-toc__list a { min-height: 44px; display: flex; align-items: center; font-size: 13px; }
}

/* ============================================================== listening page === */
.listen-v3 { padding-top: 30px; padding-bottom: 50px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; align-items: start; }
.listen-back:hover { color: var(--audio); }
.listen-cover img { width: 100%; height: 100%; object-fit: cover; }
.listen-title { margin: 20px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.6px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
p.listen-author { color: var(--sub); }
.transport__play:hover { background: #6A36B5; }
.transport__field:focus-within { border-color: var(--audio); box-shadow: 0 0 0 3px var(--audio-50); }
/* A sleep timer that has fired says so and offers nothing that would undo it: the reader
   starts again by pressing play. */
.transport__field:has([data-slept="true"]) { border-color: var(--audio); background: var(--audio-50); }
.listen-moves .btn:hover { border-color: var(--audio); color: var(--audio); }
.listen-chapters__list a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; font-size: 12.5px; font-weight: 500; color: var(--sub); }
.listen-chapters__list a:hover { background: var(--soft); color: var(--ink); }
.listen-chapters__list a[aria-current] { background: var(--audio-50); color: var(--audio); font-weight: 600; }
.listen-chapters__list a[aria-current] .listen-chapters__n { background: var(--audio); color: #fff; }

@media (max-width: 980px) {
  .listen-v3 { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
}
@media (max-width: 560px) {
  .listen-moves .btn { min-height: 44px; flex: 1 1 140px; }
}
.root-hero__grid { padding-top: 44px; padding-bottom: 34px; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: center; }

/* The search across every catalogue, and its explicit language choice. */
.root-search { margin-top: 22px; max-width: 520px; }
.root-searchbar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 5px 0 14px; background: #fff; border: 1px solid var(--field); border-radius: 11px; }
.root-searchbar:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.root-searchbar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 13.5px var(--f2-ui, sans-serif); color: var(--ink); }
.root-searchbar input::placeholder { color: var(--muted); opacity: 1; }
.root-searchbar .btn { height: 38px; flex: 0 0 auto; }
.root-language { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.root-language label { font-size: 12px; font-weight: 700; color: var(--sub); }
.root-language .select { height: 38px; min-width: 0; max-width: 100%; }
.root-hero .hero-facts { margin-top: 18px; }

/* ------------------------------------------------------- the six catalogues */
.root-doors { border-radius: 14px; }
.root-library__mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--field); font-size: 11.5px; font-weight: 800; letter-spacing: .4px; color: var(--blue); }

/* ------------------------------------------------------------ plain facts */
.root-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.root-fact { border-radius: 16px; box-shadow: 0 8px 22px rgba(32, 74, 131, .04); display: flex; flex-direction: column; align-items: flex-start; }
.root-fact__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.root-fact p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--body); }
.root-fact .section-link { margin-top: 8px; }

/* ------------------------------------------------------------ root search */
.root-results { padding-top: 22px; }
.root-crumbs a { color: var(--sub); font-weight: 500; }
.root-search--page { max-width: 640px; margin-top: 16px; }
.root-empty__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: #EEF6FF; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.trust-hero h1 { margin: 6px 0 8px; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; overflow-wrap: anywhere; }
.trust-hero p { margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.65; color: var(--body); }
.trust-content h2 { margin: 30px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); }
.trust-content h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.trust-content p { margin: 12px 0 0; }
.trust-content :is(ul, ol) { margin: 12px 0 0; padding-left: 1.3em; }
.trust-content a { text-decoration: underline; text-underline-offset: 3px; }
.trust-content table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.trust-content :is(th, td) { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.trust-nav a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--sub); }
.trust-nav a:hover { background: var(--soft); color: var(--ink); }
.trust-nav a[aria-current="page"] { background: #F1F6FD; color: var(--blue); font-weight: 700; }
.publish-steps li { padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: #fff; }
.proposal-intro .notice p { margin: 4px 0 0; color: inherit; }
.form-field .field-label span { font-weight: 500; color: var(--muted); }
.form-field .input { height: 44px; font-size: 13px; }
.proposal-consents input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--blue); }
.article-page .prose :is(h2, h3, h4) { margin: 28px 0 8px; color: var(--ink); letter-spacing: -.3px; line-height: 1.3; }
.article-page .prose h2 { font-size: 20px; }
.article-page .prose h3 { font-size: 16.5px; }
.article-page .prose p { margin: 12px 0 0; }
.article-page .prose :is(ul, ol) { margin: 12px 0 0; padding-left: 1.3em; }
.article-page .prose a { text-decoration: underline; text-underline-offset: 3px; }
.article-page .prose img { height: auto; margin: 16px 0; border-radius: 12px; }
.article-page .prose blockquote { margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--border); background: var(--soft); border-radius: 10px; }
.article-page .prose table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.article-page .prose :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }

/* --------------------------------------------- download help (/{code}/book-download/) */
.devices { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
@media (max-width: 980px) {
  .root-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .root-hero__grid { padding-top: 28px; padding-bottom: 24px; }
  .root-searchbar { height: 52px; }
  .root-searchbar .btn { height: 44px; padding: 0 14px; }
  .root-language .select { height: 44px; flex: 1 1 200px; }
  .trust-nav a { min-height: 44px; }
  .form-actions .btn { width: 100%; height: 44px; }
  .root-band .btn { width: 100%; height: 44px; }
  /* Phone tap targets: chips and section links at least 44px tall. */
  .root-chips a, .root-results .section-link, .root-hero ~ .container .section-link, .root-fact .section-link { min-height: 44px; }
}

/* ===================================================================== handoff r2 */
/* r2's img[width][height]{height:auto} (0,2,1) outranks these single-class image boxes;
   an image with a recorded size still fills its box. */
.bk-cover img[width][height], .bk-author__mark img[width][height], .bk-rel__cover img[width][height],
.listen-cover img[width][height] { height: 100%; }
.bk-dl__empty .bk-dl__note strong { font-size: 13.5px; color: var(--ink); }

/* ============================================ book, listen, reader: audit fixes 2026-09-24 */
/* Contrast at least 4.5:1: white on the FREE ribbon (was 4.36:1 on #0E8A5F), and the blue
   text of the author mark and the discussion count on their pale blue (was 4.49:1). */
.bk-cover__free { background: #0B7A54; }
/* Long German and French words hyphenate in the page's own language (the article and the
   h1 carry lang) instead of splitting anywhere; a word that still cannot fit may break. */
.bk-title, .bk-subtitle, .listen-title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
html.bn :is(.bk-title, .bk-subtitle, .listen-title) { -webkit-hyphens: manual; hyphens: manual; }

@media (max-width: 640px) {
  /* Phone tap targets, 44px tall: the byline author, the Subject fact, "All N books". */
  .bk-byline a, .bk-facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* r5 --------------------------------------------------------------------------------- */
/* r5-1 (06, 07, 11, 12, 13, 15, 24 phone): the 44px tap box made short crumbs like "Home"
   leave a wide gap before the "/". Centre the text in its box so the gaps are even; the
   first crumb shifts back to line up with the page edge. The tap box stays 44 by 44. */
@media (max-width: 760px) {
  .bk-crumbs ol li a, .ls-crumbs a:not(.r5-none) { justify-content: center; }
  .bk-crumbs ol li:first-child a, .ls-crumbs > a:first-child:not(.r5-none) { margin-left: -8px; }
}
/* r5-5 (11, 13, 14, 15, 16): the list banners cropped the stacked-books art ("A Kinder World"
   was cut off). The picture now keeps its own shape at the same height, so it shows whole
   and the banner does not grow. */
.ls-banner__art, .dir-page .dir-hero__art { width: auto; aspect-ratio: 963 / 655; background-size: contain; }
/* r5-6 (22): five device cards left "Computer" alone on a second row. They now share one row
   on a desktop and stay one per row on a phone. */
.devices { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Craft pass 2026-09-24: home, root and list pages. See bdebooks/design/CRAFT-DIRECTION-2026-09-24.md. */

/* ---- Language home hero: flat, heading + one sentence + search, real covers on desktop ---- */
.ch-hero { background: var(--soft); border-bottom: 1px solid var(--line); }
.ch-hero__grid { display: grid; grid-template-columns: minmax(0, 560px); gap: 48px; align-items: center; padding-top: 44px; padding-bottom: 36px; }
.ch-hero__grid--covers { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.ch-hero__title { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -1.4px; text-wrap: balance; }
.ch-hero__lede { margin: 12px 0 0; max-width: 60ch; text-wrap: pretty; font-size: 15px; line-height: 1.6; color: var(--body); }
.ch-hero__search { margin-top: 22px; max-width: 460px; height: 46px; padding: 0 5px 0 14px; background: #fff; border: 1px solid var(--field); border-radius: 11px; }
.ch-hero__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ch-hero__search .btn { height: 36px; }

.ch-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 116px)); gap: 14px; justify-content: end; align-items: end; }
.ch-covers li { min-width: 0; }
.ch-covers__book { display: block; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: #EEF2F8; box-shadow: 0 1px 2px rgba(11, 33, 77, .14); }
.ch-covers__book picture { display: block; width: 100%; height: 100%; }
.ch-covers__book img, .ch-covers__book img[width][height] { width: 100%; height: 100%; object-fit: cover; }
.ch-covers__book:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 980px) {
  .ch-hero__grid--covers { grid-template-columns: minmax(0, 1fr); }
  .ch-covers { display: none; }
}
@media (max-width: 560px) {
  .ch-hero__grid { padding-top: 24px; padding-bottom: 22px; }
  .ch-hero__search { margin-top: 16px; }
}

/* ---- Shelf and section headings ---- */
.ch-head { align-items: baseline; }
.ch-h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.2px; }

/* ---- Subject tiles: the name and its count, as text (craft rule 2) ---- */
.ch-subjects { margin-top: 30px; }
.ch-tiles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ch-tiles li { min-width: 0; }
.ch-tile:hover { border-color: #CFE0FA; background: var(--soft); color: var(--blue-h); }
html.bn .ch-tile { font-size: 14.5px; }
html.bn .ch-tile__n { font-size: 13px; }
@media (max-width: 560px) {
  .ch-subjects { margin-top: 22px; }
  .ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Authors and series on the home: names with real counts, read as a list ---- */
.ch-names { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 24px; }
.ch-names li { min-width: 0; border-top: 1px solid var(--border); }
.ch-names a { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 52px; padding: 8px 0; color: var(--ink); }
.ch-names a:hover .ch-names__name { color: var(--blue-h); }
.ch-names__name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-names__n { font-size: 12px; color: var(--muted); }
html.bn .ch-names__name { font-size: 15px; }
html.bn .ch-names__n { font-size: 13px; }
@media (max-width: 560px) {
  .ch-names { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
.rh-facts__list a { font-weight: 600; white-space: nowrap; }
.ls-banner.ch-flat .ls-banner__title { font-size: 34px; letter-spacing: -.8px; text-wrap: balance; }
.ls-banner.ch-flat .ls-banner__text { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.ls-banner.ch-flat .ls-banner__facts { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--sub); }
/* Audiobook totals are a line of text, not a row of big numbers. */
.ls-banner.ch-flat .ls-banner__stats { margin-top: 8px; gap: 4px 18px; font-size: 13.5px; font-weight: 600; color: var(--sub); }
.ls-banner.ch-flat .ls-banner__stats b { font-size: inherit; font-weight: inherit; letter-spacing: 0; color: inherit; margin-right: 0; }
.dir-page .dir-head h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.dir-page .dir-tile.ch-tile { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; box-shadow: none; text-align: left; color: var(--ink); }

/* Series and author rows: the name and the count, no mark. */
.dir-page .dir-series-list > a { min-height: 56px; }

@media (max-width: 560px) {
  .ls-banner.ch-flat .ls-banner__title, .dir-page .dir-hero.ch-flat h1 { font-size: 27px; letter-spacing: -.5px; }
}

/* Bengali guard for every serif rule above: the serif has no Bengali letters, and these rules
   outrank the site-wide :where() guard, so Bengali headings take the f3 heading stack here. */
.ch-h2:lang(bn), .dir-page .dir-head h2:lang(bn) { font-family: var(--f2-display, 'Hind Siliguri', ui-sans-serif, system-ui, sans-serif); letter-spacing: 0; }

/* Craft pass 2026-09-24: book page and book cards. See bdebooks/design/CRAFT-DIRECTION-2026-09-24.md. */

/* ===================================================================== book card (rule 12) */
/* A quiet card: cover, title, author, one neutral line. No button: the title's link is
   stretched over the card (bde-v3-site.css), so a tap anywhere opens the book. */
.book-card { box-shadow: none; }
.book-card:hover { border-color: #CFDDF2; }
.book-card:hover .book-title { color: var(--blue-h); }

/* The title in the book serif, two lines at most, and always two lines of room, so every
   card in a row keeps its author and format line on the same baseline. (Before: 12.5px Inter
   on one line, cutting most titles off with an ellipsis.) */
.book-card .book-title {
  margin-top: 10px;
  font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: 0;
  white-space: normal; text-overflow: clip; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  min-height: 2.6em;
}
.book-card .book-title:not(:lang(bn)) { font-family: var(--serif); }
.book-card .book-author { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* One neutral line of formats: "PDF · EPUB", audio the one accent (headphones, purple).
   Every entry carries its dot in a fixed 13px box; the line is shifted 13px left and that
   strip clipped, so the dot that starts any line (the first, or one after a wrap on a narrow
   phone) is never seen. */
.book-card .book-card__meta {
  margin-top: 6px; margin-left: -13px; clip-path: inset(0 0 0 13px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; overflow: visible;
}
.book-card .book-card__meta .tag {
  height: auto; padding: 0; border-radius: 0; background: none;
  font-size: 11.5px; font-weight: 500; letter-spacing: .2px; line-height: 1.4; color: var(--muted);
}
.book-card .book-card__meta .tag::before { content: "·"; flex: 0 0 13px; width: 13px; text-align: center; color: #8FA0BB; font-weight: 500; }
.book-card .book-card__meta .tag-audio { gap: 4px; color: var(--audio); font-weight: 600; letter-spacing: 0; }
.book-card .book-card__meta .tag-audio::before { margin-right: -4px; }
.book-card .book-card__meta .tag-audio svg { flex: 0 0 auto; }
/* Phones keep the line (bde-v3-site.css hid the old coloured tags under 560px). */
.grid-books .book-card__meta { display: flex; }

/* Bengali: Anek Bangla (the guard in bde-v3-site.css), its own line height for the vowel
   signs, and two lines of that height reserved. */
html.bn .book-card .book-title { font-size: 14.5px; line-height: 1.6; min-height: 3.2em; }
html.bn .book-card .book-author { font-size: 12.5px; line-height: 1.5; }

@media (max-width: 560px) {
  .book-card .book-title { font-size: 14.5px; }
  /* "PDF · EPUB · MOBI" fits one line of a 320px phone's two-up card (121px inside). */
  .book-card .book-card__meta { margin-left: -11px; clip-path: inset(0 0 0 11px); }
  .book-card .book-card__meta .tag { font-size: 11px; letter-spacing: 0; }
  .book-card .book-card__meta .tag::before { flex-basis: 11px; width: 11px; }
  html.bn .book-card .book-title { font-size: 14px; }
}
.bk-title:not(:lang(bn)) { font-family: var(--serif); font-weight: 600; }
html.bn .bk-title { font-size: 34px; line-height: 1.3; }
.bk-subtitle:not(:lang(bn)) { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--sub); }

/* The synopsis, once, as reading text (rule 9, 11): the serif at a reading size and measure. */
.bk-prose:not(:lang(bn)) { font-family: var(--serif); font-weight: 400; font-size: 17.5px; line-height: 1.6; color: #22385C; max-width: 65ch; }
html.bn .bk-prose { font-size: 16px; line-height: 1.85; color: #22385C; max-width: 65ch; }

/* "More by": a shelf heading, set like the other shelves (craft-home.css), Latin only. */
.bk-page .section-head .h2:not(:lang(bn)) { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.2px; }

/* "Books like this one": the titles in the book serif and the formats as the cards' plain line. */
.bk-rel__title:not(:lang(bn)) { font-family: var(--serif); font-weight: 600; font-size: 14px; }
.bk-rel__tags .tag { height: auto; padding: 0; border-radius: 0; background: none; font-size: 11px; font-weight: 500; letter-spacing: .2px; color: var(--muted); }
.bk-rel__tags .tag + .tag::before { content: "·"; margin: 0 5px; color: #8FA0BB; }

@media (max-width: 640px) {
  html.bn .bk-title { font-size: clamp(21px, 6.4vw, 26px); }
  .bk-subtitle:not(:lang(bn)) { font-size: 17px; }
}

/* ===================================================================== author page */
/* The count is one fact in the facts row, not a filled blue pill that reads as a selected tab. */
.dir-page .dir-author .dir-chip--on { background: #F5F8FC; border-color: #E5EDF7; color: var(--sub); font-weight: 600; }
/* The name in the book serif for Latin catalogues; Bengali keeps Anek Bangla. */
.dir-page .dir-author h1 { letter-spacing: 0; }
.dir-page .dir-author h1:not(:lang(bn)) { font-family: var(--serif); font-weight: 600; font-size: 38px; }
/* The list heading: craft-home.css sets .dir-head h2 in the serif and outranks the Bengali
   guard, so a Bengali "বই" fell to a system font. The f3 heading stack here, as everywhere in /bn/. */
#dir-author-books:lang(bn) { font-family: var(--f2-display, 'Hind Siliguri', ui-sans-serif, system-ui, sans-serif); letter-spacing: 0; }
@media (max-width: 640px) {
  .dir-page .dir-author h1:not(:lang(bn)) { font-size: 30px; }
}

/* ===================================================================== series page */
/* A plain header like the author's (rules 1, 3, 5): no navy gradient band, no kicker. */
.dir-page .dir-series-hero { margin-top: 6px; padding: 18px 0 6px; border-radius: 0; background: none; color: var(--ink); }
.dir-page .dir-series-hero h1 { margin: 0; color: var(--ink); letter-spacing: 0; }
.dir-page .dir-series-hero h1:not(:lang(bn)) { font-family: var(--serif); font-weight: 600; font-size: 38px; }
.dir-page .dir-series-hero .dir-series-hero__text { color: var(--body); }
@media (max-width: 640px) {
  .dir-page .dir-series-hero h1:not(:lang(bn)) { font-size: 30px; }
}

/* Card follow-up (my review of the craft pass): the reserved second title line sat between a
   one-line title and its author, a visible gap. The author now follows its title directly and
   the format line is pushed to the card's foot, so rows still end on one baseline. */
.book-card .book-title, html.bn .book-card .book-title { min-height: 0; }
.book-card .book-card__meta { margin-top: auto; padding-top: 6px; }