/*
 * family-book.css: the book page, the Listen page and Download help, in the f2 design
 * (Claude Design final package 2026-09-29: 2-13, 2-13b..g, 2-14, 2-17, 2-18).
 *
 * Loaded after bde-f2.css and only by those three pages. Every rule starts from a bkp-
 * (book page), lsn- (listen) or dlh- (download help) root, so nothing here can reach another
 * page. A few legacy class names stay in the markup as hooks for tests and scripts (bk-title,
 * bk-prose, bk-actions__main, bk-listen, bk-cover, bk-rel, reader-note ...); the older
 * stylesheets still style those names, so the rules below set every property that matters
 * on them from a more specific selector.
 *
 * Colours are the f2 tokens (contrast measured in bde-f2.css). Bengali: taller lines, no
 * negative tracking and never upper case.
 */

/* ================================================================== book page */
.bkp { display: block; }
/* the design's main padding: 14 px on a phone, 24 px to 1099 px, 28 px from there; the footer
   sets the gap above itself */
.bkp-page { padding-top: 14px; padding-bottom: 0; }
@media (min-width: 768px) { .bkp-page { padding-top: 24px; } }
@media (min-width: 1100px) { .bkp-page { padding-top: 28px; } }

/* breadcrumb, as drawn: the separator follows its item, so a trail that wraps ends its first
   line on "/" and the title starts the next one */
.bkp .bkp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 100%; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; column-gap: 8px; }
.bkp .bkp-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bkp .bkp-crumbs li:not(:last-child)::after { content: "/"; color: var(--f2-muted); font-weight: 600; }
.bkp .bkp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--f2-muted); text-decoration: none; }
/* Home keeps a 44 px wide target without pushing its separator out: the target grows into
   the gap on both sides, so every separator sits the same distance from its words. */
.bkp .bkp-crumbs li:first-child a { position: relative; }
.bkp .bkp-crumbs li:first-child a::before { content: ""; position: absolute; inset: 0 -8px; min-width: 44px; }
.bkp .bkp-crumbs a:hover { color: var(--f2-coral); }
.bkp .bkp-crumbs [aria-current] { color: var(--f2-ink); font-weight: 600; overflow-wrap: anywhere; }
/* A long title stays on the trail's own line and folds inside it (at most two lines), so the
   trail never ends on a bare "/" with the title alone below it. */
.bkp .bkp-crumbs li:last-child { flex: 1 1 0; min-width: min(9em, 100%); }
.bkp .bkp-crumbs li:last-child [aria-current] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }

/* ------------------------------------------------------------------ hero */
/* A phone gets its first screen back (review 2026-10-02 B1): the cover beside the title, the
   facts as one line and Read online with Download beside it, all above the tab bar. From 768 px
   the f3 hero: the cover on the left, everything else in one column beside it. */
.bkp-hero {
  margin-top: 10px; padding: 16px; border-radius: 24px; background: var(--f2-coral-tint);
  display: grid; grid-template-columns: clamp(88px, 27vw, 118px) minmax(0, 1fr);
  grid-template-areas: "cover main" "facts facts" "actions actions";
  align-items: start; gap: 14px 16px; text-align: left;
}
.bkp .bkp-hero__cover {
  grid-area: cover; position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size;
  border-radius: 12px; background: var(--f2-loading); box-shadow: 0 16px 32px -14px rgba(80, 40, 25, .5);
}
.bkp .bkp-hero__cover img, .bkp .bkp-hero__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
.bkp .bkp-hero__cover > .cover-mark:not(.f2-house) { position: absolute; inset: 0; display: block; background: none; }
.bkp-hero__main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; }

.bkp-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 8px; }
.bkp .bkp-chip-subject {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--f2-r-pill);
  background: #fff; color: #B53A1C; font-size: 13px; font-weight: 700; text-decoration: none;
}
.bkp .bkp-chip-subject:hover { background: var(--f2-hover); color: var(--f2-coral-dark); }
.bkp .bkp-chip { min-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; }
/* The format chips sit on the hero's coral tint: the PDF chip's own tint vanished into it, so
   every chip there gets a white ground and keeps its own ink (review 2026-10-02). */
