/* Generated by tools/build-rtl-css.mjs from public/css/bde-f2.css: never edit by hand. */
/*
 * BDeBooks shared foundation, final design f3 (Claude Design package 2026-09-29, installed
 * exactly: bdebooks/design/DESIGN-F3-INSTALL-2026-09-29.md). The values are the design's own
 * (0-2 Design spec, BDe Header, BDe Footer, 9-1/9-2 sources and bde-site.js), copied, not
 * approximated. Loaded on every public page after every older stylesheet, so it wins by order.
 *
 * What lives here (Stage 1, foundation): design tokens, base type, the shared chrome (header,
 * menu drawer, language menu and sheet, phone tab bar, footer), the book card and its house
 * cover, the author avatar, and reusable controls: buttons, fields, chips, segmented switches,
 * tags, sheets and dialogs, status panels, empty and error states, section heads, shelves and
 * grids. Page families (home, lists, book, reader, pages, account) build on these classes in
 * their own family-*.css; nothing page-specific belongs here.
 *
 * Every chrome and component class starts with f2- so it can never collide with a v3 rule.
 * The legacy variables the older page CSS reads (--ink, --accent-ink, --blue ...) are pointed
 * at the f2 palette below, so pages not yet moved already sit in the new colours.
 *
 * Contrast (WCAG 2.2 AA, measured): coral #C9401F 4.96:1 on white, 4.69:1 on page, 4.56:1 on
 * #FFF3EE; coral-dark on coral-tint 5.61:1; muted #6E605A 5.70:1 on page, 6.03:1 on white;
 * night-band text #C4BEE6 8.15:1 on #2A2350. Field borders use --f2-field-edge #9B8B84 (3:1 on
 * every surface, owner 2026-09-30); cards and buttons keep the design's #EBD6CC.
 * The accent #E4532F (focus ring, play) is never behind or under small text.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* colour */
  --f2-page: #FFF7F3;
  --f2-surface: #FFFFFF;
  --f2-soft: #FFF9F6;
  --f2-hover: #FFF3EE;
  --f2-line: #F3E3DC;
  --f2-field: #EBD6CC;
  --f2-field-strong: #9A847A;
  /* Every input, select and textarea's border (owner 2026-09-30): the lightest step from the design's
     #EBD6CC toward the ink that reaches WCAG 3:1 on every surface a field sits on or inside
     (3.27 on white, 3.14 on #FFF9F6, 3.09 on the page, 3.01 on hover #FFF3EE). */
  --f2-field-edge: #9B8B84;
  --f2-ink: #221A17;
  --f2-body: #4E423D;
  --f2-sub: #5C4F4A;
  --f2-muted: #6E605A;
  --f2-coral: #C9401F;
  --f2-coral-dark: #A8361A;
  --f2-coral-tint: #FFE9E1;
  --f2-accent: #E4532F;
  /* plain links on the site pages (9-1, 9-2: a{color:#B53A1C} a:hover{color:#8A2410}) */
  --f2-link: #B53A1C;
  --f2-link-hover: #8A2410;
  --f2-audio: #5B4BDB;
  --f2-audio-ink: #4B3CC9;
  --f2-audio-tint: #ECE9FF;
  --f2-night: #2A2350;
  --f2-night-2: #3B3470;
  --f2-night-text: #C4BEE6;
  --f2-night-soft: #D6D1F0;
  --f2-success: #0B6A4E;
  --f2-success-ink: #0B5A42;
  --f2-success-tint: #E1F5EE;
  --f2-warning: #6B4700;
  --f2-warning-tint: #FFF3D1;
  --f2-danger: #B3261E;
  --f2-danger-tint: #FDECEA;
  --f2-disabled: #E9D9D1;
  --f2-loading: #F6EAE4;
  --f2-rule: #FF9C82;
  /* tints for icons, placeholders and missing pictures: background / foreground */
  --f2-t0-bg: #FFE9E1; --f2-t0-fg: #B53A1C;
  --f2-t1-bg: #FFF3D1; --f2-t1-fg: #7A5000;
  --f2-t2-bg: #ECE9FF; --f2-t2-fg: #4B3CC9;
  --f2-t3-bg: #E1F5EE; --f2-t3-fg: #0B6A4E;
  --f2-t4-bg: #FFE4EC; --f2-t4-fg: #A62B53;
  --f2-t5-bg: #E4F1FF; --f2-t5-fg: #1A55A6;

  /* type: Latin family first, then the Bengali one (it only covers Bengali letters) */
  --f2-bn-ui: 'Hind Siliguri';
  --f2-ui: 'DM Sans', var(--f2-bn-ui), 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f2-display: 'Outfit', var(--f2-bn-ui), 'Outfit Fallback', 'DM Sans', system-ui, sans-serif;
  /* One serif file set (UI/UX review F2): BDe Serif 400 and 600 (16 KB each) carry every serif line, the
     reader included; the 119 KB variable Source Serif 4 is no longer named, so it is never fetched. */
  --f2-serif: 'BDe Serif', 'Noto Serif Bengali', 'BDe Serif Fallback', Georgia, 'Times New Roman', serif;
  --f2-read: var(--f2-serif);
  --f2-h1: clamp(30px, 4.2vw, 46px);
  --f2-h2: clamp(20px, 2.2vw, 24px);

  /* space, radius, shadow */
  --f2-s1: 4px; --f2-s2: 8px; --f2-s3: 12px; --f2-s4: 16px; --f2-s5: 24px; --f2-s6: 32px; --f2-s7: 48px;
  --f2-r-chip: 12px; --f2-r-field: 14px; --f2-r-cover: 14px; --f2-r-btn: 16px; --f2-r-search: 18px;
  --f2-r-card: 26px; --f2-r-pill: 999px;
  --f2-shadow-card: 0 12px 30px -20px rgba(80, 40, 25, .45);
  --f2-shadow-cover: 0 16px 28px -14px rgba(80, 40, 25, .45);
  --f2-shadow-cover-up: 0 22px 34px -14px rgba(80, 40, 25, .5);
  --f2-shadow-sheet: 0 -20px 50px rgba(34, 26, 23, .25);
  --f2-shadow-pop: 0 24px 50px -16px rgba(34, 26, 23, .35);
  --f2-shadow-dialog: 0 30px 80px rgba(34, 26, 23, .3);
  --f2-shadow-tabbar: 0 16px 40px -10px rgba(80, 40, 25, .35);
  --f2-ease: cubic-bezier(.22, 1, .36, 1);

  /* layout */
  --f2-gutter: 16px;
  --f2-max: 1280px;
  --f2-header-h: 60px;

  /* z-index scale */
  --f2-z-sticky: 30;
  --f2-z-tabbar: 40;
  --f2-z-popover: 45;
  --f2-z-backdrop: 60;
  --f2-z-sheet: 61;
  --f2-z-toast: 70;

  /* The legacy names every older page stylesheet reads, pointed at the f2 palette. */
  --ink: var(--f2-ink); --body: var(--f2-body); --muted: var(--f2-muted); --sub: var(--f2-sub);
  --line: var(--f2-line); --border: var(--f2-field); --field: var(--f2-field-strong); --soft: var(--f2-soft);
  --accent: var(--f2-accent); --accent-ink: var(--f2-coral); --accent-deep: var(--f2-coral-dark);
  --accent-tint: var(--f2-coral-tint); --warm: var(--f2-soft);
  --blue: var(--f2-coral); --blue-h: var(--f2-coral-dark); --blue-50: var(--f2-coral-tint);
  --audio: var(--f2-audio); --audio-50: var(--f2-audio-tint);
  --r-cover: var(--f2-r-cover);
  --shadow-cover: var(--f2-shadow-cover);
  --shadow-cover-up: var(--f2-shadow-cover-up);
  --shadow-soft: var(--f2-shadow-card);
  --sans: var(--f2-ui);
  --serif: var(--f2-serif);
}
/* Off the Bengali catalogue, a stray Bengali word (a language's own name in the menu) is drawn
   with the phone's own Bengali font first, so an English page does not fetch a Bengali file. */
