/* Generated by tools/build-rtl-css.mjs from public/css/family-book.css: never edit by hand. */
/*
 * 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; }
/* Every crumb keeps a 44 px wide target without pushing its separator out (bde-f2.css
   .f2-crumbs a::before): the target grows into the gap on both sides, so every separator sits
   the same distance from its words. */
.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; }
/* The trail keeps the shape it was first drawn in (partials/f2/crumbs-hold, full audit 2026-10-20):
   on a Bengali phone the Bengali font arrives after the first paint and is wider, so the title used
   to drop to a line of its own and push the page down. Beside the trail it stays beside it (and
   folds inside its own two lines); on its own line it keeps the number of lines it had. */
@media (max-width: 767px) {
  .bkp .bkp-crumbs.is-inline ol { flex-wrap: nowrap; }
  .bkp .bkp-crumbs.is-inline li:last-child { min-width: 0; }
  .bkp .bkp-crumbs.is-stacked li:last-child { flex-basis: 100%; }
  .bkp .bkp-crumbs.is-stacked li:last-child [aria-current] { -webkit-line-clamp: var(--crumb-lines, 2); min-height: calc(var(--crumb-lines, 2) * 1.4em); }
}

/* ------------------------------------------------------------------ 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: right;
}
.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, .bkp .bkp-nofile button { 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, .bkp .bkp-nofile button: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; }
  /* the height it was first drawn at (pages/book.blade.php, full audit 2026-10-20) */
  .bkp-facts { min-height: var(--bkp-facts-h, 0); }
}

/* 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-opening { order: 1; }
.bkp-toc { order: 5; }
.bkp-cite { 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; }
/* The parts are drawn as the page's script will leave them from the first paint: the head marks
   <html class="js"> before anything is drawn, so the players and the folded parts are hidden and
   the play buttons, "Play from the start" and "Show all N parts" hold their places before the
   script at the end of the page wires them. Folding after the first paint moved everything below
   the panel (SEO audit 2026-10-06: desktop CLS 0.15 and 0.53 on The Great Gatsby). Without
   script, or when the script finds players it cannot drive (.is-plain), the list stays whole
   with every native player. */
.bkp-listen.is-enhanced .bkp-part audio,
.js .bkp-listen:not(.is-plain) .bkp-part audio { display: none; }
.js .bkp-listen:not(.is-plain):not(.is-enhanced) .bkp-part__play[hidden] { display: grid !important; }
.js .bkp-listen:not(.is-plain):not(.is-enhanced) .bkp-listen__start[hidden] { display: inline-flex !important; }
.js .bkp-listen:not(.is-plain):not(.is-enhanced) .bkp-parts__all[hidden]:not(.is-phone-only) { display: inline-flex !important; }
@media (max-width: 767px) {
  .js .bkp-listen:not(.is-plain):not(.is-enhanced) .bkp-parts__all.is-phone-only[hidden] { display: inline-flex !important; }
}
.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),
  .js .bkp-listen:not(.is-plain) .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),
  .js .bkp-listen:not(.is-plain) .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-right: 10px; border-left: 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 { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-weight: 600; color: #fff; text-decoration: none; }
/* The line stays 24 px as drawn; an invisible layer centred on it is the 44 px tap area (UI audit
   2026-10-04). It reaches into the note's own padding, nothing else there is a link. */
.bkp .bkp-listen__browse a::before { content: ""; position: absolute; right: 0; left: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.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; }

/* ------------------------------------------------- opening pages and cite */
/* Index-hold pilot only (arms B and C, C for cite): the panels the About and Contents use, the
   book's own text in the reading face, the citations as a quiet list a reader can select and copy. */
.bkp-opening__text p:first-child { margin-top: 10px; }
.bkp-cite__list { margin: 8px 0 0; padding: 0; }
.bkp-cite__list > div { padding: 10px 0; border-bottom: 1px solid var(--f2-line); }
.bkp-cite__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bkp-cite__list dt { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--f2-sub); }
.bkp-cite__list dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--f2-body); overflow-wrap: anywhere; user-select: text; }

/* ------------------------------------------------------------------ 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-right: 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 button { box-sizing: border-box; width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.bkp .bkp-list a, .bkp .bkp-list button { 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, .bkp .bkp-list button svg { flex: 0 0 auto; color: var(--f2-coral); }
.bkp .bkp-list a:hover, .bkp .bkp-list button:hover { color: var(--f2-coral-dark); }
.bkp .bkp-list button:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------------ 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); }
/* More by the author, inside the author card (Claude Design 2-13, owner sync 2026-10-06): a hairline,
   the heading with "See all N books" beside it, then up to six covers with their titles. */