.bkp .bkp-hero .bkp-chip { background: #fff; box-shadow: inset 0 0 0 1px rgba(34, 26, 23, .08); }
@media (max-width: 767px) {
  /* On a phone the chips are one quiet row; the subject chip keeps a 44 px tap target. */
  .bkp .bkp-chip-subject { min-height: 32px; padding: 0 10px; font-size: 12.5px; position: relative; }
  .bkp .bkp-chip-subject::before { content: ""; position: absolute; inset: -6px 0; }
  .bkp .bkp-chip { min-height: 26px; padding: 0 7px; font-size: 11.5px; }
}

.bkp .bk-title {
  margin: 0; font-family: var(--f2-serif); font-size: clamp(26px, 4.4vw, 52px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.3px; color: var(--f2-ink); text-wrap: balance; overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto;
}
html.bn .bkp .bk-title, .bkp .bk-title:lang(bn) { font-family: var(--f2-serif); font-size: clamp(24px, 4vw, 46px); line-height: 1.35; letter-spacing: 0; }
/* A long title steps down (review 2026-10-02 B6): over 32, 64 and 110 characters. */
.bkp .bkp-hero__main--m .bk-title { font-size: clamp(23px, 3.6vw, 42px); }
.bkp .bkp-hero__main--l .bk-title { font-size: clamp(20px, 3vw, 34px); line-height: 1.15; }
.bkp .bkp-hero__main--xl .bk-title { font-size: clamp(18px, 2.5vw, 28px); line-height: 1.2; letter-spacing: 0; }
html.bn .bkp .bkp-hero__main--m .bk-title { font-size: clamp(21px, 3.4vw, 38px); }
html.bn .bkp .bkp-hero__main--l .bk-title { font-size: clamp(19px, 2.8vw, 32px); line-height: 1.4; }
html.bn .bkp .bkp-hero__main--xl .bk-title { font-size: clamp(17px, 2.4vw, 26px); line-height: 1.45; }
@media (max-width: 767px) {
  /* folded to five lines only when the page's script found it overflowing; the whole title is
     still the heading, and "Show full title" opens it */
  .bkp .bk-title.is-folded { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
.bkp .bkp-title-more {
  display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -8px; padding: 0; border: 0; background: none;
  color: var(--f2-coral-dark); font: 700 14px/1.2 var(--f2-ui); cursor: pointer;
}
.bkp .bkp-title-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.bkp .bkp-title-more:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 768px) { .bkp .bkp-title-more { display: none; } }
.bkp-second { margin: -2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--f2-muted); overflow-wrap: anywhere; }
.bkp .bkp-second--author { margin-top: -6px; font-size: 14px; font-weight: 400; }
.bkp-subtitle { margin: -2px 0 0; max-width: 46ch; font-family: var(--f2-serif); font-size: 18px; line-height: 1.35; color: var(--f2-sub); text-wrap: balance; }
.bkp-byline { margin: 0; font-size: 16px; line-height: normal; color: var(--f2-sub); }
@media (max-width: 767px) { .bkp-byline { margin-top: -4px; font-size: 15px; } .bkp-subtitle { font-size: 16px; } }
/* The name runs on from "by" / "d'" and wraps like text; its padding keeps a 44 px target. */
.bkp .bkp-byline a { display: inline; padding: 12px 0; font-weight: 700; color: var(--f2-coral-dark); text-decoration: none; }
.bkp-byline { line-height: 1.4; }
.bkp .bkp-byline a:hover { color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.bkp .bkp-byline b { font-weight: 700; color: var(--f2-ink); }
/* no file: one sentence under the byline with the way to ask for one (review 2026-10-02 B7) */
.bkp-nofile { margin: 2px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: var(--f2-sub); }
.bkp .bkp-nofile a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-weight: 700; color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.bkp .bkp-nofile a:hover { color: var(--f2-ink); }

/* facts: download count first, never an empty cell */
.bkp-facts { grid-area: facts; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; width: 100%; margin: 4px 0 0; }
.bkp-facts > div { box-sizing: border-box; min-width: 0; padding: 11px 14px; border-radius: 16px; background: rgba(255, 255, 255, .88); }
.bkp-facts dt { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--f2-muted); }
.bkp-facts dd { margin: 3px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--f2-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  /* one compact line on a phone: "Downloads 881   Pages 467   File size 2 MB" */
  /* spaced, not dotted: a wrapped line never starts on a stray separator */
  .bkp-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0; }
  .bkp-facts > div { display: inline-flex; align-items: baseline; gap: 5px; padding: 0; border-radius: 0; background: none; }
  .bkp-facts dt { font-size: 13.5px; font-weight: 400; color: var(--f2-sub); }
  .bkp-facts dd { margin: 0; font-size: 13.5px; }
}

/* actions: read and download full width on a phone, save and share side by side */
.bkp-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 0; }
.bkp .bkp-actions .f2-btn { width: 100%; min-height: 52px; height: auto; padding: 0 18px; border-radius: 16px; font-size: 15.5px; white-space: normal; text-align: center; line-height: 1.2; box-shadow: none; }
.bkp .bkp-actions .bkp-actions__wide { grid-column: 1 / -1; }
.bkp .bkp-actions .bk-actions__main { padding: 0 24px !important; font-size: 15.5px !important; box-shadow: none; }
.bkp .bkp-actions .f2-btn:not(.f2-btn--primary):hover { background: var(--f2-soft); border-color: var(--f2-field); color: var(--f2-ink); }
.bkp .bkp-actions .f2-btn:focus-visible, .bkp .bkp-restart:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 3px; }
@media (max-width: 767px) {
  /* Read online and Download side by side; Save and Share a quieter row under them */
  .bkp .bkp-actions--pair .bkp-actions__wide { grid-column: auto; padding: 0 12px !important; }
  .bkp .bkp-actions .bkp-actions__minor { min-height: 44px; border-radius: 14px; font-size: 14.5px; }
  .bkp .bkp-actions .bkp-actions__minor svg { width: 16px; height: 16px; }
}
/* a returning reader's "Continue: <chapter>" takes the whole first row with "Start from the
   beginning" right under it, then Download, then Save and Share */
.bkp .bkp-actions.is-resuming .bk-actions__main { grid-column: 1 / -1; order: 0; }
.bkp .bkp-actions.is-resuming .bkp-restart { order: 1; margin: -8px 0 -6px; }
.bkp .bkp-actions.is-resuming a[href="#download"] { grid-column: 1 / -1; order: 2; }
.bkp .bkp-actions.is-resuming .bkp-actions__minor { order: 3; }
/* Share where neither the share sheet nor the clipboard works: the link itself, selected, to copy. */
.bkp .bkp-actions .f2-sharebox { grid-column: 1 / -1; order: 4; display: grid; gap: 6px; }
.bkp .f2-sharebox label { font-size: 13.5px; font-weight: 600; color: var(--f2-body); }
.bkp .f2-sharebox input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--f2-field-strong, #9A847A); border-radius: 12px; background: #fff; color: var(--f2-ink); font: 500 14.5px/1.3 var(--f2-ui); }
.bkp .f2-sharebox input:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.bkp a.bkp-restart { cursor: pointer; }
.bkp .bkp-restart {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: -6px;
  color: var(--f2-sub); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--f2-field); text-underline-offset: 3px;
}
.bkp .bkp-restart[hidden] { display: none; }
.bkp .bkp-restart:hover { color: var(--f2-ink); text-decoration-color: currentColor; }