html:not(.bn) { --f2-bn-ui: 'Noto Sans Bengali', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Hind Siliguri'; }
/* That word is always "বাংলা" (the footer's language row, the language menu, the root's language
   door). Where the phone has no Bengali font of its own (Windows, Linux, the PageSpeed lab), it
   comes from a 1 KB file of just those letters in Hind Siliguri, not the 40 KB alphabet
   (partials/f2/fonts, 'BDe Bangla Name'; Bengali speed slice 2026-10-06). The same letters, the
   same look. */
html:not(.bn) :is(.f2-langlist__name, .root-library__native, .f2-footer__langs span):lang(bn) {
  font-family: 'Noto Sans Bengali', 'Kohinoor Bangla', 'Bangla Sangam MN', 'BDe Bangla Name', 'Hind Siliguri', var(--f2-ui);
}
/* Greek and Cyrillic language names ("Ελληνικά", "Українська", "Български") on a page in another
   script keep the phone's own font, metric-matched to DM Sans, as they always were, so a Latin page
   never fetches a Greek or Cyrillic file for them (partials/f2/fonts, 2026-10-15). On a Greek page the
   Greek name, and on a Cyrillic page the Cyrillic names, take the page's own faces. A later Cyrillic
   catalogue joins the second list. */
html:not(:lang(el)) :is(.f2-langlist__name, .root-library__native, .f2-footer__langs span):lang(el),
html:not(:lang(uk)):not(:lang(bg)) :is(.f2-langlist__name, .root-library__native, .f2-footer__langs span):is(:lang(uk), :lang(bg)) {
  font-family: 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (min-width: 768px) { :root { --f2-gutter: 24px; --f2-header-h: 72px; } }
/* The page gutter as the sources draw it: a language site 16, 24, then 48 px from 1100 px
   (bde-site.js: m < 768, narrow < 1100); the root 16, then 40 px (9-1 Source: m < 768). */
@media (min-width: 1100px) { :root { --f2-gutter: 48px; } }
@media (min-width: 768px) { body.f2-root { --f2-gutter: 40px; } }

/* ------------------------------------------------------------------ base */
html, body { font-family: var(--f2-ui); }
html { scroll-padding-top: calc(var(--f2-header-h) + 8px); }
body {
  margin: 0;
  padding-bottom: 0;
  background: var(--f2-page);
  color: var(--f2-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.bn body { font-family: var(--f2-ui); }
::selection { background: var(--f2-coral-tint); color: var(--f2-ink); }
:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
/* A search hint longer than its field ends with "..." instead of stopping mid-word (UI review
   2026-10-21: "Titre, auteur ou", "Tytuł, autor lub gatur" on a 390 px phone). */
input[type="search"], input[type="search"]::placeholder { text-overflow: ellipsis; }

/* Final package 2026-10-02 (c): the skip link's padding is 12px 16px, which renders it 45 px tall in
   the design (16 px text). Our text is 14 px, so a 44 px floor keeps the same tap height. */
.skip-link {
  position: absolute; right: 12px; top: -90px; z-index: var(--f2-z-toast);
  box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px;
  padding: 12px 16px; border-radius: var(--f2-r-chip);
  background: var(--f2-ink); color: #fff; font: 700 14px/1.2 var(--f2-ui); box-shadow: none;
}
.skip-link:focus, .skip-link:focus-visible { top: 8px; color: #fff; outline: 3px solid var(--f2-accent); outline-offset: 2px; }

.f2-wrap { box-sizing: border-box; width: 100%; max-width: var(--f2-max); margin-inline: auto; padding-inline: var(--f2-gutter); }
.f2-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* headings and text */
.f2-h1 {
  margin: 0; font-family: var(--f2-display); font-weight: 800; font-size: var(--f2-h1);
  line-height: 1.05; letter-spacing: -1px; color: var(--f2-ink); text-wrap: balance;
}
.f2-h2 {
  margin: 0; font-family: var(--f2-display); font-weight: 700; font-size: var(--f2-h2);
  line-height: 1.2; letter-spacing: -.4px; color: var(--f2-ink); text-wrap: balance;
}
.f2-lede { margin: 0; max-width: 68ch; font-size: clamp(15.5px, 1.4vw, 17px); line-height: 1.6; color: var(--f2-muted); text-wrap: pretty; }
.f2-meta { font-size: 13.5px; font-weight: 600; color: var(--f2-muted); }
.f2-prose { max-width: 68ch; font-size: 16px; line-height: 1.7; color: var(--f2-body); text-wrap: pretty; }
.f2-prose a { color: var(--f2-coral); text-decoration: underline; text-underline-offset: 2px; }
/* Bengali: taller lines, no negative tracking, never upper case (design spec section 10). */
html.bn .f2-h1, html.bn .f2-h2, :lang(bn).f2-h1, :lang(bn).f2-h2 { letter-spacing: 0; line-height: 1.35; }
html.bn .f2-prose, html.bn .f2-lede { line-height: 1.85; }

/* ------------------------------------------------------------------ buttons */
/* A reader or per-book action that looks like a link is a button of a form (reader URL plan
   step 1, owner 2026-10-27; public/js/bde-go.js). This takes off the browser's own button look
   at no specificity, so the link's own rule still draws it exactly as before. */
:where(button.bde-go) {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
/* A card's own small form around one such button draws no box of its own. */
.bde-go-form { display: contents; }
a.f2-btn, .f2-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1.5px solid transparent; border-radius: var(--f2-r-btn);
  background: var(--f2-surface); color: var(--f2-ink);
  font: 700 15px/1.2 var(--f2-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .16s var(--f2-ease), border-color .16s var(--f2-ease), color .16s var(--f2-ease);
}
.f2-btn svg { flex: 0 0 auto; }
.f2-btn--lg { min-height: 52px; padding: 0 22px; font-size: 16px; }
.f2-btn--block { display: flex; width: 100%; }
.f2-btn.f2-btn--primary { background: var(--f2-coral); color: #fff; }
.f2-btn.f2-btn--primary:hover { background: var(--f2-coral-dark); color: #fff; }
.f2-btn.f2-btn--secondary { border-color: var(--f2-field); background: var(--f2-surface); color: var(--f2-ink); }
.f2-btn.f2-btn--secondary:hover { border-color: var(--f2-coral); color: var(--f2-ink); }
.f2-btn.f2-btn--quiet { background: var(--f2-hover); color: var(--f2-ink); }
.f2-btn.f2-btn--quiet:hover { background: var(--f2-coral-tint); color: var(--f2-ink); }
.f2-btn.f2-btn--audio { background: var(--f2-audio); color: #fff; }
.f2-btn.f2-btn--audio:hover { background: var(--f2-audio-ink); color: #fff; }
.f2-btn.f2-btn--night { background: #fff; color: var(--f2-night); }
.f2-btn.f2-btn--night:hover { background: var(--f2-audio-tint); color: var(--f2-night); }
.f2-btn.f2-btn--danger { background: var(--f2-danger); color: #fff; }
.f2-btn.f2-btn--danger:hover { background: #8F1E18; color: #fff; }
.f2-btn.f2-btn--link { min-height: 44px; padding: 0 4px; background: transparent; color: var(--f2-coral); }
.f2-btn.f2-btn--link:hover { color: var(--f2-coral-dark); }
.f2-btn.f2-btn:disabled, .f2-btn.f2-btn[aria-disabled="true"] { background: var(--f2-disabled); border-color: transparent; color: var(--f2-sub); cursor: not-allowed; }
.f2-btn:active:not(:disabled) { transform: translateY(1px); }

a.f2-iconbtn, .f2-iconbtn {
  box-sizing: border-box; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px;
  background: transparent; color: var(--f2-ink); cursor: pointer; text-decoration: none;
  transition: background-color .16s var(--f2-ease);
}
a.f2-iconbtn:hover, .f2-iconbtn:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-header a.f2-iconbtn, .f2-header a.f2-iconbtn:hover { color: var(--f2-ink); }
.f2-iconbtn--tint { background: var(--f2-hover); }
.f2-iconbtn--tint:hover { background: var(--f2-coral-tint); }
.f2-iconbtn--round { border-radius: 50%; }

/* ------------------------------------------------------------------ fields */
.f2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f2-label { font-size: 14px; font-weight: 700; color: var(--f2-sub); }
.f2-label .f2-req { color: var(--f2-coral); }
.f2-label .f2-optional { font-weight: 500; color: var(--f2-muted); }
.f2-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--f2-muted); }
.f2-input, .f2-select, .f2-textarea {
  box-sizing: border-box; width: 100%; min-width: 0; height: 52px; padding: 0 16px;
  border: 1.5px solid var(--f2-field-edge); border-radius: var(--f2-r-field);
  background: var(--f2-soft); color: var(--f2-ink); font: 400 16px/1.4 var(--f2-ui);
  transition: border-color .16s var(--f2-ease), box-shadow .16s var(--f2-ease);
}
.f2-textarea { height: auto; min-height: 128px; padding: 12px 16px; line-height: 1.55; resize: vertical; }
.f2-select { padding-left: 36px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23221A17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; }
.f2-input::placeholder, .f2-textarea::placeholder { color: var(--f2-muted); opacity: 1; }
.f2-input:hover, .f2-select:hover, .f2-textarea:hover { border-color: var(--f2-sub); }
.f2-input:focus, .f2-select:focus, .f2-textarea:focus { border-color: var(--f2-coral); outline: none; }
.f2-input:focus-visible, .f2-select:focus-visible, .f2-textarea:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.f2-input[aria-invalid="true"], .f2-select[aria-invalid="true"], .f2-textarea[aria-invalid="true"] { border-color: var(--f2-danger); }
.f2-error-text { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--f2-danger); }
.f2-error-text::before { content: "!"; flex: 0 0 auto; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: var(--f2-danger); color: #fff; font-size: 11.5px; font-weight: 800; }
.f2-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 15px; line-height: 1.5; color: var(--f2-body); cursor: pointer; }
.f2-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--f2-coral); }

/* ------------------------------------------------------------------ chips, switches, tags */
a.f2-chip, .f2-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--f2-r-pill);
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
  color: var(--f2-sub); font: 600 14.5px/1.2 var(--f2-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .16s var(--f2-ease), color .16s var(--f2-ease);
}
a.f2-chip:hover, .f2-chip:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-chip.f2-chip[aria-current="page"], .f2-chip.f2-chip[aria-current="true"], .f2-chip.f2-chip[aria-pressed="true"] { background: var(--f2-coral); color: #fff; font-weight: 700; }
.f2-chip--flat { box-shadow: none; background: var(--f2-soft); }
.f2-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.f2-chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--f2-gutter) * -1); padding: 4px var(--f2-gutter) 12px; }
.f2-chip-row--scroll::-webkit-scrollbar { display: none; }

.f2-seg {
  display: inline-flex; align-self: flex-start; gap: 4px; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--f2-r-search); background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.f2-seg::-webkit-scrollbar { display: none; }
.f2-seg > a, .f2-seg > button, .f2-seg > span, .f2-seg > a:link {
  display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 14px; background: transparent; color: var(--f2-sub);
  font: 700 14.5px/1.2 var(--f2-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.f2-seg > a:hover, .f2-seg > button:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-seg > [aria-current="page"], .f2-seg > [aria-current="true"], .f2-seg > [aria-pressed="true"], .f2-seg > a[aria-current] { background: var(--f2-coral); color: #fff; }

.f2-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-tag--pdf { background: var(--f2-t0-bg); color: var(--f2-t0-fg); }
.f2-tag--epub { background: var(--f2-t3-bg); color: var(--f2-t3-fg); }
.f2-tag--audio { background: var(--f2-audio-tint); color: var(--f2-audio-ink); }
.f2-tag--plain { background: var(--f2-surface); color: var(--f2-coral-dark); }
.f2-tag--t0 { background: var(--f2-t0-bg); color: var(--f2-t0-fg); }
.f2-tag--t1 { background: var(--f2-t1-bg); color: var(--f2-t1-fg); }
.f2-tag--t2 { background: var(--f2-t2-bg); color: var(--f2-t2-fg); }
.f2-tag--t3 { background: var(--f2-t3-bg); color: var(--f2-t3-fg); }
.f2-tag--t4 { background: var(--f2-t4-bg); color: var(--f2-t4-fg); }
.f2-tag--t5 { background: var(--f2-t5-bg); color: var(--f2-t5-fg); }

/* ------------------------------------------------------------------ panels, states */
.f2-panel { box-sizing: border-box; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--f2-r-card); background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
.f2-panel--soft { background: var(--f2-soft); box-shadow: none; }
.f2-panel--tint { background: var(--f2-coral-tint); box-shadow: none; }
.f2-panel--night { background: var(--f2-night); color: #fff; box-shadow: none; }

/* Sent / saved (role="status"), a warning, an error, each with words and never colour alone. */
.f2-status { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; background: var(--f2-success-tint); color: var(--f2-success-ink); }
.f2-status > svg { flex: 0 0 auto; margin-top: 2px; }
.f2-status.f2-status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.f2-status--warning { background: var(--f2-warning-tint); color: var(--f2-warning); }
.f2-status--error { background: var(--f2-danger-tint); color: var(--f2-danger); }
.f2-status--info { background: var(--f2-soft); color: var(--f2-body); }

/* Empty and error states: say what is missing and give a next step. */
.f2-state {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px); border-radius: var(--f2-r-card);
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card); text-align: center;
}
.f2-state__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-state__title { margin: 4px 0 0; font-family: var(--f2-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.25; color: var(--f2-ink); text-wrap: balance; }
.f2-state__text { margin: 0; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--f2-muted); text-wrap: pretty; }
.f2-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.f2-state--error .f2-state__icon { background: var(--f2-danger-tint); color: var(--f2-danger); }
.f2-state--plain { background: transparent; box-shadow: none; }
.f2-badge-gone { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--f2-r-pill); background: var(--f2-ink); color: #fff; font-size: 13px; font-weight: 700; }

/* ------------------------------------------------------------------ section heads, shelves, grids */
.f2-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.f2-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
a.f2-section-head__more, .f2-section-head__more { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; color: var(--f2-link); font-size: 14px; font-weight: 700; text-decoration: none; }
.f2-section-head__more:hover { color: var(--f2-link-hover); }

.f2-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 14px; margin: 0 calc(var(--f2-gutter) * -1); padding: 4px var(--f2-gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--f2-gutter); scrollbar-width: none; list-style: none; }
.f2-shelf::-webkit-scrollbar { display: none; }
.f2-shelf > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) {
  .f2-shelf { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; gap: 28px 20px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}
.f2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .f2-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 20px; } }

.f2-crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--f2-muted); }
nav.f2-crumbs a, .f2-crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-muted); text-decoration: none; }
/* A short crumb ("Home", BN 22 px) gets a tap area at least 44 px wide: an invisible layer centred
   on it, 8 px past each side and never under 44 px, which stays inside the 8 px gap, the "/" and
   the next gap, so neighbours never overlap (UI audit 2026-10-04). The crumbs look the same. */