.bkp-author__more { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--f2-line); }
.bkp-author__morehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; }
.bkp .bkp-h3 { margin: 0; font-family: var(--f2-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--f2-ink); text-wrap: balance; }
html.bn .bkp .bkp-h3 { line-height: 1.45; }
.bkp-author__books { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; }
.bkp-author__books li { min-width: 0; }
.bkp .bkp-author__books a { display: flex; flex-direction: column; gap: 8px; color: var(--f2-ink); text-decoration: none; }
.bkp .bkp-author__books a:hover .bkp-author__title { color: var(--f2-link-hover); }
.bkp .bkp-author__books a:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 3px; border-radius: 10px; }
.bkp-author__cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size; border-radius: 10px; background: var(--f2-loading); box-shadow: 0 12px 22px -14px rgba(80, 40, 25, .55); }
.bkp-author__cover img, .bkp-author__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
.bkp-author__title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--f2-serif); font-size: 14.5px; font-weight: 600; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; }
.bkp-author__title:lang(bn) { font-family: 'Noto Serif Bengali', var(--f2-serif); line-height: 1.5; }

/* ------------------------------------------------------------------ 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; }
/* The source's credit line (books.source_credit): the panel's quiet secondary text, under the PD sentence. */
.bkp-dl__credit { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--f2-sub); overflow-wrap: anywhere; }
.bkp-dl__credit--alone { margin: -4px 20px 12px; }
.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: 13px; line-height: 1.4; color: var(--f2-muted); text-wrap: pretty; }
/* Claude Design 2-13 (owner sync 2026-10-06): the real stored size sits in the file column, bold,
   above what the format is good for, at every width. The size is never squeezed by the button
   (the old B5 worry): it shares the flexible column, and the notes are a few words long. */
.bkp .bk-dl__row .bk-dl__size { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--f2-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bkp .bkp-dl__form { display: contents; }
.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; }
.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__foot button, .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__foot button: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; }
/* Send to Kindle (owner 2026-10-31): a row like the file rows, under the file it sends. The row
   is the summary of a closed fold; its two numbered steps (like the download help page's) open
   under it. Every action is a full 44 px tap target. */
.bkp-dl__kindle { list-style: none; }
.bkp .bkp-kindle__row { cursor: pointer; list-style: none; }
.bkp .bkp-kindle__row::-webkit-details-marker { display: none; }
.bkp .bkp-kindle__row:hover .bkp-kindle__send { border-color: var(--f2-coral); }
.bkp .bkp-kindle__row:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: -3px; border-radius: 12px; }
.bkp .bkp-kindle[open] > .bkp-kindle__row .bkp-kindle__send { border-color: var(--f2-coral); color: var(--f2-coral-dark); }
.bkp .bkp-kindle__send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.bkp-kindle__panel { padding: 2px 20px 16px; }
.bkp-kindle__steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: bkp-kindle; }
.bkp-kindle__steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--f2-sub); counter-increment: bkp-kindle; }
.bkp-kindle__steps li::before { content: counter(bkp-kindle); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--f2-coral-tint); color: #B53A1C; font-size: 13px; font-weight: 800; line-height: 1; }
.bkp-kindle__steps li > span { align-self: center; }
.bkp .bkp-kindle__btn { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; white-space: normal; text-align: center; }
.bkp-kindle__alt { margin: 12px 0 0; padding-right: 36px; font-size: 13px; line-height: 1.5; color: var(--f2-muted); }
.bkp-kindle__alt + .bkp-kindle__alt { margin-top: 6px; }
/* The download and read buttons carry the design's own line icons (owner 2026-10-31). */
.bkp .bk-dl__row .bkp-dl__go { display: inline-flex; align-items: center; gap: 6px; }
.bkp .bkp-dl__go svg, .bkp .bkp-kindle__btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.bkp .bkp-dl__readbtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bkp .bkp-dl__readbtn svg { flex: 0 0 auto; }
/* On a phone the row's words need the room more than its button needs the icon. */
@media (max-width: 479px) { .bkp .bk-dl__row .bkp-dl__go svg { display: none; } }

/* ------------------------------------------------------------------ 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 4px 0 0; font-size: 14.5px; line-height: 1.6; }
.bkp .reader-discussion__join a, .bkp .reader-discussion__join button { color: var(--f2-coral-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; }
.bkp .reader-discussion__join a:hover, .bkp .reader-discussion__join button:hover { color: var(--f2-ink); }
/* the button is an inline block: the same tap area, without growing the line (reader URL plan step 1) */
.bkp .reader-discussion__join button { margin: -12px 0; }
.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-right: 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-right: 14px; border-right: 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); }
/* The recording's reader, a quieter line right under the author. */
.lsn .lsn-narrator { margin-top: -6px; font-size: 14.5px; }
.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: right; }
  .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: left; }
.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-right: 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 6px 0 34px; 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: left 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 :is(a, button) {
  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 :is(a, button):hover { background: var(--f2-hover); }
/* a part is a button (reader URL plan step 1, 2026-10-27); it fills its row as the link did */
.lsn .lsn-parts ol button { box-sizing: border-box; width: 100%; }
.lsn .lsn-parts ol :is(a, button)[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 :is(a, button)[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 :is(a, button)[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; }