@media (min-width: 768px) {
  .bkp-hero {
    margin-top: 14px; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "cover main" "cover facts" "cover actions"; gap: 12px 36px; padding: 32px; border-radius: 28px;
  }
  .bkp .bkp-hero__cover { border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(80, 40, 25, .55); }
  .bkp-hero__main { gap: 12px; }
  /* facts stay tiles of one size, however few there are */
  .bkp-facts { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .bkp-actions { display: flex; flex-wrap: wrap; align-self: start; gap: 10px; margin-top: 6px; }
  .bkp .bkp-actions .f2-btn { width: auto; padding: 0 20px; white-space: nowrap; }
  .bkp .bkp-restart { flex-basis: 100%; margin-top: -4px; }
  .bkp .bkp-actions.is-resuming .bkp-restart { order: 4; margin: -4px 0 0; }
  .bkp .bkp-actions.is-resuming a[href="#download"], .bkp .bkp-actions.is-resuming .bk-actions__main { grid-column: auto; }
  .bkp .bkp-actions .f2-sharebox { flex: 1 0 100%; order: 5; max-width: 520px; }
}
@media (min-width: 1100px) {
  .bkp-hero { grid-template-columns: 240px minmax(0, 1fr); column-gap: 44px; padding: 40px; }
}

/* ------------------------------------------------------------------ body: two columns */
.bkp-body { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.bkp-col { display: contents; }
.bkp-listen { order: 0; }
.bkp-about { order: 1; }
.bkp-dl { order: 2; }
.bkp-infos { order: 3; }
.bkp .ad { order: 4; }
.bkp-toc { order: 5; }
.bkp-author { order: 6; }
.bkp-moreby { order: 7; }
.bkp-similar { order: 8; }
.bkp .reader-discussion { order: 9; }
.bkp-legal { order: 10; }
@media (min-width: 1100px) {
  .bkp-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 20px; }
  .bkp-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
}

/* shared panel look and headings */
.bkp .bkp-h2, .bkp .reader-discussion h2 {
  margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.1px; color: var(--f2-ink);
}
html.bn .bkp .bkp-h2, html.bn .bkp .reader-discussion h2 { letter-spacing: 0; line-height: 1.4; }
.bkp .bkp-h2:focus-visible, .bkp .reader-discussion h2:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 4px; border-radius: 6px; }
.bkp-dl, .bkp-infos, .bkp .reader-discussion {
  box-sizing: border-box; border-radius: var(--f2-r-card); background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.bkp .bkp-more {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none;
  color: var(--f2-coral); font: 700 15px/1.2 var(--f2-ui); text-decoration: none; cursor: pointer;
}
.bkp .bkp-more:hover { color: var(--f2-coral-dark); }

/* ------------------------------------------------------------------ listen panel */
.bkp-listen { border-radius: var(--f2-r-card); background: var(--f2-night); color: #fff; overflow: hidden; }
.bkp-listen__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.bkp .bkp-listen h2 { margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; color: #fff; }
.bkp-listen__meta { margin: 2px 0 0; font-size: 14px; color: var(--f2-night-text); }
.bkp-listen__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bkp .bkp-listen__acts .f2-btn { min-height: 46px; padding: 0 18px; border-radius: 14px; }
.bkp .bkp-listen__open { background: rgba(255, 255, 255, .12); color: #fff; }
.bkp .bkp-listen__open:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.bkp-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px; margin: 0; padding: 4px 12px 14px; list-style: none; }
.bkp-part { min-width: 0; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.bkp-part.is-playing { background: rgba(255, 255, 255, .14); }
.bkp-part__row { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.bkp .bkp-part h3 { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 14.5px/1.35 var(--f2-ui); color: #fff; overflow-wrap: anywhere; }
.bkp-part__len { flex: 0 0 auto; font-size: 13px; color: var(--f2-night-text); font-variant-numeric: tabular-nums; }
.bkp-part__play {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--f2-coral); color: #fff; cursor: pointer; position: relative;
}
/* a 44 px target around the 36 px circle */
.bkp-part__play::before { content: ""; position: absolute; inset: -4px; }
.bkp-part__play:hover { background: var(--f2-accent); }
.bkp-part__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bkp-part__icon { display: none; }
.bkp-part__play[aria-pressed="false"] .bkp-part__icon[data-icon="play"],
.bkp-part__play[aria-pressed="true"] .bkp-part__icon[data-icon="pause"] { display: grid; }
.bkp-part__play svg { width: 13px; height: 13px; }
.bkp-part audio { display: block; width: 100%; height: 40px; margin-top: 8px; color-scheme: dark; }
.bkp-listen.is-enhanced .bkp-part audio { display: none; }
.bkp .bkp-part__renew { margin-top: 8px; min-height: 40px; background: #fff; color: var(--f2-night); }
.bkp-part__status { margin: 0; font-size: 13px; line-height: 1.45; color: var(--f2-night-soft); }
.bkp-part__status:empty { display: none; }
.bkp-part__status:not(:empty) { margin-top: 6px; }
/* Three parts on a phone and twelve on a wider screen until "Show all N parts" (review
   2026-10-02 B2). Only once the page's script has taken over the players: without it the list
   stays whole. */
@media (max-width: 767px) {
  .bkp-listen.is-enhanced .bkp-parts.has-more-phone:not(.is-all) > li:nth-child(n+4) { display: none; }
}
@media (min-width: 768px) {
  .bkp-listen.is-enhanced .bkp-parts.has-more-wide:not(.is-all) > li:nth-child(n+13) { display: none; }
  .bkp .bkp-parts__all.is-phone-only { display: none; }
}
.bkp .bkp-parts__all {
  display: inline-flex; align-items: center; min-height: 44px; margin: -6px 12px 10px; padding: 0 8px; border: 0; border-radius: 12px;
  background: none; color: #fff; font: 700 14.5px/1.2 var(--f2-ui); cursor: pointer;
}
.bkp .bkp-parts__all[hidden] { display: none; }
.bkp .bkp-parts__all::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.bkp .bkp-parts__all:hover { background: rgba(255, 255, 255, .08); }
.bkp .bkp-parts__all:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bkp-listen__note { margin: 0; padding: 0 20px 18px; font-size: 13px; line-height: 1.5; color: var(--f2-night-text); }
.bkp .bkp-listen__browse a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-weight: 600; color: #fff; text-decoration: none; }
.bkp .bkp-listen__browse a:hover { text-decoration: underline; }
.bkp .bkp-listen__browse a:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; border-radius: 4px; }
/* The rights line and the stream note read as one short footnote, not two blocks. */
.bkp-listen__note:has(+ .bkp-listen__note) { padding-bottom: 6px; }

/* ------------------------------------------------------------------ about */
.bkp-desc { position: relative; }
.bkp .bk-prose, .bkp .bk-prose:not(:lang(bn)) {
  max-width: 68ch; font-family: var(--f2-read); font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--f2-body);
}
html.bn .bkp .bk-prose, .bkp .bk-prose:lang(bn) { font-size: 16.5px; line-height: 1.85; }
.bkp .bk-prose p { margin: 12px 0 0; text-wrap: pretty; }
/* The description's own headings and lists, as the live page prints them (the "বইটির তথ্য" and
   "উৎস ও অধিকার" sections on the Bengali Wikisource books): a small heading in the panel's
   heading face, one step under the panel's own, and a plain bulleted or numbered list. */
.bkp .bk-prose :is(h3, h4, h5, h6) { margin: 22px 0 0; font-family: var(--f2-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--f2-ink); }
html.bn .bkp .bk-prose :is(h3, h4, h5, h6) { line-height: 1.5; }
.bkp .bk-prose :is(ul, ol) { margin: 12px 0 0; padding-left: 1.3em; }
.bkp .bk-prose ul { list-style: disc; }
.bkp .bk-prose ol { list-style: decimal; }
.bkp .bk-prose li + li { margin-top: 4px; }
.bkp .bk-prose li::marker { color: var(--f2-sub); }
/* A source link kept in a description (the Wikisource line on Bengali books). */
.bkp .bk-prose a { color: var(--f2-ink); text-decoration: underline; text-decoration-color: var(--f2-field); text-underline-offset: 3px; overflow-wrap: anywhere; }
.bkp .bk-prose a:hover { color: var(--f2-coral-dark); text-decoration-color: currentColor; }
.bkp-more[data-bkp-more] { display: none; }
@media (max-width: 767px) {
  .bkp-desc.is-folded:not(.is-open) { max-height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .bkp .bkp-more[data-bkp-more] { display: inline-flex; }
}
.bkp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.bkp .bkp-tags a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--f2-line); border-radius: var(--f2-r-pill);
  background: var(--f2-soft); color: var(--f2-sub); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.bkp .bkp-tags a:hover { border-color: var(--f2-field); background: var(--f2-hover); color: var(--f2-ink); }

/* ------------------------------------------------------------------ lists: contents */
.bkp-list { margin: 8px 0 0; padding: 0; list-style: none; }
.bkp-list li { border-bottom: 1px solid var(--f2-line); }
.bkp .bkp-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; color: var(--f2-ink); font-size: 15.5px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.bkp .bkp-list a svg { flex: 0 0 auto; color: var(--f2-coral); }
.bkp .bkp-list a:hover { color: var(--f2-coral-dark); }

/* ------------------------------------------------------------------ about the author */
.bkp-author { display: flex; flex-direction: column; gap: 12px; }
.bkp-author__row { display: flex; align-items: flex-start; gap: 14px; }
.bkp .bkp-author img.f2-avatar { width: 52px; height: 52px; }
.bkp-author__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.bkp .bkp-author__name { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--f2-ink); text-decoration: none; }
.bkp .bkp-author__name:hover { color: var(--f2-coral-dark); }
.bkp-author__life { font-size: 13.5px; color: var(--f2-muted); }
.bkp-author__bio { margin: 4px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--f2-body); overflow-wrap: anywhere; }
.bkp .bkp-author__all { display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-coral); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.bkp .bkp-author__all:hover { color: var(--f2-coral-dark); }

/* ------------------------------------------------------------------ shelves inside the page */
.bkp-moreby { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bkp .bkp-moreby .bkp-shelf { margin: 0 calc(clamp(18px, 2.4vw, 28px) * -1); padding-inline: clamp(18px, 2.4vw, 28px); scroll-padding-inline: clamp(18px, 2.4vw, 28px); grid-auto-columns: 128px; }
.bkp .bkp-shelf .book-card.f2-card .book-title.f2-card__title { font-size: 15px; }
/* a series title often differs only at its end ("... Book 3"), so it may take three lines */
.bkp .bkp-moreby--series .book-card.f2-card .book-title.f2-card__title { -webkit-line-clamp: 3; line-clamp: 3; }
@media (min-width: 768px) {
  .bkp .bkp-moreby .bkp-shelf { margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 24px 16px; }
}
@media (min-width: 1100px) {
  .bkp .bkp-moreby .bkp-shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.bkp-similar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bkp .bkp-rel { position: relative; display: flex; flex-direction: column; color: var(--f2-ink); text-decoration: none; }
.bkp-rel__cover {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size;
  border-radius: var(--f2-r-cover); background: var(--f2-loading); box-shadow: var(--f2-shadow-cover);
  transition: transform .2s var(--f2-ease), box-shadow .2s var(--f2-ease);
}
.bkp-rel__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(34, 26, 23, .07); pointer-events: none; }
.bkp .bkp-rel__cover img, .bkp .bkp-rel__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
.bkp .bkp-rel .bk-rel__title, .bkp .bkp-rel .bk-rel__title:not(:lang(bn)) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px;
  font-family: var(--f2-serif); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--f2-ink);
}
.bkp .bkp-rel .bk-rel__title:lang(bn) { line-height: 1.5; }
.bkp-rel__author { margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--f2-muted); }
.bkp .bkp-rel:hover .bk-rel__title { color: var(--f2-coral-dark); }
.bkp .bkp-rel:focus-visible { outline: none; }
.bkp .bkp-rel:focus-visible .bkp-rel__cover { outline: 3px solid var(--f2-accent); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bkp .bkp-rel:hover .bkp-rel__cover { transform: translateY(-3px); box-shadow: var(--f2-shadow-cover-up); }
}