.f2-crumbs a::before { content: ""; position: absolute; top: 0; bottom: 0; right: 50%; width: max(100% + 16px, 44px); transform: translateX(50%); }
.f2-crumbs a:hover { color: var(--f2-coral); }
.f2-crumbs [aria-current="page"] { color: var(--f2-ink); }

/* ------------------------------------------------------------------ header
 * f3 "BDe Header.dc.html", values copied from the component: 72 px bar from 768 px, 60 px on
 * phones; the full nav from 1100 px, the menu button below. The component folds its nav at 1080 px;
 * the spec's breakpoint table (0-2: "768-1099 compact, 1100 and up full nav and search field") is
 * followed instead, because with the header search back (owner 2026-10-01) the 1080-1099 band had
 * no room left for it on the Spanish and French links. */
.f2-header {
  position: sticky; top: 0; z-index: var(--f2-z-sticky);
  background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--f2-line);
  font-family: var(--f2-ui); color: var(--f2-ink);
}
.f2-header__bar { box-sizing: border-box; display: flex; align-items: center; gap: 10px; max-width: var(--f2-max); height: 72px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
a.f2-brand, .f2-header a.account-brand { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; margin-left: 6px; color: var(--f2-ink); text-decoration: none; }
.f2-brand img[width][height], .f2-header .account-brand img[width][height] { display: block; width: auto; height: 28px; max-width: none; }
.f2-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.f2-header .f2-nav a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 13px; border-radius: 12px;
  font-size: 15px; font-weight: 700; color: var(--f2-body); text-decoration: none; white-space: nowrap;
}
.f2-header .f2-nav a:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-header .f2-nav a[aria-current="page"] { background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-header__spacer { flex: 1 1 0; min-width: 0; }
.f2-header__tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }
.f2-header__account { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.f2-langbtn {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 44px; padding: 0 12px;
  border: 0; border-radius: 14px; background: var(--f2-hover); color: var(--f2-ink);
  font: 700 14px/normal var(--f2-ui); cursor: pointer; white-space: nowrap;
}
.f2-lang { position: relative; flex: 0 0 auto; }
.f2-langmenu {
  position: absolute; left: 0; top: 52px; z-index: var(--f2-z-popover); box-sizing: border-box;
  width: 300px; padding: 8px; border-radius: 20px; background: #fff; box-shadow: var(--f2-shadow-pop);
  /* The header is sticky, so a menu of every language that is taller than the window used to run off
     the bottom with the last languages out of reach (live 2026-10-20, 1,094 px list in a 768 px window). */
  max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain;
}
a.f2-iconbtn.f2-header__shelf { width: 44px; height: 44px; border-radius: 14px; color: var(--f2-ink); }
a.f2-iconbtn.f2-header__shelf:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-header .f2-signin {
  display: inline-flex; align-items: center; flex: 0 0 auto; height: 44px; padding: 0 18px; border-radius: 14px;
  background: var(--f2-coral); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.f2-header .f2-signin:hover { background: var(--f2-coral-dark); color: #fff; }
.f2-menubtn { display: none; margin-right: -8px; }
.f2-lang--phone { display: none; }

/* Header search (owner 2026-10-01). The slot is the bar's free space (the spacer's place), and a
 * container: its own width chooses the field or the icon, so a long row of links can never be
 * overlapped. Values from the design: bde-site.js S.dSearch (46 px, radius 16, #FFF3EE, max 360)
 * and S.dSearchIcon (44 px tinted icon). Without container queries the icon shows, which always
 * fits. Phones keep the tab bar's Search and get nothing here. */
.f2-hsearch-slot { display: none; }
.f2-hsearch { display: none; }
@media (min-width: 768px) {
  .f2-hsearch-slot {
    container: f2-hsearch / inline-size;
    display: flex; align-items: center; justify-content: flex-end;
    flex: 1 1 0; min-width: 44px; height: 46px;
  }
}
.f2-header a.f2-iconbtn.f2-hsearch-icon { background: var(--f2-hover); color: var(--f2-ink); }
.f2-header a.f2-iconbtn.f2-hsearch-icon:hover { background: var(--f2-coral-tint); color: var(--f2-ink); }
.f2-hsearch {
  box-sizing: border-box; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 360px; height: 46px;
  padding: 0 4px 0 14px; border-radius: var(--f2-r-btn); background: var(--f2-hover); color: var(--f2-muted);
}
.f2-hsearch:has(input:focus-visible) { outline: 3px solid var(--f2-accent); outline-offset: 2px; background: #fff; }
.f2-hsearch__go {
  order: -1; display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--f2-sub); cursor: pointer; transition: background-color .16s var(--f2-ease);
}
.f2-hsearch__go:hover { background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-hsearch input {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0 4px 0 0; padding: 0; border: 0; outline: 0; border-radius: 0;
  background: transparent; color: var(--f2-ink); font: 500 14.5px/normal var(--f2-ui); text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
}
.f2-hsearch input:focus-visible { outline: 0; }
.f2-hsearch input::placeholder { color: var(--f2-muted); opacity: 1; text-overflow: ellipsis; }
.f2-hsearch input::-webkit-search-cancel-button { display: none; }
@media (min-width: 1100px) {
  @container f2-hsearch (min-width: 180px) {
    .f2-hsearch { display: flex; }
    .f2-header a.f2-iconbtn.f2-hsearch-icon { display: none; }
  }
  /* From 1100 to 1279 px the links take the design's narrow size (bde-site.js nav, narrow: 14 px,
     padding 0 12px) wherever the bar also holds the search, which leaves the icon room at 1100 px
     in every language. */
  .f2-header__bar--search .f2-nav a { padding: 0 12px; font-size: 14px; }
}
@media (min-width: 1280px) {
  .f2-header__bar--search .f2-nav a { padding: 0 13px; font-size: 15px; }
}
/* The root's nav holds five links since Collections (2026-10-10); from 1100 to 1279 px they
   overran the search icon, so there the root drops Home (the logo is the home link). */
@media (min-width: 1100px) and (max-width: 1279px) {
  .f2-header .f2-nav:has(> a[data-nav="collections"]) > a[data-nav="home"] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .f2-hsearch__go { transition: none; } }

/* The language rows (the menu and the sheet): the name in Outfit, the line in the language's
   own words under it, the live count on the right. The current site is marked as the header's
   current link and the tab bar's current tab are: the coral tint, its name in dark coral (5.61:1),
   with aria-current; no side stripe (UI audit 2026-10-04). */
.f2-langlist { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
ul.f2-langlist a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 12px;
  border-radius: 12px; background: transparent; color: var(--f2-ink); text-decoration: none;
}
ul.f2-langlist a:hover { background: var(--f2-hover); color: var(--f2-ink); }
ul.f2-langlist a[aria-current] { background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-langlist__text { display: flex; flex-direction: column; min-width: 0; }
.f2-langlist__name { font-family: var(--f2-display); font-size: 16px; font-weight: 700; }
.f2-langlist__native { font-family: var(--f2-ui); font-size: 13px; color: var(--f2-muted); }
.f2-langlist__native:lang(bn) { font-family: 'Hind Siliguri', var(--f2-bn-ui), sans-serif; }
.f2-langlist__count { flex: 0 0 auto; font-size: 13px; color: var(--f2-muted); }

@media (max-width: 1099px) {
  .f2-menubtn { display: grid; }
  .f2-header .f2-nav { display: none; }
}
/* Phones: menu on the left, the logo in the middle, the language globe on the right. */
@media (max-width: 767px) {
  .f2-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; height: 60px; padding: 0 6px; }
  .f2-header__bar > .f2-menubtn { justify-self: start; margin-right: 0; }
  .f2-header__bar > :is(.f2-brand, .account-brand) { justify-self: center; gap: 8px; margin: 0; padding: 0 4px; }
  .f2-header__bar > :is(.f2-brand, .account-brand) img[width][height] { height: 26px; }
  .f2-header__bar > .f2-nav, .f2-header__spacer { display: none; }
  .f2-header__tools { justify-self: end; gap: 2px; }
  .f2-header__tools > :not(.f2-lang--phone, .f2-header__account) { display: none !important; }
  .f2-header__tools:has(> .f2-header__account) > .f2-lang--phone { display: none; }
  .f2-lang--phone { display: flex; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; gap: 5px; font-size: 13px; }
}
html.bn .f2-header .f2-nav a { font-weight: 600; }

/* ------------------------------------------------------------------ backdrop, drawer, sheets */
.f2-backdrop { position: fixed; inset: 0; z-index: var(--f2-z-backdrop); background: rgba(34, 26, 23, .45); animation: f2-fade .18s var(--f2-ease); }
/* A page's own bottom sheet (download, share, text settings, chapters): bde-site.js S.sheet. */
.f2-sheet {
  position: fixed; right: 0; left: 0; bottom: 0; z-index: var(--f2-z-sheet); box-sizing: border-box;
  max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; background: #fff; box-shadow: var(--f2-shadow-sheet);
  font-family: var(--f2-ui); color: var(--f2-ink);
  animation: f2-rise .22s var(--f2-ease);
}
.f2-sheet__handle { display: block; width: 40px; height: 5px; margin: 2px auto 12px; border-radius: 99px; background: var(--f2-field); }
.f2-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.f2-sheet__title { margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; line-height: 1.25; }
.f2-sheet__close { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--f2-hover); color: var(--f2-ink); cursor: pointer; }
.f2-sheet__close:hover { background: var(--f2-coral-tint); }
@media (min-width: 768px) {
  .f2-sheet { right: 50%; left: auto; top: 50%; bottom: auto; width: 460px; max-width: calc(100vw - 32px); max-height: 80vh; padding: 24px; border-radius: 26px; box-shadow: var(--f2-shadow-dialog); transform: translate(50%, -50%); animation: f2-fade .18s var(--f2-ease); }
  .f2-sheet__handle { display: none; }
}

/* The header's language sheet: a bottom sheet at every width, as the component draws it. */
.f2-langsheet {
  position: fixed; right: 0; left: 0; bottom: 0; z-index: calc(var(--f2-z-sheet) + 1); box-sizing: border-box;
  max-height: 86vh; overflow: auto; overscroll-behavior: contain;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0; background: #fff; box-shadow: var(--f2-shadow-sheet);
  font-family: var(--f2-ui); color: var(--f2-ink);
  animation: f2-rise .22s var(--f2-ease);
}
.f2-langsheet__handle { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--f2-field); }
.f2-langsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.f2-langsheet__title { margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; }
.f2-langsheet__close, .f2-drawer__close { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: var(--f2-hover); color: var(--f2-ink); cursor: pointer; }
.f2-langsheet .f2-langlist { margin-top: 10px; }

/* The menu: a drawer from the left at every width it is offered (phones and compact). */
.f2-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--f2-z-sheet); box-sizing: border-box;
  display: flex; flex-direction: column; width: min(340px, 88vw);
  background: #fff; box-shadow: -20px 0 50px rgba(34, 26, 23, .25);
  font-family: var(--f2-ui); color: var(--f2-ink);
  animation: f2-slide .22s var(--f2-ease);
}
.f2-drawer__head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; height: 60px; box-sizing: border-box; padding: 0 18px 0 8px; border-bottom: 1px solid var(--f2-line); }
.f2-drawer__title { font-family: var(--f2-display); font-size: 19px; font-weight: 700; }
.f2-drawer__body { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 20px; }
.f2-drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.f2-drawer .f2-drawer__nav a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--f2-ink); text-decoration: none; }
.f2-drawer .f2-drawer__nav a:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-drawer .f2-drawer__nav a[aria-current="page"] { background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-drawer__lang {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 52px; padding: 0 14px;
  border: 1px solid var(--f2-line); border-radius: 14px; background: var(--f2-soft);
  font: 700 15px var(--f2-ui); color: var(--f2-ink); text-align: right; cursor: pointer;
}
.f2-drawer__lang-name { display: flex; align-items: center; gap: 10px; }
.f2-drawer__lang-current { font-weight: 600; color: var(--f2-sub); }
.f2-drawer__group { margin: 18px 6px 8px; font-family: var(--f2-ui); font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0; color: var(--f2-sub); }
html.bn .f2-drawer__group { letter-spacing: 0; }
.f2-drawer__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.f2-drawer .f2-drawer__chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--f2-r-pill); background: var(--f2-soft); font-size: 14px; font-weight: 600; color: var(--f2-sub); text-decoration: none; }
.f2-drawer .f2-drawer__chips a:hover { background: var(--f2-hover); color: var(--f2-ink); }
.f2-drawer .f2-drawer__chips a[aria-current="page"] { background: var(--f2-coral-tint); color: var(--f2-coral-dark); }
.f2-drawer__foot { flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--f2-line); }
.f2-drawer__foot-row { display: flex; gap: 8px; }
.f2-drawer a.f2-drawer__cta { flex: 1; display: flex; align-items: center; justify-content: center; height: 52px; box-sizing: border-box; border-radius: 16px; background: var(--f2-coral); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.f2-drawer a.f2-drawer__cta:hover { background: var(--f2-coral-dark); color: #fff; }
.f2-drawer a.f2-drawer__cta--quiet { border: 1.5px solid var(--f2-field); background: #fff; color: var(--f2-ink); }
.f2-drawer a.f2-drawer__cta--quiet:hover { border-color: var(--f2-coral); background: #fff; color: var(--f2-ink); }

body.f2-locked { overflow: hidden; }
@keyframes f2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes f2-rise { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes f2-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ phone tab bar
 * Language sites: bde-site.js tabs (70 px bar, 54 px items). Root: 9-1 tabs (56 px items). */
.f2-tabbar { display: none; }
.f2-tabbar-space { display: none; }
@media (max-width: 767px) {
  html { scroll-padding-bottom: 100px; }
  .f2-tabbar {
    position: fixed; right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--f2-z-tabbar);
    box-sizing: border-box; display: flex; align-items: center; gap: 4px; height: 70px; padding: 0 8px;
    border-radius: 26px; background: #fff; box-shadow: var(--f2-shadow-tabbar);
  }
  nav.f2-tabbar a {
    flex: 1 1 0; min-width: 0; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 18px; background: transparent; color: var(--f2-muted); font-size: 11.5px; font-weight: 600; line-height: normal; text-align: center; text-decoration: none;
    overflow: hidden;
  }
  /* The design draws the label as bare text in a 0-padding item (bde-site.js tabs). A long label
     ("Rechercher", "Mon étagère") may use 3 px of the 4 px gap on each side. A label of two or more
     words that still does not fit (five tabs: "Mon étagère", "Mijn boekenplank", "Il mio scaffale",
     "Minha estante") breaks onto a second line under its icon instead of ending in "..." (UI review
     2026-10-21), a single long word ("boekenplank") by the language's hyphenation; 22 px icon + 3 px gap + two 13 px lines stay inside the 54 px item. The clip box reaches 3 px above and below the lines (a negative margin keeps them in place) so accents and Vietnamese marks (É, ệ) are never cut. */
  nav.f2-tabbar a { overflow: visible; }
  nav.f2-tabbar a > span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    max-width: calc(100% + 6px); margin: -3px; padding: 3px 0; overflow: hidden; line-height: 1.15; text-wrap: balance; hyphens: auto;
  }
  nav.f2-tabbar a[aria-current="page"] { background: var(--f2-coral-tint); color: var(--f2-coral-dark); font-weight: 700; }
  .f2-tabbar.f2-tabbar--root { height: auto; gap: 2px; padding: 6px; border-radius: 24px; box-shadow: 0 18px 40px -12px rgba(34, 26, 23, .35); }
  nav.f2-tabbar--root a { height: 56px; gap: 2px; font-size: 12px; color: var(--f2-sub); }
  nav.f2-tabbar--root a[aria-current="page"] { font-weight: 600; }
  html.bn .f2-tabbar a { font-size: 12px; }
  html.bn .f2-tabbar a > span { line-height: 1.4; }
  /* The page keeps room under its last line (the footer's legal links) for the floating bar.
     After the footer that room continues the footer's night band, so no pale strip shows under
     it (UI audit 2026-10-04); its height, and so the legal links' clearance, is unchanged. */
  .f2-tabbar-space { display: block; height: calc(96px + env(safe-area-inset-bottom)); background: var(--f2-page); }
  .f2-footer ~ .f2-tabbar-space { background: var(--f2-night); }
}
/* The readers never show the tab bar (design spec 5). A reader page should say so with
   @section('hideTabbar', '1'); until then, the text reader is recognised by its #reader. */
body:has(#reader) .f2-tabbar, body:has(#reader) .f2-tabbar-space { display: none; }
@media print { .f2-tabbar, .f2-tabbar-space, .f2-header, .f2-footer { display: none !important; } }

/* ------------------------------------------------------------------ footer
 * f3 "BDe Footer.dc.html" (option 2a), values copied from the component. */
.f2-footer { margin-top: 112px; border-top: 1px solid var(--f2-field); font-family: var(--f2-ui); color: var(--f2-ink); }
.f2-footer__top { background: #fff; }
.f2-footer__inner { box-sizing: border-box; max-width: var(--f2-max); margin: 0 auto; padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(32px, 4vw, 48px); }
.f2-footer__main { display: flex; flex-wrap: wrap; gap: 36px clamp(32px, 6vw, 96px); }
.f2-footer__about { display: flex; flex-direction: column; gap: 16px; flex: 1 1 260px; max-width: 340px; min-width: 0; }
.f2-footer a.f2-footer__brand { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; color: var(--f2-ink); text-decoration: none; }
.f2-footer__brand img[width][height] { display: block; width: auto; height: 31px; max-width: none; }
.f2-footer__tagline { margin: 0; font-size: 15px; line-height: 1.6; color: var(--f2-sub); text-wrap: pretty; }
.f2-footer__mail { margin: -8px 0 0; }
.f2-footer .f2-footer__mail a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--f2-sub); text-decoration: underline; text-decoration-color: var(--f2-line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.f2-footer .f2-footer__mail a:hover { color: var(--f2-coral); text-decoration-color: currentColor; }
.f2-footer__social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.f2-footer .f2-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; border: 1px solid var(--f2-field); border-radius: 12px; color: var(--f2-sub); }
.f2-footer .f2-footer__social a:hover { border-color: var(--f2-coral); color: var(--f2-coral); }
.f2-footer__cols { flex: 999 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px 24px; }
.f2-footer__col { display: flex; flex-direction: column; min-width: 0; }
.f2-footer__heading { margin: 0 0 6px; font-family: var(--f2-ui); font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0; text-transform: none; color: var(--f2-ink); }
.f2-footer .f2-footer__col a { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--f2-sub); text-decoration: none; }
.f2-footer .f2-footer__col a:hover { color: var(--f2-coral); }
.f2-footer__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: clamp(28px, 4vw, 40px); padding-top: 22px; border-top: 1px solid var(--f2-line); }
.f2-footer__langs .f2-footer__heading { margin: 0; }
.f2-footer__langs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.f2-footer .f2-footer__langs a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--f2-field); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--f2-body); text-decoration: none; }
.f2-footer .f2-footer__langs a:hover { border-color: var(--f2-coral); color: var(--f2-coral); }
/* A language named in another script (বাংলা) carries its name in the reader's language beside it. */
.f2-footer__gloss { margin-right: 6px; font-weight: 400; color: var(--f2-muted); }
.f2-footer .f2-footer__langs a:hover .f2-footer__gloss { color: inherit; }

