/* Edgepedia Books (api/books.js, api/pages/books.html; 2026-11-11): the Edgepedia front page's look (edgepedia-home.html), for the
   Books home, a shelf, and a book. The tree board's own look is assets/edgepedia-theme.css; .bkLive fits it into the card as
   assets/tabs/edgepedia-home-tree.css fits the articles' board. */
:root { --ink: #1E1A17; --dim: #6F655C; --soft: #8A7E72; --rust: #B0501C; --amber: #F0A766; --cream: #F7F5F1; --line: #F1E1D2; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Geist', 'Helvetica Neue', -apple-system, sans-serif; }
a { color: inherit; }
.bkSr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bk { display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 1440px; margin: 0 auto; background: radial-gradient(ellipse 60% 50% at 80% 8%, rgba(240,180,130,.18), rgba(240,180,130,0)), var(--cream); overflow-x: clip; }
.bkMain { flex: 1; padding: 28px 64px 56px; }

/* the home: the tree card at two thirds, the Random book and release cards on the right */
.bkWrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; height: clamp(560px, calc(100vh - 300px), 780px); }
.bkTree { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 50% 40% at 25% 60%, rgba(240,167,102,.10), rgba(240,167,102,0) 70%), #1B1A19; color: #EDE7DE; box-shadow: 0 50px 90px -50px rgba(40,30,20,.6); }
.bkHead { display: flex; align-items: center; gap: 0; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.07); min-height: 66px; }
.bkName { flex: none; font-size: 14.5px; font-weight: 600; color: var(--amber); text-decoration: none; }
.bkPath { flex: 1 1 auto; min-width: 0; display: flex; }
.bkPath .ep-tree-breadcrumbs { height: auto; min-width: 0; padding: 0; border: 0; background: transparent; gap: 8px; }
.bkPath .ep-tree-breadcrumbs button { padding: 4px 0; font: 500 13px/1.4 'Geist', 'Helvetica Neue', sans-serif; color: #bdb6ac; }
.bkPath .ep-tree-breadcrumbs button:first-of-type { font-size: 14.5px; font-weight: 600; color: var(--amber); }
.bkPath .ep-tree-breadcrumbs span { color: rgba(237,231,222,.35); }
.bkHead:has(.bkPath .ep-tree-breadcrumbs) .bkName { display: none; }
.bkPath .ep-tree-breadcrumbs button[aria-current] { color: #ffad69; }
.bkSearch { position: relative; flex: 0 1 28%; min-width: 220px; margin: 0 18px 0 auto; display: flex; align-items: center; }
.bkSearch svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: rgba(237,231,222,.55); pointer-events: none; }
.bkQ { width: 100%; height: 36px; margin: 0; padding: 0 12px 0 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: #22201E; color: #EDE7DE; font: 500 13.5px 'Geist', 'Helvetica Neue', sans-serif; outline: none; -webkit-appearance: none; appearance: none; }
.bkQ::placeholder { color: rgba(237,231,222,.5); opacity: 1; }
.bkQ:hover { border-color: rgba(240,167,102,.35); }
.bkQ:focus { border-color: rgba(240,167,102,.55); box-shadow: 0 0 0 3px rgba(240,167,102,.14); }
.bkQ::-webkit-search-cancel-button { filter: invert(1) opacity(.55); }
.bkMode { flex: none; display: flex; padding: 4px; border-radius: 12px; background: #22201E; border: 1px solid rgba(255,255,255,.08); }
.bkMode a { padding: 6px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: #EDE7DE; text-decoration: none; }
.bkMode a[aria-current="true"] { background: var(--amber); }
.bkMode a:not([aria-current="true"]):hover { color: #ffad69; }
.bkBody { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* before the board draws (and for a reader without scripts): the root shelves of both trees as links */
.bkStatic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px; overflow: auto; }
.bkStatic b { display: block; margin-bottom: 10px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.bkStatic ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bkStatic a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #262422; border: 1px solid rgba(255,255,255,.09); color: #EDE7DE; text-decoration: none; font-size: 14px; }
.bkStatic a span { color: rgba(237,231,222,.6); font-size: 12px; }
.bkStatic a:hover { border-color: var(--amber); }
.bkBody.is-live .bkStatic { display: none; }

/* the board (assets/edgepedia-tree.js) filling the card under its header; its path sits in the header */
.bkLive { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.bkLive.is-ready { opacity: 1; pointer-events: auto; }
.bkLive.ep-tree { height: auto; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.bkLive > .ep-tree-head { display: none; }
.bkLive .ep-tree-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.bkLive.is-dragging .ep-tree-svg { cursor: grabbing; }
.bkLive .ep-tree-node { cursor: pointer; outline: none; }
.bkLive .ep-tree-label { font: 550 12.5px Geist, 'Helvetica Neue', -apple-system, sans-serif; pointer-events: none; }
.bkLive .ep-tree-count { font: 500 10.5px Geist, 'Helvetica Neue', -apple-system, sans-serif; pointer-events: none; }
.bkLive .ep-tree-chevron { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bkLive > .ep-tree-bar { display: none; }                         /* as the front page's board: no zoom, fit, or full-screen bar */
.bkLive .ep-tree-failed { padding: 18px 20px; font-size: 14px; }

/* the panel over the board: search results, or one shelf's books */
.bkPanel { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #1B1A19; }
.bkPanel[hidden] { display: none; }
.bkPanelHd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.bkPanelHd h2 { margin: 0; font-size: 15px; font-weight: 600; color: #EDE7DE; flex: 1 1 auto; min-width: 0; }
.bkPanelHd h2 small { font-weight: 500; color: rgba(237,231,222,.6); font-size: 13px; margin-left: 6px; }
.bkPanelHd a { color: #ffad69; font-size: 13px; text-decoration: none; }
.bkShow { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #22201E; border: 1px solid rgba(255,255,255,.08); }
.bkShow button { border: 0; background: transparent; color: #EDE7DE; font: 600 12.5px 'Geist', sans-serif; padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.bkShow button[aria-pressed="true"] { background: var(--amber); color: #2A1A0E; }
.bkClose { flex: none; border: 1px solid rgba(255,255,255,.12); background: #22201E; color: #EDE7DE; font: 600 13px 'Geist', sans-serif; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
.bkClose:hover { border-color: var(--amber); color: #ffad69; }
.bkPanelBody { flex: 1; min-height: 0; overflow: auto; padding: 8px 22px 22px; }
.bkPanelBody p.bkNone { color: rgba(237,231,222,.7); font-size: 14px; }
.bkPanel .bkKids { margin: 12px 0 4px; }
.bkPanel .bkKids a { background: #262422; border-color: rgba(255,255,255,.09); color: #EDE7DE; }
.bkPanel .bkKids a span { color: rgba(237,231,222,.6); }
.bkPanel .bkRow { border-color: rgba(255,255,255,.07); }
.bkPanel .bkRowT b { color: #F3EEE6; }
.bkPanel .bkRowT i, .bkPanel .bkRowM { color: rgba(237,231,222,.62); }
.bkPanel .bkRowB { color: rgba(237,231,222,.5); }
.bkPanel .bkChips a, .bkPanel .bkChips button { background: #22201E; border-color: rgba(255,255,255,.1); color: #EDE7DE; }
.bkPanel .bkChips button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #2A1A0E; }
.bkMore { display: block; margin: 14px auto 0; border: 1px solid rgba(255,255,255,.12); background: #22201E; color: #EDE7DE; font: 600 13px 'Geist', sans-serif; padding: 8px 16px; border-radius: 10px; cursor: pointer; }

/* a book row (the panel, a shelf page): title, author and year, language chips */
.bkRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid #EFE4D8; }
.bkRowT { min-width: 0; text-decoration: none; }
.bkRowT b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.bkRowT i { font-style: normal; margin-left: 8px; color: var(--dim); font-size: 13.5px; }
.bkRowT:hover b { color: var(--rust); }
.bkRowM { grid-column: 1; font-size: 13.5px; color: var(--dim); }
.bkRowB { grid-column: 1; min-width: 0; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkRow .bkChips { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.bkChips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bkChips a, .bkChips button { font: 600 11.5px/1.2 'Geist', 'Helvetica Neue', sans-serif; cursor: pointer; }
.bkChips a { font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 7px; border: 1px solid #EADFD3; background: #fff; color: var(--ink); text-decoration: none; line-height: 1.2; }
.bkChips button { padding: 3px 7px; border-radius: 7px; border: 1px solid #EADFD3; background: #fff; color: var(--ink); }
.bkChips a:hover, .bkChips button:hover { border-color: var(--amber); color: var(--rust); }
.bkChips a[aria-current], .bkChips button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #2A1A0E; }

/* the cards on the right */
.bkSide { display: flex; flex-direction: column; gap: 20px; min-width: 0; min-height: 0; }
.bkCard { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, #FFF6EE, #FFFFFF 70%); color: var(--ink); text-decoration: none; min-height: 0; }
.bkCardHd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bkCardHd b { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.bkRand { flex: 1 1 auto; overflow: hidden; }
.bkDice { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #EADFD3; background: #FFF; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.bkDice svg { width: 20px; height: 20px; }
.bkDice:hover { transform: rotate(90deg); }
.bkDice.rolling { transform: rotate(360deg); }
/* the Random book card: title (the front page's random title), author and year, the blurb (its lead's text), then the language tags,
   which switch the card in place, and Read */
.bkRandBody { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.bkRandLink { display: block; color: inherit; text-decoration: none; }
.bkRandLink strong { display: block; font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.bkRandLink:hover strong { color: var(--rust); }
.bkRandBy { display: block; margin-top: 6px; font-size: 15px; color: var(--dim); }
.bkRandBlurb { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.bkRandBody[lang="zh"] .bkRandBlurb, .bkRandBlurb[lang="zh"] { line-height: 1.75; }
.bkRandFoot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bkTags { display: flex; flex-wrap: wrap; gap: 5px; }
.bkTags button { font: 600 12px/1.2 'Geist', 'Helvetica Neue', sans-serif; padding: 5px 9px; border-radius: 8px; border: 1px solid #EADFD3; background: #fff; color: var(--ink); cursor: pointer; }
.bkTags button:hover { border-color: var(--amber); color: var(--rust); }
.bkTags button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #2A1A0E; }
.bkRead { flex: none; font-size: 14px; font-weight: 600; color: var(--rust); text-decoration: none; }
.bkRead:hover { text-decoration: underline; }
/* the release card, "New in Edgepedia Books x.y.z" (2026-11-11): the front page's release card (.epNews), fed from Books' own log */
.bkCardHd time { font-size: 12.5px; color: var(--soft); }
.bkNews { flex: none; }
.bkNews span { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.bkNews em { font-style: normal; font-size: 13.5px; color: var(--soft); }
.bkNews:hover span { color: var(--rust); }
/* a shelf page and a book page */
.bkPage, .bkBook { max-width: 900px; }
.bkCrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--soft); }
.bkCrumbs a { color: var(--dim); text-decoration: none; }
.bkCrumbs a:hover { color: var(--rust); }
.bkCrumbs i { font-style: normal; color: #C9BDB0; }
.bkCrumbs [aria-current] { color: var(--ink); font-weight: 600; }
.bkPageHd h1, .bkPage > h1 { margin: 14px 0 6px; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.bkPageHd p { margin: 0 0 18px; color: var(--dim); font-size: 15px; }
.bkPage > p { color: var(--dim); }
.bkKids { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bkKids a { display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 14px; border-radius: 999px; border: 1px solid #EADFD3; background: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
.bkKids a span { font-weight: 500; font-size: 12.5px; color: var(--soft); }
.bkKids a:hover { border-color: var(--amber); color: var(--rust); }
.bkList { border-top: 1px solid #EFE4D8; }
.bkPager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; color: var(--dim); }
.bkPager a { color: var(--rust); text-decoration: none; font-weight: 600; }

/* a book (Dave 2026-11-11): the book on the left, 40% (the cover, title, author, year, languages, blurb, license, and shelf
   paths, scrolling on its own when it runs long), the reader on the right, 60%, its pages fitting the window under the header.
   --bk-top is the header's height, which assets/edgepedia-books.js measures; the window's height is written as the laptop fit
   asks (calc(100vh / var(--fit-zc, 1))). */
html[data-view="book"] .bkMain { padding: 22px 64px 28px; }
.bkBook { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 44px; height: calc(100vh / var(--fit-zc, 1) - var(--bk-top, 90px) - 50px); min-height: 540px; max-width: none; margin: 0; }
.bkLeft { min-width: 0; min-height: 0; overflow: auto; padding: 4px 8px 12px 0; scrollbar-width: thin; }
.bkCover { position: relative; height: clamp(220px, calc(42vh / var(--fit-zc, 1)), 400px); aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: linear-gradient(155deg, var(--c2, #B0501C), var(--c1, #7A3417)); box-shadow: 0 26px 40px -24px rgba(40,30,20,.6), 0 2px 6px rgba(40,30,20,.12); }
.bkCover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.bkCover img.is-on { opacity: 1; }                             /* shown once it has loaded: a missing cover never draws a broken image */
/* the stand-in while a book has no cover yet: its title and author on a colored panel inside a thin frame */
.bkCoverAlt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 16% 13%; text-align: center; color: #F7EFE4; }
.bkCoverAlt::before { content: ''; position: absolute; inset: 5.5%; border: 1px solid rgba(247,239,228,.38); border-radius: 3px; pointer-events: none; }
.bkCoverAlt b { font: 600 22px/1.22 Georgia, 'Times New Roman', serif; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.bkCoverAlt i { flex: none; width: 34px; height: 1px; background: rgba(247,239,228,.6); }
.bkCoverAlt span { font: 500 13.5px/1.35 'Geist', 'Helvetica Neue', sans-serif; letter-spacing: .04em; opacity: .88; }
.bkId h1 { margin: 22px 0 4px; font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.bkBookEn { margin: 0 0 4px; font-size: 17px; color: var(--dim); }
.bkId h1[dir="rtl"] { text-align: left; }                    /* an Arabic title lines up with the column, as the rest of it does */
.bkBookBy { margin: 4px 0 14px; font-size: 16.5px; color: var(--ink); }
.bkLangs { display: flex; flex-wrap: wrap; gap: 8px; }
.bkLangs a { padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(30,26,23,.14); background: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; font-weight: 600; }
.bkLangs a:hover { border-color: var(--amber); color: var(--rust); }
.bkLangs a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bkBlurb { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--dim); }
.bkLicLine { margin: 12px 0 0; font-size: 13px; color: var(--soft); }
.bkShelves { margin: 12px 0 0; display: grid; gap: 6px; font-size: 13.5px; }
.bkShelves div { display: flex; gap: 10px; align-items: baseline; }
.bkShelves dt { flex: none; width: 46px; color: var(--soft); font-weight: 600; }
.bkShelves dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.bkShelves a { color: var(--dim); text-decoration: none; }
.bkShelves a:hover { color: var(--rust); }
.bkShelves i { font-style: normal; color: #C9BDB0; }

/* the reader: the bar (where in the book, the page count, Contents), the page, and the slider between previous and next */
.bkReader { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--line); background: #FFFDF9; box-shadow: 0 34px 60px -44px rgba(40,30,20,.4); }
.bkReaderBar { position: relative; z-index: 5; display: flex; align-items: center; gap: 16px; min-height: 46px; padding: 12px 26px 0; font-size: 13px; color: var(--soft); }
.bkWhere { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkCount { flex: none; font-variant-numeric: tabular-nums; color: var(--dim); }
.bkReaderBar > button { flex: none; color: var(--rust); font: 600 13.5px 'Geist', sans-serif; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.bkToc { position: absolute; top: calc(100% + 6px); left: 16px; right: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(42,36,31,.14); max-height: min(440px, 62vh); overflow: auto; columns: 2 220px; column-gap: 28px; }
.bkToc a { display: block; padding: 3px 0; font-size: 14px; color: var(--dim); text-decoration: none; break-inside: avoid; }
.bkToc a:hover, .bkToc a[aria-current] { color: var(--rust); }
.bkPageBox { position: relative; flex: 1 1 auto; min-height: 0; touch-action: pan-y; }
.bkClip { position: absolute; inset: 16px 48px 8px; overflow: hidden; }
.bkMeasure { visibility: hidden; pointer-events: none; }
/* one chunk of the book in one column the size of the page; the columns it overflows into are the next pages, and a chapter
   heading always starts one (assets/edgepedia-books.js moves the strip a page at a time) */
.bkClip > .bkText { height: 100%; column-count: 1; column-gap: 48px; column-fill: auto; }
.bkText { font-size: 18px; line-height: 1.7; color: #2A241F; overflow-wrap: break-word; }
.bkText p { margin: 0 0 1em; }
.bkText p.bkVerse { white-space: pre-line; }
.bkText h2 { break-before: column; margin: 0 0 .9em; padding-top: .9em; font-size: 22px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.bkText[lang="zh"] { line-height: 1.85; }
.bkText[dir="rtl"] { line-height: 1.9; }
.bkLoading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--soft); font-size: 14.5px; }
.bkLoading[hidden] { display: none; }
.bkLoading button { margin-top: 10px; border: 1px solid #EADFD3; background: #fff; border-radius: 10px; padding: 7px 14px; font: 600 13.5px 'Geist', sans-serif; color: var(--rust); cursor: pointer; }
.bkNav { display: flex; align-items: center; gap: 14px; padding: 6px 22px 14px; }
.bkTurn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid #EADFD3; background: #fff; color: var(--ink); cursor: pointer; }
.bkTurn svg { width: 18px; height: 18px; }
.bkTurn:hover:not(:disabled) { border-color: var(--amber); color: var(--rust); }
.bkTurn:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .bkTurn svg { transform: scaleX(-1); }   /* right to left, "previous" sits on the right and points right */
.bkSlider { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: var(--rust); cursor: pointer; }
.bkSlider:disabled { cursor: default; }

/* the footer, as the front page's */
.bkFoot { margin-top: auto; }
.bkFootIn { background: #1C1A18; border-radius: 48px 48px 0 0; padding: 44px 72px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; color: #F3E9DC; }
.bkFootWord { font-weight: 600; font-size: 30px; letter-spacing: -.04em; color: #F3E9DC; text-decoration: none; }
.bkFootIn nav { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.bkFootIn nav a { color: #F3E9DC; text-decoration: none; font-size: 15px; }
.bkFootIn nav a:hover { color: var(--amber); }
.bkCopy { flex-basis: 100%; font-size: 13px; color: rgba(243,233,220,.62); }

@media (min-width: 1024px) { .bk { min-width: 1100px; } }        /* the front page's #top: its desktop layout is drawn for 1100px and up */
@media (max-width: 1023px) {
  .bkMain { padding: 28px 16px 32px; }
  .bkWrap { display: flex; flex-direction: column; height: auto; min-height: 620px; }
  .bkTree { flex: none; min-height: 620px; }
  .bkMode a { display: inline-flex; align-items: center; min-height: 44px; }
  .bkQ { height: 44px; }
  .bkStatic { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .bkPanelHd { padding: 12px 14px; }
  .bkPanelBody { padding: 4px 14px 18px; }
  .bkFootIn { padding: 32px 20px 24px; border-radius: 28px 28px 0 0; }
}
/* a book on a phone or a narrow window: the cover small beside the title, author, and languages, then the reader across the
   width (sized so its slider is on the first screen: --bk-rtop is where the reader starts), then the blurb, license, and shelves */
@media (max-width: 759px) {
  html[data-view="book"] .bkMain { padding: 16px 16px 28px; }
  .bkBook { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "cover id" "reader reader" "about about"; gap: 16px 14px; height: auto; min-height: 0; }
  .bkLeft { display: contents; }
  .bkCover { grid-area: cover; align-self: start; width: 92px; height: auto; border-radius: 6px; box-shadow: 0 12px 20px -12px rgba(40,30,20,.55); }
  .bkCoverAlt { gap: 6px; padding: 14% 10%; }
  .bkCoverAlt b { font-size: 11px; -webkit-line-clamp: 5; }
  .bkCoverAlt i { width: 18px; }
  .bkCoverAlt span { font-size: 8.5px; letter-spacing: .02em; }
  .bkId { grid-area: id; min-width: 0; }
  .bkId h1 { margin: 0 0 2px; font-size: 22px; }
  .bkBookEn { font-size: 14px; margin: 0; }
  .bkBookBy { margin: 2px 0 8px; font-size: 14px; }
  .bkLangs { gap: 5px; }
  .bkLangs a { padding: 5px 10px; font-size: 12.5px; }
  .bkReader { grid-area: reader; height: max(420px, calc(100svh - var(--bk-rtop, 250px) - 12px)); border-radius: 18px; }
  .bkAbout { grid-area: about; }
  .bkBlurb { margin-top: 4px; }
  .bkReaderBar { gap: 10px; padding: 10px 16px 0; min-height: 40px; font-size: 12.5px; }
  .bkClip { inset: 12px 20px 6px; }
  .bkText { font-size: 17px; }
  .bkNav { gap: 10px; padding: 6px 12px 12px; }
  .bkTurn { width: 40px; height: 40px; }
}
@media (max-width: 599px) {
  .bkTree { border-radius: 24px; }
  .bkHead { flex-wrap: wrap; gap: 12px 10px; padding: 14px 16px; }
  .bkSearch { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; }
  .bkQ { font-size: 16px; }
}
@media (max-width: 560px) {
  .bkRow { grid-template-columns: minmax(0, 1fr); }
  .bkRow .bkChips { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .bkRowT i { display: block; margin: 2px 0 0; }
  .bkShelves div { flex-direction: column; gap: 2px; }
  .bkFootWord { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .bkDice, .bkLive { transition: none; } }

/* the page's click halves (2026-11-11): an arrow cursor shows which way a click turns */
#bkPageBox.bkGoR { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='white' fill-opacity='.92' stroke='%23c96f2a' stroke-width='2'/%3E%3Cpath d='M9 16h14M17 10l6 6-6 6' fill='none' stroke='%23c96f2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize; }
#bkPageBox.bkGoL { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='white' fill-opacity='.92' stroke='%23c96f2a' stroke-width='2'/%3E%3Cpath d='M23 16H9M15 10l-6 6 6 6' fill='none' stroke='%23c96f2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize; }