.bkp-legal { margin: 0; font-size: 14px; color: var(--f2-muted); }
.bkp .bkp-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-coral); font-weight: 700; text-decoration: none; }
.bkp .bkp-legal a:hover { color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ read or download */
.bkp-dl { overflow: hidden; }
.bkp-dl:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 3px; }
.bkp .bkp-dl__title { padding: 20px 20px 12px; }
.bkp-dl__pd { display: flex; align-items: flex-start; gap: 8px; margin: -4px 20px 12px; font-size: 13.5px; line-height: 1.5; color: var(--f2-success); }
.bkp-dl__pd svg { flex: 0 0 auto; margin-top: 2px; }
.bkp-dl__pd strong { font-weight: 700; }
.bkp-dl__read { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 14px; }
.bkp .bkp-dl__readbtn { min-height: 50px; border-radius: 14px; font-size: 15px; white-space: normal; text-align: center; }
.bkp .bkp-dl__pdfbtn { min-height: 44px; border: 1.5px solid var(--f2-field); border-radius: 14px; background: #fff; color: var(--f2-ink); font-size: 15px; white-space: normal; text-align: center; }
.bkp .bkp-dl__pdfbtn:hover { border-color: var(--f2-coral); color: var(--f2-ink); }
.bkp-dl__hint { font-size: 13px; line-height: 1.45; color: var(--f2-muted); text-align: center; }
.bkp-dl__note { margin: 0; padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: var(--f2-sub); }
.bkp-dl__rows { margin: 0; padding: 0; list-style: none; }
/* One row per file, as drawn: the format, what it is good for, the real stored size and the
   Download button on one line (flex 1 for the words, so they wrap, never the button). */
.bkp .bk-dl__row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--f2-line); }
.bkp .bkp-dl__fmt { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 32px; min-height: 0; padding: 0; border-radius: 10px; font-size: 12.5px; font-weight: 800; }
.bkp .bkp-dl__file { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--f2-muted); }
.bkp .bkp-dl__file b { font-size: 13.5px; font-weight: 700; color: var(--f2-ink); overflow-wrap: anywhere; }
.bkp .bkp-dl__meta { font-size: 13.5px; color: var(--f2-muted); }
.bkp .bk-dl__row .bk-dl__size { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--f2-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bkp .bk-dl__row .bkp-dl__go { flex: 0 0 auto; width: auto; min-height: 44px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
/* On a phone, and in the narrow desktop column, a row is the format, the file's own label, its
   size and the button on one line, with what the format is good for under the format badge
   (review 2026-10-02 B5): the note never squeezes the size or the button. */
@media (max-width: 767px), (min-width: 1100px) {
  .bkp .bk-dl__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "fmt label size go" "note note note note"; gap: 6px 12px; }
  .bkp .bkp-dl__fmt { grid-area: fmt; }
  .bkp .bkp-dl__file { display: contents; }
  .bkp .bkp-dl__file b { grid-area: label; align-self: center; }
  .bkp .bkp-dl__meta { grid-area: note; font-size: 13px; line-height: 1.4; }
  .bkp .bk-dl__row .bk-dl__size { grid-area: size; justify-self: end; }
  .bkp .bk-dl__row .bkp-dl__go { grid-area: go; }
}
.bkp-dl__help { margin: 0; padding: 12px 20px 0; border-top: 1px solid var(--f2-line); font-size: 13.5px; line-height: 1.5; color: var(--f2-sub); }
.bkp .bkp-dl__help a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -12px; color: var(--f2-coral-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bkp .bkp-dl__help a:hover { color: var(--f2-ink); }
.bkp .bkp-dl__help + .bkp-dl__foot { border-top: 0; padding-top: 4px; }
.bkp-dl__foot { padding: 12px 20px 16px; border-top: 1px solid var(--f2-line); font-size: 13.5px; }
.bkp .bkp-dl__foot a, .bkp .bkp-dl__request a { display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-coral); font-weight: 700; text-decoration: none; }
.bkp .bkp-dl__foot a:hover, .bkp .bkp-dl__request a:hover { color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.bkp .bkp-dl__note + .bkp-dl__request { margin-top: -14px; }

/* ------------------------------------------------------------------ book facts */
.bkp-infos { padding: 20px; }
.bkp-info { margin: 8px 0 0; }
/* One label column for every row, as wide as the longest label needs (at least 104 px), so a
   long German label ("Erstveröffentlichung") never runs into its value (review 2026-10-02). */
.bkp-info { display: grid; grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); column-gap: 12px; }
.bkp-info > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 11px 0; border-bottom: 1px solid var(--f2-line); font-size: 14.5px; line-height: normal; }
@supports not (grid-template-columns: subgrid) {
  .bkp-info > div { grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); column-gap: 12px; }
}
.bkp-info dt { max-width: 15ch; color: var(--f2-muted); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.bkp-info dd { margin: 0; font-weight: 700; color: var(--f2-ink); overflow-wrap: anywhere; }
.bkp .bkp-info dd a { color: var(--f2-ink); text-decoration: none; }
.bkp .bkp-info dd a:hover { color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.bkp-editions { margin-top: 16px; }
.bkp .bkp-editions h3 { margin: 0; font: 700 15px/1.3 var(--f2-display); color: var(--f2-ink); }
.bkp-editions .bkp-info + .bkp-info { margin-top: 12px; }

/* ------------------------------------------------------------------ the ad slot */
.bkp .ad { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.bkp .ad__label { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--f2-muted); }
html.bn .bkp .ad__label { letter-spacing: 0; text-transform: none; }
.bkp .ad__slot { width: 300px; max-width: 100%; min-height: 250px; margin: 0; }

/* ------------------------------------------------------------------ discussion */
.bkp .reader-discussion { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(18px, 2.6vw, 28px); }
.bkp .reader-discussion__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.bkp .reader-discussion__count { font-size: 14px; font-weight: 400; color: var(--f2-muted); }
.bkp .reader-discussion__empty { margin: 0; font-size: 15px; line-height: 1.6; color: var(--f2-sub); }
/* no comments yet: the heading, then one short line with the way in (review 2026-10-02 B4) */
.bkp .reader-discussion--empty { display: block; padding: 18px 20px; }
.bkp .reader-discussion--empty .reader-discussion__heading { margin-bottom: 4px; }
.bkp .reader-discussion--empty h2 { font-size: 18px; }
.bkp .reader-discussion--empty .reader-discussion__empty { display: inline; font-size: 14.5px; line-height: 1.6; }
.bkp .reader-discussion__join { display: inline; margin: 0 0 0 4px; font-size: 14.5px; line-height: 1.6; }
.bkp .reader-discussion__join a { color: var(--f2-coral-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; }
.bkp .reader-discussion__join a:hover { color: var(--f2-ink); }
.bkp .reader-discussion--empty .bkp-disc-form { margin-top: 12px; }
.bkp .reader-discussion__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bkp .reader-discussion__list[hidden] { display: none; }
.bkp .reader-discussion__list > li { padding: 0; border: 0; }
.bkp .bkp-note { display: flex; align-items: flex-start; gap: 12px; }
.bkp-note__av {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--f2-coral-tint); color: #B53A1C; font: 800 16px/1 var(--f2-ui);
}
.bkp .reader-note { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bkp .reader-note__meta { display: block; font-size: 14px; line-height: normal; color: var(--f2-ink); }
.bkp .reader-note__meta strong { font-weight: 700; color: var(--f2-ink); }
.bkp .reader-note__meta time { color: var(--f2-muted); }
.bkp .reader-note__meta time::before { content: "· "; }
.bkp .bkp-note__flag { display: inline-flex; align-items: center; min-height: 24px; margin-left: 6px; padding: 0 9px; border-radius: var(--f2-r-pill); background: var(--f2-warning-tint); color: var(--f2-warning); font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.bkp .reader-note__body, .bkp .reader-note__spoiler p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--f2-body); white-space: pre-line; overflow-wrap: anywhere; }
.bkp .reader-note__spoiler summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-coral); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.bkp .bkp-note__only { font-size: 13px; color: var(--f2-muted); }
.bkp .bkp-note__reply { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 -10px; color: var(--f2-coral); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.bkp .bkp-note__reply:hover { color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.bkp .reader-replies { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; padding-left: 14px; border-left: 2px solid var(--f2-line); }
.bkp .reader-replies h3 { margin: 0; font: 700 13px/1.3 var(--f2-ui); color: var(--f2-sub); }
.bkp .reader-replies ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bkp .bkp-note--reply { gap: 10px; }
.bkp .bkp-note--reply .bkp-note__av { width: 30px; height: 30px; background: var(--f2-hover); color: var(--f2-sub); font-size: 12.5px; }
.bkp .reader-note--reply { gap: 0; }
.bkp .reader-note--reply .reader-note__body, .bkp .reader-note--reply .reader-note__spoiler p { margin-top: 3px; font-size: 15px; }
.bkp .bkp-disc-pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bkp .bkp-disc-pages a { min-height: 44px; }
/* signed out (2-13e) */
.bkp .reader-discussion__account-note {
  display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; border: 1.5px solid var(--f2-line); border-radius: 18px; background: var(--f2-soft);
}
.bkp .reader-discussion__account-note p { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--f2-body); }
.bkp .reader-discussion__account-note p b { font-weight: 700; color: var(--f2-ink); }
.bkp-disc-join__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bkp .bkp-disc-join__acts .f2-btn { min-height: 48px; padding: 0 20px; border-radius: 14px; font-size: 16px; white-space: normal; text-align: center; }
/* the comment box, drawn after the page for a signed-in reader (2-13, 2-13f) */
.bkp .bkp-disc-form { display: flex; flex-direction: column; gap: 10px; }
.bkp .bkp-disc-form > label { font-size: 14px; font-weight: 700; color: var(--f2-sub); }
.bkp .bkp-disc-form textarea {
  box-sizing: border-box; width: 100%; min-height: 96px; padding: 12px 14px; border: 1.5px solid var(--f2-field-edge); border-radius: 14px;
  background: var(--f2-soft); color: var(--f2-ink); font: 400 16px/1.5 var(--f2-ui); resize: vertical;
}
.bkp .bkp-disc-form textarea::placeholder { color: var(--f2-muted); opacity: 1; }
.bkp .bkp-disc-form textarea:focus { outline: none; border-color: var(--f2-coral); box-shadow: 0 0 0 3px var(--f2-coral-tint); }
.bkp .bkp-disc-spoiler { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--f2-sub); cursor: pointer; }
.bkp .bkp-disc-spoiler input { width: 20px; height: 20px; accent-color: var(--f2-coral); }
.bkp .bkp-disc-replying { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 700; color: var(--f2-sub); }
.bkp .bkp-disc-replying[hidden] { display: none; }
.bkp .bkp-disc-replying button { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--f2-coral); font: 700 14px/1 var(--f2-ui); cursor: pointer; }
.bkp .bkp-disc-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bkp .bkp-disc-form__foot span { font-size: 13.5px; color: var(--f2-muted); }
.bkp .bkp-disc-submit { height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--f2-disabled); color: var(--f2-body); font: 700 16px/1 var(--f2-ui); cursor: not-allowed; }
.bkp .bkp-disc-submit.is-ready { background: var(--f2-coral); color: #fff; cursor: pointer; }
.bkp .bkp-disc-submit.is-ready:hover { background: var(--f2-coral-dark); }
.bkp .bkp-disc-submit:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bkp-rel__cover { transition: none; }
  .bkp .bkp-rel:hover .bkp-rel__cover { transform: none; }
}