.f2-footer__band { background: var(--f2-night); color: #fff; }
.f2-footer__band-inner { box-sizing: border-box; max-width: var(--f2-max); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.f2-footer__news { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 26px 0; }
.f2-footer__news-copy { min-width: 0; }
.f2-footer__news-title { margin: 0; font-family: var(--f2-ui); font-size: 15px; font-weight: 700; line-height: normal; letter-spacing: 0; color: #fff; }
.f2-footer__news-text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--f2-night-soft); }
.f2-footer__news-side { flex: 0 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.f2-footer__form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.f2-footer__form-row { display: flex; gap: 8px; }
.f2-footer__email {
  flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 12px; background: rgba(255, 255, 255, .08);
  color: #fff; font: 400 16px var(--f2-ui); outline: none;
}
/* The field's edge at 3:1 and its placeholder at 4.5:1 on the Night band (WCAG 1.4.11, 1.4.3). */
.f2-footer__email::placeholder { color: var(--f2-night-text); opacity: 1; }
.f2-footer__email:focus { border-color: var(--f2-rule); }
.f2-footer__email:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.f2-footer__email[aria-invalid="true"] { border-color: #FFB3A0; }
.f2-footer__subscribe { flex: 0 0 auto; height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--f2-coral); color: #fff; font: 700 15px var(--f2-ui); cursor: pointer; }
.f2-footer__subscribe:hover { background: var(--f2-coral-dark); }
.f2-footer__subscribe:disabled { opacity: .7; cursor: progress; }
.f2-footer__error { font-size: 13.5px; font-weight: 600; color: #FFB3A0; }
.f2-footer__sending { font-size: 13.5px; font-weight: 600; color: var(--f2-night-soft); }
.f2-footer__turnstile:empty { display: none; }
.f2-footer__notice { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--f2-night-text); }
.f2-footer .f2-footer__notice a, .f2-footer .f2-footer__notice a:visited { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.f2-footer .f2-footer__notice a:hover { color: var(--f2-rule); }
.f2-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 14px 0 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; color: var(--f2-night-text); }
.f2-footer__band-inner > .f2-footer__legal:first-child { border-top: 0; }
.f2-footer__legal nav { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0 -6px; }
.f2-footer .f2-footer__legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; font-size: 13.5px; color: var(--f2-night-text); text-decoration: none; }
.f2-footer .f2-footer__legal a:hover { color: #fff; }
.f2-footer a:focus-visible { outline-offset: 3px; }
.f2-footer__band a:focus-visible, .f2-footer__band button:focus-visible { outline-color: var(--f2-rule); }
/* The gap above the footer is the page's bottom padding in the design (bde-site.js S.main:
   112 px on phones, 64 px compact, 72 px desktop), so a page's main adds none of its own. */
@media (min-width: 768px) { .f2-footer { margin-top: 64px; } }
@media (min-width: 1100px) { .f2-footer { margin-top: 72px; } }
/* The root draws its footer inside the page margins (9-1: the footer sits in the padded main,
   after the main's 30 / 48 px gap and above its 110 / 48 px bottom padding). */
.f2-footer.f2-footer--inset { max-width: calc(var(--f2-max) - 80px); margin: 30px 16px 110px; }
.f2-footer--inset .f2-footer__inner, .f2-footer--inset .f2-footer__band-inner { max-width: none; }
@media (min-width: 768px) { .f2-footer.f2-footer--inset { margin: 48px 40px; } }
@media (min-width: 1280px) { .f2-footer.f2-footer--inset { margin-inline: auto; } }
.f2-footer--inset ~ .f2-tabbar-space { display: none; }

/* ------------------------------------------------------------------ book card
 * The design's card (9-2 shelves and grids): cover 2:3 radius 14 on #F6EAE4 with the cover
 * shadow, the serif title 15.5 px on at most two lines, the author 13 px on one line, and an
 * "Audio" badge only when the book has audio. No count, no formats, no rating. */
.book-card.f2-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.book-card.f2-card:hover { border-color: transparent; }
.f2-card .f2-card__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);
}
.f2-card .f2-card__cover img, .f2-card .f2-card__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Owner 2026-10-16 (hybrid): every slot keeps its one size and a cover fills it, cut a little at
   its edges, as before. A cover that would lose 15% or more by filling (a landscape scan, a square
   audiobook cover) is marked data-fit="whole" by App\Modules\Media\CoverFit and shows whole, with
   white beside it, so nothing of it is lost. */
:is(.f2-card .f2-card__cover, .bkp .bkp-hero__cover, .bkp-author__cover, .bkp-rel__cover, .lsn .lsn-cover, .fl-series__cover, .fl-result__cover)[data-fit="whole"] > img:is(*, [width][height]) { object-fit: contain; background: #fff; }
.f2-card .f2-card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center;
  height: 24px; padding: 0 9px; border-radius: var(--f2-r-pill); background: #fff;
  color: var(--f2-audio-ink); font: 700 11.5px var(--f2-ui);
}
.book-card.f2-card .book-title.f2-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 10px; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto;
  font-family: var(--f2-serif); font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0;
  color: var(--f2-ink); text-decoration: none;
}
.book-card.f2-card .book-author.f2-card__author {
  margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--f2-ui); font-size: 13px; font-weight: 400; line-height: normal; color: var(--f2-muted);
}
.book-card.f2-card .book-title.f2-card__title:lang(bn) { line-height: 1.5; }
.book-card.f2-card .book-author.f2-card__author:lang(bn) { line-height: 1.6; }
/* One link: the title's, stretched over the card, so a reader meets the book once. */
.book-card.f2-card .book-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--f2-r-cover); }
.book-card.f2-card .book-card__link:focus-visible { outline: none; }
.book-card.f2-card .book-card__link:focus-visible::after { outline: 3px solid var(--f2-accent); outline-offset: 4px; }
.book-card.f2-card:hover .f2-card__title { color: var(--f2-link-hover); }

