.hero.books-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-block: 12px; }
.books-page { padding-top: 16px; }
.books-page .breadcrumbs { padding-block: 8px; }
.books-hero h1 { margin: 0; }
.audiobooks-page .books-hero { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 8px; }
.audiobooks-page .books-hero .eyebrow { display: block; }
.book-catalogue-switch { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.book-catalogue-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; border-radius: 999px; font-size: .9375rem; text-decoration: none; color: var(--muted); }
.book-catalogue-switch a[aria-current="page"] { background: var(--ink); color: var(--canvas); }
.book-catalogue-switch a:hover { color: var(--ink); background: var(--canvas); }
.book-catalogue-switch a[aria-current="page"]:hover { background: var(--ink); color: var(--canvas); }
.book-catalogue-switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.books-page > .book-method { border-top: 1px solid var(--line); margin-block: 24px; padding-top: 8px; }
.book-method summary { display: flex; align-items: center; gap: 8px; min-height: 44px; width: fit-content; }
.book-method summary::before { content: '+'; font-size: 1rem; }
.book-method[open] summary::before { content: '−'; }
.book-method .lede-full { display: block; font-size: 1rem; }
.book-method p { max-width: 76ch; }
.book-method a { display: inline-flex; align-items: center; min-height: 44px; }
.book-toolbar { position: relative; padding: 18px 0 16px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; gap: 12px 20px; }
.book-toolbar .catalog-search { position: relative; flex-basis: 24rem; }
.book-toolbar .catalog-search input { min-height: 48px; border-radius: 10px; padding-right: 52px; background: var(--surface); }
#books-clear { position: absolute; right: 2px; top: 2px; height: 44px; width: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
#books-clear:hover { background: var(--canvas); color: var(--ink); }
.book-toolbar .catalog-filters { gap: 12px; }
.book-toolbar .catalog-filters label { font-size: .75rem; }
.book-toolbar .catalog-filters select { min-height: 48px; border-radius: 10px; background: var(--canvas); }
.book-toolbar .books-sort-note { font-size: .75rem; color: var(--muted); }
.book-toolbar .status-line:not(.sr-only) { flex: 1 1 auto; margin: 0; font-size: .875rem; color: var(--muted); }
.books-audio-chip { gap: 8px; min-height: 48px; border-radius: 999px; padding-inline: 16px; cursor: pointer; font-family: inherit; }
.books-audio-chip .icon { flex: none; }
.books-audio-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.books-audio-chip[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
#books-grid .tag--audio { white-space: nowrap; }
.books-reset { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); color: var(--ink); cursor: pointer; }
.books-reset:hover { background: var(--surface); }
.book-toolbar .books-load-state { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: .8125rem; }
.books-recovery { display: flex; justify-content: center; gap: 12px; }
.books-recovery:has(> :not([hidden])) { margin-bottom: 24px; }
#books-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(11.5rem, calc((100% - 140px) / 6))), 1fr)); gap: 32px 28px; margin-top: 28px; }
#books-grid .book-card { min-width: 0; gap: 8px; border-radius: 8px; }
#books-grid .book-cover { border-radius: 7px; box-shadow: 0 3px 8px rgb(0 0 0 / .08); transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms; }
#books-grid .book-card-title { font-size: 1.0625rem; line-height: 1.35; }
#books-grid .book-card-meta { font-size: .875rem; line-height: 1.5; }
#books-grid .tag-row { gap: 6px; }
#books-grid .tag { font-size: .75rem; border-radius: 5px; padding: 3px 6px; }
#books-grid .cover-fallback { padding: 18px; border-left-width: 2px; }
#books-grid .cover-fallback .cover-title { font-size: 1.125rem; }
#books-grid .book-card:focus-visible .book-cover { transform: translateY(-4px); box-shadow: 0 10px 22px rgb(0 0 0 / .16); }
@media (hover: hover) and (pointer: fine) {
  #books-grid .book-card:hover .book-cover { transform: translateY(-4px); box-shadow: 0 10px 22px rgb(0 0 0 / .16); }
  #books-grid .book-card:active .book-cover { transform: translateY(-1px); }
}
@media (min-width: 1000px) {
  .hero.books-hero { padding-block: 12px; }
  .book-toolbar { padding-block: 12px; gap: 8px 20px; margin-bottom: 0; }
}
@media (max-width: 40rem) {
  .hero.books-hero { padding-block: 16px 12px; }
  .book-catalogue-switch a { padding-inline: 16px; }
  .book-toolbar { padding-block: 12px; gap: 8px; flex-direction: row; }
  .book-toolbar .catalog-search { flex: 1 1 calc(100% - 105px); width: auto; }
  .books-filters-toggle { flex: 0 0 auto; min-height: 48px; border-radius: 10px; }
  .book-toolbar .catalog-filters { width: 100%; }
  .book-toolbar .status-line:not(.sr-only) { flex: 1 1 100%; }
  #books-grid { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 22px 12px; margin-top: 20px; }
  #books-grid .book-card-title { font-size: .9375rem; }
  #books-grid .book-card-meta { font-size: .8125rem; }
  #books-grid .cover-fallback { padding: 10px; }
  #books-grid .cover-fallback .cover-title { font-size: .9375rem; }
  #books-grid .tag-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #books-grid .book-cover { transition: none; }
  #books-grid .book-card:is(:hover, :focus-visible, :active) .book-cover { transform: none; }
}