/* ================================================================== listen page (2-17) */
.lsn { padding-top: 14px; padding-bottom: 0; }
@media (min-width: 768px) { .lsn { padding-top: 24px; } }
@media (min-width: 1100px) { .lsn { padding-top: 28px; } }
.lsn .lsn-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; column-gap: 8px; }
.lsn .lsn-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lsn .lsn-crumbs li + li::before { content: "/"; color: var(--f2-muted); }
.lsn .lsn-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--f2-muted); text-decoration: none; }
.lsn .lsn-crumbs a:hover { color: var(--f2-coral); }
.lsn .lsn-crumbs [aria-current] { color: var(--f2-ink); font-weight: 600; overflow-wrap: anywhere; }
.lsn-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
@media (min-width: 1100px) { .lsn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; } }

.lsn-stage {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; min-width: 0;
  padding: clamp(20px, 3.4vw, 36px); border-radius: 28px; background: var(--f2-night); color: #fff;
}
.lsn-top { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lsn .lsn-cover {
  position: relative; flex: 0 0 auto; width: 180px; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size;
  border-radius: 16px; background: var(--f2-night-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.lsn .lsn-cover img, .lsn .lsn-cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
.lsn .lsn-cover > .cover-mark:not(.f2-house) { position: absolute; inset: 0; display: block; background: none; }
.lsn-info { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.lsn-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--f2-r-pill); background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 700; }
.lsn .lsn-title { margin: 0; font-family: var(--f2-serif); font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: 0; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.lsn .lsn-title:lang(bn) { line-height: 1.4; letter-spacing: 0; }
.lsn-author { margin: 0; font-size: 15.5px; color: var(--f2-night-soft); }
.lsn .lsn-author a, .lsn .lsn-author b { color: #fff; font-weight: 700; text-decoration: none; }
.lsn .lsn-author a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .lsn-top { flex-direction: row; align-items: flex-end; gap: 32px; text-align: left; }
  .lsn .lsn-cover { width: 220px; }
  .lsn-info { align-items: flex-start; }
}

/* The deck: the native element until the transport script takes over, then one centred
   row of controls (previous part, back 15, play, forward 15, next part) under the scrubber,
   and a row of pills (speed, sleep timer, save, read instead). The transport's own wrappers
   step aside (display: contents) so its controls and the part links share those rows; while
   the transport is hidden, the links still stand on their own row. */
.lsn-deck { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px clamp(8px, 2vw, 18px); }
.lsn .lsn-deck > audio { order: 0; display: block; flex: 1 1 100%; width: 100%; height: 44px; color-scheme: dark; }
.lsn .lsn-deck .transport:not([hidden]), .lsn .lsn-deck .transport__row { display: contents; }
.lsn .lsn-deck .transport[hidden] { display: none !important; }
.lsn .transport__scrub { order: 1; flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "seek seek" "at end"; row-gap: 8px; margin-bottom: 10px; }
.lsn .transport__scrub .transport__seek { grid-area: seek; }
.lsn .transport__scrub [data-transport-elapsed] { grid-area: at; }
.lsn .transport__scrub [data-transport-duration] { grid-area: end; text-align: right; }
.lsn .transport__time { font-size: 13.5px; font-weight: 500; color: var(--f2-night-soft); font-variant-numeric: tabular-nums; }
.lsn .transport__seek { width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lsn .transport__seek::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.lsn .transport__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--f2-accent); box-shadow: 0 0 0 4px rgba(228, 83, 47, .25); }
.lsn .transport__seek::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.lsn .transport__seek::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--f2-accent); }
.lsn .transport__seek::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--f2-accent); }
.lsn .transport__seek:disabled { opacity: .5; cursor: default; }
.lsn .transport__seek:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 6px; }