/* The house cover (.f2-house): a book with no cover, a cover that fails to load, or a book whose
   use_house_cover flag is set, drawn as the design's 5-3 cover in its book shell. All of it lives
   in house-cover.css (2026-10-03), loaded right after this file. */

/* ------------------------------------------------------------------ author avatar */
img.f2-avatar, img.f2-avatar[width][height] { display: block; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--f2-coral-tint); }
img.f2-avatar--sm, img.f2-avatar--sm[width][height] { width: 40px; height: 40px; }
img.f2-avatar--lg, img.f2-avatar--lg[width][height] { width: 96px; height: 96px; }
img.f2-avatar--xl, img.f2-avatar--xl[width][height] { width: 128px; height: 128px; }
/* A real author photo is rarely square (many are 220 px wide landscapes): crop towards the face, which sits in the upper part of a portrait. */
img.f2-avatar:not(.f2-avatar--drawn) { object-position: 50% 28%; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .f2-backdrop, .f2-sheet, .f2-drawer, .f2-langsheet { animation: none; }
  .f2-btn, .f2-chip, .f2-nav a, .f2-card .f2-card__cover, .f2-langbtn__chev, .f2-iconbtn, .f2-input, .f2-select, .f2-textarea { transition: none; }
  .book-card.f2-card:hover .f2-card__cover { transform: none; }
}