.book-detail { width: min(56rem, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 24px; overscroll-behavior: contain; animation: book-preview-enter 160ms ease-out; }
#book-detail-body, #book-detail-body.has-discussion { display: flex; flex-direction: column; gap: 24px; }
#book-detail-body.has-discussion > .book-detail-main, #book-detail-body.has-discussion > .book-comments-section { max-height: none; overflow-y: visible; }
.book-detail-main { gap: 24px; }
.book-detail-close { position: sticky; inset: auto; top: 0; display: flex; align-items: center; justify-content: center; margin: -8px 0 8px auto; width: 44px; height: 44px; z-index: 4; }
.book-preview-hero { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 24px; }
.book-preview-cover { min-width: 0; }
.book-preview-cover > .book-cover { display: block; }
.book-art-credit { margin: 6px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.book-art-credit a { color: inherit; text-underline-offset: .15em; }
.book-preview-hero .book-cover { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / .12); }
.book-preview-copy { display: flex; flex-direction: column; align-items: start; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
#book-detail-body .book-preview-copy h2 { margin: 0; font-size: 2rem; line-height: 1.2; }
.book-preview-copy p { margin: 0; }
.book-preview-byline { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; }
.book-preview-byline > p { min-width: 0; }
.book-preview-license { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.book-preview-license:is(:hover, :focus-visible) { background: var(--surface); color: var(--ink); }
.book-preview-license:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.book-preview-license-tip { position: absolute; left: 0; top: 100%; z-index: 5; max-width: 100%; width: max-content; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: var(--canvas); font: 400 .8125rem/1.4 var(--sans); text-align: left; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; }
.book-preview-license:is(:hover, :focus-visible) .book-preview-license-tip { visibility: visible; opacity: 1; }
.book-preview-copy .book-detail-action { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0; }
#book-detail-body .book-detail-action > .button { flex: 0 1 auto; min-height: 44px; width: fit-content; max-width: 100%; padding: 8px 14px; border-radius: 8px; font-size: .875rem; line-height: 1.4; }
.book-preview-copy .book-detail-action > :not(.button) { flex-basis: 100%; }
.book-preview-copy .book-audio-line { font-size: .8125rem; }
.book-preview-tools { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; }
.book-preview-tools > * { margin: 0; }
.book-preview-tools .book-options-btn, .book-preview-tools .button { min-height: 44px; padding: 8px 12px; font-size: .875rem; }
.book-preview-tools .book-options-hint { font-size: .75rem; }
.book-preview-facts { border-top: 1px solid var(--line); padding-top: 8px; }
.book-preview-facts > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: .875rem; color: var(--muted); }
.book-preview-chevron { flex-shrink: 0; transition: transform 160ms ease-out; }
.book-preview-facts[open] .book-preview-chevron { transform: rotate(180deg); }
.book-preview-facts > p { margin-block: 12px; }
#book-detail-body.has-discussion > .book-comments-section { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 0; }
.book-related { border-top: 1px solid var(--line); padding-top: 16px; }
#book-detail-body .book-related h3 { margin: 0 0 16px; font: 600 1rem/1.4 var(--sans); }
.book-related-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max(7rem, calc((100% - 80px) / 6)); gap: 16px; overflow-x: auto; padding: 4px 4px 8px; scroll-snap-type: x proximity; }
.book-related-grid .book-card { gap: 6px; min-width: 0; }
.book-related-grid .book-cover { border-radius: 6px; transition: transform 160ms ease-out; }
.book-related-grid .cover-fallback { padding: 10px; }
.book-related-grid .cover-title { font-size: .875rem; }
.book-related-grid .book-card-title { font-size: .875rem; overflow-wrap: anywhere; }
.book-related-grid .book-card-meta, .book-related-reason { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.book-related-grid .tag-row, .book-related-grid .book-card > .tag { display: none; }
.book-related-link:focus-visible .book-cover { transform: translateY(-3px); }
.book-related-link { scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) { .book-related-link:hover .book-cover { transform: translateY(-3px); } }
@keyframes book-preview-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 40rem) {
  .book-detail { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  .book-preview-hero { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; }
  #book-detail-body .book-preview-copy h2 { font-size: 1.375rem; }
  .book-preview-copy { gap: 8px; }
  .book-related-grid { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .book-detail { animation: none; }
  .book-related-grid .book-cover { transition: none; }
  .book-preview-license-tip { transition: none; }
  .book-preview-chevron { transition: none; }
  .book-related-link:is(:hover, :focus-visible) .book-cover { transform: none; }
}

.book-preview-panel-trigger { cursor: pointer; font: inherit; color: inherit; }
.book-preview-tools .book-options-summary { display: block; border: 0; padding: 0; background: transparent; }
.book-preview-tools .book-options-hint { display: block; }
.book-preview-tools .book-options[open] > summary { margin-bottom: 0; }
.book-preview-facts > .book-preview-panel-trigger { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; padding: 0; background: transparent; font-size: .875rem; color: var(--muted); text-align: left; }
.book-preview-panel-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.book-preview-panel-trigger[aria-expanded="true"] .book-preview-chevron,
.book-preview-panel-trigger[aria-expanded="true"] .book-chev { transform: rotate(180deg); }
.book-preview-panel-trigger[aria-expanded="true"] .book-options-btn { background: var(--surface); border-color: var(--ink); }
.book-preview-panel { position: fixed; inset: auto; margin: 0; box-sizing: border-box; z-index: 8; max-width: none; padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--canvas); box-shadow: 0 12px 40px rgb(0 0 0 / .18); overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; font: 400 .875rem/1.5 var(--sans); }
.book-preview-panel[hidden] { display: none; }
.book-preview-panel::backdrop { background: transparent; pointer-events: none; }
.book-preview-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); background: var(--canvas); }
#book-detail-body .book-preview-panel-head h3 { margin: 0; font: 600 .9375rem/1.4 var(--sans); }
.book-preview-panel-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.book-preview-panel-close:hover { background: var(--surface); color: var(--ink); }
.book-preview-panel-content { padding: 16px; }
.book-preview-panel-content > :first-child { margin-top: 0; }
.book-preview-panel-content > :last-child { margin-bottom: 0; }
.book-preview-panel .book-options-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
.book-preview-panel .book-options-rows { display: grid; gap: 12px; }
.book-preview-panel .book-options-row { display: block; }
.book-preview-panel .book-options-row dt { font-size: .75rem; font-weight: 600; color: var(--muted); }
.book-preview-panel .book-options-row dd { margin: 0; }
.book-preview-panel a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.book-preview-panel summary { min-height: 44px; }
.book-preview-license[aria-expanded="true"] .book-preview-license-tip { visibility: hidden; opacity: 0; }