.lsn .lsn-step--prev { order: 2; }
.lsn [data-transport-back] { order: 3; }
.lsn [data-transport-toggle] { order: 4; }
.lsn [data-transport-forward] { order: 5; }
.lsn .lsn-step--next { order: 6; }
.lsn .lsn-break { order: 7; flex: 1 1 100%; height: 0; }
.lsn .transport__row--quiet .transport__field { order: 8; }
.lsn .lsn-pill { order: 9; }
.lsn .lsn-renew { order: 10; }
.lsn .lsn-status { order: 11; flex: 1 1 100%; }

.lsn .lsn-step, .lsn .transport__skip {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font: 700 13.5px/1 var(--f2-ui); text-decoration: none; cursor: pointer;
}
.lsn .lsn-step:hover, .lsn .transport__skip:hover:not(:disabled) { background: rgba(255, 255, 255, .22); color: #fff; }
.lsn .transport__skip:disabled { opacity: .45; cursor: default; }
.lsn .lsn-step[aria-disabled="true"] { opacity: .3; }
.lsn .transport__skip svg { display: none; }
.lsn .transport__play {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 76px; height: 76px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--f2-coral); color: #fff; cursor: pointer; box-shadow: 0 18px 34px -12px rgba(228, 83, 47, .75);
}
.lsn .transport__play:hover { background: var(--f2-accent); }
.lsn .transport__play-icon { display: none; }
.lsn .transport__play[data-state="paused"] .transport__play-icon[data-icon="play"],
.lsn .transport__play[data-state="playing"] .transport__play-icon[data-icon="pause"],
.lsn .transport__play:not([data-state]) .transport__play-icon[data-icon="play"] { display: inline-flex; }
.lsn :is(.transport__play, .transport__skip, .lsn-step, .lsn-pill):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 350px) {
  .lsn-stage { padding: 20px 12px; }
  .lsn-deck { gap: 5px; }
  .lsn .lsn-step, .lsn .transport__skip { width: 44px; height: 44px; font-size: 12.5px; }
  .lsn .transport__play { width: 60px; height: 60px; margin: 0; }
}