/* ------------------------------------------------------------------ public forms (2026-09-29)
 * The contact form, the newsletter signup and the page a post answers with. Built from the f2
 * field, button and status classes above; only layout and the few new parts live here. */
.pf-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pf-form__title { margin-bottom: -2px; }
.pf-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
.pf-summary { flex-direction: column; }
.pf-summary:focus { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.pf-summary__lead { margin: 0 0 4px; font-weight: 700; }
.pf-summary ul { margin: 0; padding-right: 18px; }
.pf-summary a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* The honeypot: off screen for people, still in the form for bots. */
.pf-trap { position: absolute !important; right: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pf-turnstile { min-height: 65px; }
.pf-turnstile:empty { min-height: 0; }
/* READER-1 (patch 1): why a send did not go out when the security check could not finish. */
.f2-turnstile-msg { margin-top: 8px; }
.pf-notice { margin: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.55; color: var(--f2-muted); text-wrap: pretty; }
.pf-notice a { color: var(--f2-coral); text-decoration: underline; text-underline-offset: 2px; }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pf-sending { font-size: 14px; font-weight: 600; color: var(--f2-sub); }
.pf-panel { box-sizing: border-box; }
.pf-panel--page { margin: 8px 0 24px; }
.pf-panel--inline { width: 100%; max-width: 520px; margin: 6px 0 0; text-align: right; }
.pf-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.pf-page { display: flex; flex-direction: column; gap: 20px; padding-top: 18px; padding-bottom: 48px; max-width: 820px; }
.pf-head { display: flex; flex-direction: column; gap: 12px; }
.pf-reason { margin: 0; }
html.bn .pf-notice { line-height: 1.8; }

/* the newsletter form */
.pf-news { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-news__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pf-news__field { flex: 1 1 220px; }
.pf-news__go { flex: 0 0 auto; min-height: 50px; }

/* ------------------------------------------------------------------ search suggestions
 * The listbox under a catalogue's search box (bde-f2.js). It opens inside the form, which is
 * never clipped (no overflow on the header or the search box). */
.f2-suggest-host { position: relative; }
.f2-suggest {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: var(--f2-z-popover);
  box-sizing: border-box; max-height: min(70vh, 480px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -18px rgba(80, 40, 25, .45);
  font-family: var(--f2-ui); text-align: right;
  animation: f2-fade .14s var(--f2-ease);
}
/* Anchored to the field's right edge and never wider than the screen less its 16 px gutters,
   so on a narrow screen the list stays inside the page (PM review 2026-10-02). */
.f2-hsearch .f2-suggest { right: auto; width: min(max(100%, 380px), calc(100vw - 32px)); }
/* Design 2-03: uppercase group headings, 56 px book rows (34 x 50 cover, one-line bold title, the
   author alone, an Audio pill), 52 px author rows (36 px round avatar, name, count on the right). */
.f2-suggest__head { padding: 6px 10px 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--f2-muted); }
.f2-suggest__head:not(:first-child) { padding-top: 8px; }
.f2-suggest__option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 14px;
  color: var(--f2-ink); cursor: pointer;
}
.f2-suggest__option--book { min-height: 56px; }
.f2-suggest__option:hover, .f2-suggest__option[aria-selected="true"] { background: var(--f2-soft); }
.f2-suggest__option[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--f2-coral); }
.f2-suggest__cover { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 50px; overflow: hidden; border-radius: 6px; background: var(--f2-loading); }
.f2-suggest__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f2-suggest__words { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.f2-suggest__title { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f2-suggest__title--author { flex: 1; min-width: 0; }
.f2-suggest__meta { font-size: 13px; color: var(--f2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f2-suggest__audio { flex: 0 0 auto; padding: 3px 8px; border-radius: 8px; background: #ECE9FF; color: #4B3CC9; font-size: 12px; font-weight: 700; }
.f2-suggest__lang { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--f2-line); border-radius: 8px; color: var(--f2-body); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.f2-suggest__avatar { display: block; flex: 0 0 36px; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: #ECE9FF; }
.f2-suggest__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.f2-suggest__count { flex: 0 0 auto; font-size: 13px; color: var(--f2-muted); }
.f2-suggest__option--all { justify-content: center; min-height: 48px; margin-top: 4px; border-top: 1px solid var(--f2-line); border-radius: 0 0 14px 14px; color: var(--f2-coral); font-weight: 700; font-size: 14.5px; }
html.bn .f2-suggest__title, .f2-suggest__title:lang(bn) { line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .f2-suggest { animation: none; } }
.pf-book { margin: 0; }

/* An author card's italic "known for" line (design 2-01 Popular authors, p.known): the title of the
   book the author is best known for, on one line, cut with an ellipsis. Hidden when there is none. */
.f2-known { display: block; max-width: 100%; margin-top: 3px; font-family: var(--f2-serif); font-size: 13.5px; font-style: italic; font-weight: 400; line-height: 1.35; color: #4E423D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f2-known:lang(bn) { font-family: 'Noto Serif Bengali', var(--f2-serif); font-style: normal; }

/* ================================================================ final design, 3 Oct 2026 (second drop) */
/* The one hero background every home shares (changelog "Hero background ... one shared gradient"):
   the root hero (9-4) and every language home hero (9-2) carry this class; the closing root band
   and the footer stay flat Night. The two blurred glow blobs the language hero drew are gone. */
.bde-hero-bg {
  background: radial-gradient(60% 85% at 100% 0%, rgba(91, 75, 219, .55) 0%, rgba(91, 75, 219, 0) 70%),
    radial-gradient(55% 75% at 22% 112%, rgba(201, 64, 31, .45) 0%, rgba(201, 64, 31, 0) 70%),
    linear-gradient(-160deg, #2A2350 0%, #241D48 55%, #1E183B 100%);
  background-color: #2A2350;
}

/* "Your book, your say." (partials/rights-band; 9-4 h-rights, 9-2 h-en-rights): the white card with
   the copy on the left and the three-step list on the right, the design's values. Shared by the root
   and every language home, so it lives here, not in a page family. Contrast: #4E423D on white 9.4:1,
   #5C4F4A on #FFF9F6 7.4:1, coral #C9401F on white 4.96:1. */
.bde-rights {
  box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(22px, 4vw, 48px);
  border-radius: clamp(26px, 3.5vw, 36px); background: #FFFFFF; border: 1px solid #F3E3DC; color: #221A17;
}
.bde-rights__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bde-rights__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #C9401F; }
.bde-rights .bde-rights__title { margin: 0; font-family: var(--f2-display); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; font-weight: 800; letter-spacing: -.6px; color: #221A17; text-wrap: balance; }
.bde-rights .bde-rights__title:lang(bn) { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
.bde-rights .bde-rights__text { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: #4E423D; text-wrap: pretty; }
.bde-rights .bde-rights__text:lang(bn) { line-height: 1.8; }
.bde-rights__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
a.bde-rights__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 16px;
  background: #C9401F; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background-color .16s var(--f2-ease);
}
a.bde-rights__btn:hover { background: #A8361A; color: #fff; }
a.bde-rights__btn svg { flex: 0 0 auto; }
a.bde-rights__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: #C9401F; text-decoration: none; }
a.bde-rights__link:hover { color: #A8361A; }
.bde-rights a:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.bde-rights__steps {
  box-sizing: border-box; margin: 0; padding: clamp(18px, 2.6vw, 28px); list-style: none; display: flex; flex-direction: column; gap: 0;
  border-radius: 24px; background: #FFF9F6; border: 1px solid #F3E3DC; min-width: 0;
}
.bde-rights__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.bde-rights__rail { display: flex; flex-direction: column; align-items: center; }
.bde-rights__mark {
  box-sizing: border-box; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #FFFFFF; border: 1.5px solid #EBD6CC; color: #C9401F;
}
.bde-rights__mark--time {
  width: 44px; height: 44px; margin: -2px; border: 0; background: #C9401F; color: #fff;
  font-family: var(--f2-display); font-size: 13px; font-weight: 800; letter-spacing: -.2px;
}
.bde-rights__line { flex: 1; width: 2px; min-height: 18px; background: #EBD6CC; }
.bde-rights__step-text { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 20px; min-width: 0; }
.bde-rights__step:last-child .bde-rights__step-text { padding-bottom: 0; }
.bde-rights__step-text b { font-size: 16px; color: #221A17; }
.bde-rights__step-text b:lang(bn) { line-height: 1.45; }
.bde-rights .bde-rights__step-text > span { font-size: 14.5px; line-height: 1.55; color: #5C4F4A; }
@media (prefers-reduced-motion: reduce) { a.bde-rights__btn { transition: none; } }

/* Right-to-left only (Hebrew, 2026-11-10): appended to public/css/rtl/bde-f2.css by tools/build-rtl-css.mjs.
   Never loaded on a left-to-right page. */

/* Icons that point along the reading direction turn round. Play, skip and the logo stay as drawn. */
.bde-flip,
.fh-chev { transform: scaleX(-1); }

/* Hebrew is drawn by the reader's own system face (no self-hosted Hebrew file): Hebrew-capable system
   fonts come right after the Latin web fonts, so Latin words keep the design's faces. */
html[lang="he"] {
  --f2-ui: 'DM Sans', 'Arial Hebrew', 'Noto Sans Hebrew', 'Segoe UI', Arial, system-ui, sans-serif;
  --f2-display: 'Outfit', 'Arial Hebrew', 'Noto Sans Hebrew', 'Segoe UI', Arial, system-ui, sans-serif;
  --f2-serif: 'BDe Serif', 'Noto Serif Hebrew', 'Frank Ruehl CLM', 'Times New Roman', serif;
}
/* Tracking spoils Hebrew letter shapes; Hebrew headings sit a little looser. */
html[lang="he"] :is(.f2-h1, .f2-h2, h1, h2) { letter-spacing: 0; }
html[lang="he"] :is(.f2-prose, .f2-lede) { line-height: 1.8; }