/* The books' catalogue (and each section of it), in the journals page's manner.
 *
 * A petrol band with the mesh carries the way back, the title, the white
 * search pill and the order chips; a thin steel-blue line; then the quiet
 * light ground: the sections on the left, the covers on the right. Under a cover only its
 * name, its authors and its price.
 */

.bpage {
  --stand-light: color-mix(in srgb, var(--brand-mist) 90%, var(--brand));
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--stand-light);
}

/* ── the band ── */
.bpage__band {
  position: relative;
  isolation: isolate;
  border-bottom: 4px solid transparent;
  background:
    radial-gradient(120% 90% at 85% 0%, var(--brand-deep-2), transparent 65%),
    var(--brand-deep);
  color: #fff;
}
/* less mesh than on the home page: sparser, fainter, only towards the right */
.bpage__band .stand__mesh--dark {
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 82%);
  mask-image: linear-gradient(100deg, transparent 38%, #000 82%);
}
.bpage__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg) calc(var(--space-2xl) + var(--space-sm)); }



.bpage__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.bpage__lead { display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); margin: 0; color: var(--on-brand-2); }

.bpage__tools { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: var(--space-md) var(--space-lg); margin-top: var(--space-sm); }

/* the search: the home page's white pill, always open */
.bsearch {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 1 min(22rem, 100%);
  min-width: 0;
  max-width: 34rem;
  padding: 0.3rem 0.3rem 0.3rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: #4a6670;
  box-shadow: 0 14px 34px -16px rgb(0 0 0 / 0.45);
}
.bsearch:focus-within { box-shadow: 0 0 0 3px var(--brand), 0 14px 34px -16px rgb(0 0 0 / 0.45); }
.bsearch__icon { flex: none; }
.bsearch input[type="search"] { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; background: none; font: inherit; color: #12313b; }
.bsearch input:focus { outline: none; }
.bsearch input::placeholder { color: #6b858e; }
.bsearch input::-webkit-search-cancel-button { display: none; }
.bsearch__reset { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #6b858e; }
.bsearch__reset:hover { background: var(--brand-mist); color: #12313b; }
.bsearch__reset svg { width: 1rem; height: 1rem; }
.bsearch__go { flex: none; min-height: 2.75rem; padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--brand-tile); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }
.bsearch__go:hover { background: var(--brand-tile-hover); }

/* the order: the journals page's glass chips, as links */
.bpage__order { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.bpage__order a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; color: #fff; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; }
.bpage__order a:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.bpage__order a[aria-current] { background: #fff; color: var(--brand-deep); }
.bpage__order a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── the light ground ── */
.bpage__ground { position: relative; padding-block: var(--space-2xl) var(--space-3xl); }
.bpage__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
@media (min-width: 62rem) { .bpage__grid { grid-template-columns: 15.5rem minmax(0, 1fr); } }

/* the sections: a quiet list on the left that keeps in view; the current
   one on a white pill. On narrower screens a row of pills that scrolls. */
.bpage__rail ul { display: flex; gap: var(--space-xs); margin: 0; padding: 0 0 var(--space-2xs); list-style: none; overflow-x: auto; scrollbar-width: none; }
.bpage__rail ul::-webkit-scrollbar { display: none; }
.bpage__rail a {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  color: var(--color-ink);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.bpage__rail a span { margin-left: auto; color: var(--color-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bpage__rail a:hover { background: rgb(255 255 255 / 0.85); color: var(--color-ink); }
.bpage__rail a.is-active { background: #fff; font-weight: 600; box-shadow: 0 8px 20px -12px rgb(6 30 38 / 0.45); }
.bpage__rail a.is-active span { color: var(--brand-tile); }
.bpage__rail a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (min-width: 62rem) {
  .bpage__rail { position: sticky; top: calc(var(--header-h, 4rem) + var(--space-lg)); max-height: calc(100svh - var(--header-h, 4rem) - 2 * var(--space-lg)); overflow-y: auto; scrollbar-width: thin; }
  .bpage__rail ul { display: grid; gap: 2px; overflow: visible; padding: 0; }
  .bpage__rail a { white-space: normal; line-height: 1.35; border-radius: 14px; background: none; }
  .bpage__rail a:hover { background: rgb(255 255 255 / 0.6); }
  .bpage__rail a.is-active { background: #fff; }
}

/* ── the shelf ── */
.bshelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-lg); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .bshelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); } }
@media (min-width: 62rem) { .bshelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--space-2xl) + var(--space-xs)) clamp(1.5rem, 2.4vw, 2.25rem); } }
.bshelf__link { display: grid; align-content: start; gap: var(--space-2xs); color: var(--color-ink); border-radius: var(--radius-cover); }
.bshelf__link:hover { color: var(--color-ink); }
.bshelf__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.bshelf__cover { display: block; margin-bottom: var(--space-sm); line-height: 0; transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.bshelf__cover img, .bshelf__blank { display: block; width: 100%; height: auto; aspect-ratio: 300 / 440; object-fit: cover; }
.bshelf__blank { display: grid; place-items: center; margin-bottom: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-cover); background: var(--jc); color: #fff; font-family: var(--font-display); text-align: center; }
.bshelf__link:hover .bshelf__cover, .bshelf__link:focus-visible .bshelf__cover { translate: 0 -6px; }

.bshelf__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; transition: color 0.2s ease; }
.bshelf__link:hover .bshelf__title { color: color-mix(in srgb, var(--jc) 50%, var(--color-ink)); }
.bshelf__authors { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 0.8125rem; color: var(--color-ink-2); }
.bshelf__price { margin-top: var(--space-2xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.bshelf__ask { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-2); }
.bshelf__empty { grid-column: 1 / -1; padding: var(--space-xl); border-radius: 20px; background: rgb(255 255 255 / 0.7); color: var(--color-ink-2); }


/* ── the pages: round pills, the current one in petrol ── */
.bpager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-top: var(--space-3xl); }
.bpager a { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.6rem; border-radius: 999px; background: rgb(255 255 255 / 0.7); color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 0.2s ease, color 0.2s ease; }
.bpager a:hover { background: #fff; color: var(--color-ink); }
.bpager a.active { background: var(--brand-deep); color: #fff; }
.bpager__step svg { width: 1.1rem; height: 1.1rem; }
.bpager a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* the light ground runs straight into the footer */
body:has(.bpage) .site-footer { margin-top: 0; }

/* phones: the order chips stay one row and scroll sideways */
@media (max-width: 40rem) {
  .bpage__order { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .bpage__order::-webkit-scrollbar { display: none; }
  .bpage__order a { flex: none; }
}

/* while another view of the shelf loads in place (static/js/books.js) */
.bpage__main { transition: opacity 0.25s ease; }
.bpage__main.is-loading { opacity: 0.45; pointer-events: none; }