/* speed and sleep timer: a pill holding its label and the select that shows the value */
.lsn .transport__field {
  display: inline-flex; align-items: center; min-height: 44px; padding-left: 18px; border-radius: var(--f2-r-pill);
  background: rgba(255, 255, 255, .12); color: #fff; font: 700 14.5px/1 var(--f2-ui);
}
.lsn .transport__field:hover { background: rgba(255, 255, 255, .2); }
.lsn .transport__field:focus-within { outline: 3px solid #fff; outline-offset: 2px; }
.lsn .transport__field label { color: #fff; font: inherit; cursor: pointer; white-space: nowrap; }
.lsn .transport__field select {
  min-height: 44px; margin: 0; padding: 0 34px 0 6px; border: 0; border-radius: var(--f2-r-pill); background-color: transparent;
  color: #fff; font: 700 14.5px/1 var(--f2-ui); cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.lsn .transport__field select:focus-visible { outline: none; }
.lsn .transport__field select option { color: var(--f2-ink); background: #fff; }
.lsn .transport [data-transport-sleep][data-slept="true"] { color: #FFD7CB; }
.lsn .lsn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0;
  border-radius: var(--f2-r-pill); background: rgba(255, 255, 255, .12); color: #fff; font: 700 14px/1.2 var(--f2-ui); text-decoration: none; cursor: pointer;
}
/* the transport's own selects stay in the page for its contract; the design's pills drive them */
.lsn .transport__row--quiet .transport__field { display: none; }
.lsn .lsn-pill:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.lsn .lsn-renew { min-height: 44px; background: #fff; color: var(--f2-night); }
.lsn-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--f2-night-soft); text-align: center; }
.lsn-status:empty { display: none; }
.lsn-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--f2-night-text); text-align: center; }
.lsn .lsn-now { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 6px; margin: 4px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: #fff; }
.lsn .lsn-now h2 { margin: 0; font: inherit; color: inherit; }
@media (min-width: 768px) { .lsn .lsn-now { justify-content: flex-start; } }

/* the parts list */
.lsn-parts { box-sizing: border-box; min-width: 0; padding: 18px 10px 12px; border-radius: var(--f2-r-card); background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
.lsn-parts__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 10px 8px; }
.lsn .lsn-parts h2 { margin: 0; font: 700 20px/1.25 var(--f2-display); color: var(--f2-ink); }
.lsn-parts__sum { font-size: 13.5px; color: var(--f2-muted); }
.lsn-parts ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lsn .lsn-parts ol a {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 10px; border-radius: 16px;
  color: var(--f2-ink); font-size: 14.5px; font-weight: 600; line-height: 1.35; text-decoration: none;
}
.lsn .lsn-parts ol a:hover { background: var(--f2-hover); }
.lsn .lsn-parts ol a[aria-current] { background: var(--f2-audio-tint); color: var(--f2-audio-ink); }
.lsn-parts__n { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--f2-hover); color: var(--f2-sub); font-size: 12.5px; font-weight: 700; }
.lsn .lsn-parts ol a[aria-current] .lsn-parts__n { background: var(--f2-audio); color: #fff; }
.lsn-parts__t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lsn-parts__d { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--f2-muted); font-variant-numeric: tabular-nums; }
.lsn .lsn-parts ol a[aria-current] .lsn-parts__d { color: var(--f2-audio-ink); }
.lsn-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* this browser's bookmarks (design "Your bookmarks") */
.lsn-marks { box-sizing: border-box; padding: 18px 20px; border-radius: var(--f2-r-card); background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
.lsn-marks[hidden] { display: none; }
.lsn .lsn-marks h2 { margin: 0 0 6px; font: 700 20px/1.25 var(--f2-display); color: var(--f2-ink); }
.lsn-marks ol { margin: 0; padding: 0; list-style: none; }
.lsn .lsn-marks a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--f2-line); color: var(--f2-audio-ink); font-weight: 700; text-decoration: none; }
.lsn .lsn-marks a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================== download help (2-18) */
.dlh { padding-top: 14px; padding-bottom: 0; }
@media (min-width: 768px) { .dlh { padding-top: 24px; } }
@media (min-width: 1100px) { .dlh { padding-top: 28px; } }
.dlh .dlh-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; column-gap: 8px; }
.dlh .dlh-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.dlh .dlh-crumbs li:not(:last-child)::after { content: "/"; color: var(--f2-muted); }
.dlh .dlh-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--f2-muted); text-decoration: none; }
.dlh .dlh-crumbs li:first-child a { min-width: 44px; }
.dlh .dlh-crumbs a:hover { color: var(--f2-coral); }
.dlh .dlh-crumbs [aria-current] { color: var(--f2-ink); font-weight: 600; }
.dlh-head { margin-top: 14px; max-width: 760px; }
.dlh .dlh-h1 { margin: 0; font-family: var(--f2-display); font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -1px; color: var(--f2-ink); text-wrap: balance; }
.dlh-lede { margin: 10px 0 0; font-size: clamp(15.5px, 1.4vw, 17px); line-height: 1.6; color: var(--f2-muted); text-wrap: pretty; }
.dlh-section { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.dlh-head + .dlh-section { margin-top: 28px; }
.dlh .dlh-h2 { margin: 0; font-family: var(--f2-display); font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; line-height: 1.25; color: var(--f2-ink); }
.dlh-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dlh-format { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 24px; background: #fff; box-shadow: var(--f2-shadow-card); }
.dlh .dlh-tag { display: inline-flex; align-items: center; align-self: flex-start; min-height: 30px; padding: 0 11px; border-radius: 9px; font-size: 13px; font-weight: 800; line-height: 1; }
.dlh-format p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--f2-body); }
.dlh-format .dlh-opens { font-size: 14px; line-height: normal; color: var(--f2-muted); }
.dlh-format .dlh-opens b { color: var(--f2-body); }
.dlh-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.dlh-device { padding: 20px; border-radius: 24px; background: #fff; box-shadow: var(--f2-shadow-card); }
.dlh .dlh-device h3 { margin: 0 0 12px; font: 700 17px/1.3 var(--f2-ui); color: var(--f2-ink); }
.dlh-device ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dlh-device li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--f2-body); }
.dlh-step { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--f2-coral-tint); color: #B53A1C; font-size: 13px; font-weight: 800; line-height: 1; }
.dlh-trouble { gap: 10px; max-width: 820px; }
.dlh-q { border-radius: 20px; background: #fff; box-shadow: var(--f2-shadow-card); }
.dlh-q summary { display: flex; align-items: center; min-height: 60px; padding: 14px 20px; box-sizing: border-box; font-size: 16px; font-weight: 700; color: var(--f2-ink); cursor: pointer; }
.dlh-q summary:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; border-radius: 20px; }
.dlh-q p { margin: 0; padding: 0 20px 18px; font-size: 15.5px; line-height: 1.65; color: var(--f2-body); }
.dlh-help { margin: 6px 0 0; font-size: 15px; color: var(--f2-sub); }
.dlh .dlh-help a { display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-coral); font-weight: 700; text-decoration: none; }
.dlh .dlh-help a:hover { color: var(--f2-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
html.bn .dlh .dlh-h1, html.bn .dlh .dlh-h2 { letter-spacing: 0; line-height: 1.4; }


/* More by the author (design 2-13 bk.more): a plain list of titles, each a 50 px row with a chevron. */
.bkp-morelist { margin: 8px 0 0; padding: 0; list-style: none; }
.bkp-morelist li { border-bottom: 1px solid #F3E3DC; }
.bkp-morelist a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px;
  font-family: var(--f2-serif); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--f2-ink); text-decoration: none;
}
.bkp-morelist a:lang(bn) { font-family: 'Noto Serif Bengali', var(--f2-serif); line-height: 1.5; }
.bkp-morelist a:hover { color: var(--f2-coral-dark); }
.bkp-morelist a svg { flex: 0 0 auto; color: var(--f2-coral); }
.bkp-moreby--author { gap: 0; }