/* The public library page of the website. Loaded after tokens.css, app.css and
   book.css, whose shelf and reader it uses unchanged. This file adds the head
   and foot of the page and the few things a public shelf needs. */

body.public-library { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.public-library main { flex: 1; }

/* ---- head of the page: the website's own navigation ---- */
.site-head {
  position: sticky; top: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 72px; padding: var(--sp-2) var(--gutter);
  background: var(--material-bar); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur);
  border-bottom: 1px solid var(--c-line);
}
.site-logo { flex: none; display: block; border-radius: var(--r-sm); }
.site-logo img { height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); min-width: 0; }
.site-nav a {
  position: relative; padding: 6px 0; color: var(--c-ink-2); text-decoration: none; white-space: nowrap;
  font-size: var(--text-sm); font-weight: var(--w-medium); letter-spacing: 0.02em;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--c-ink); }
.site-nav a[aria-current='page']::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--c-accent); }
.site-head .spacer { flex: 1; }
.site-head #uiLanguage { flex: none; }
.site-menu { display: none; }

@media (max-width: 980px) {
  .site-head { flex-wrap: wrap; gap: var(--sp-2); row-gap: 0; min-height: 64px; }
  .site-logo img { height: 40px; }
  .site-menu { display: inline-flex; order: 3; min-height: var(--hit); min-width: var(--hit); justify-content: center; }
  .site-head #uiLanguage button { min-height: 40px; }
  .site-head .spacer { order: 1; }
  .site-head #uiLanguage { order: 2; }
  .site-nav { display: none; order: 4; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) 0 var(--sp-3); }
  .site-nav a { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-2); font-size: var(--text-md); border-radius: var(--r-sm); }
  .site-nav a[aria-current='page'] { background: var(--state-selected); }
  .site-nav a[aria-current='page']::after { display: none; }
  body.site-nav-open .site-nav { display: flex; }
}

/* ---- the shelf, for a handful of books ---- */
.public-shelf { grid-template-columns: repeat(auto-fill, minmax(236px, 300px)); margin-top: var(--sp-7); }
.public-shelf .book-stand { min-height: 356px; padding: 28px 30px 0; }
.public-shelf .book-stand .cover { max-width: 216px; }
.public-shelf .book-body { padding-inline: 22px; contain-intrinsic-size: auto 190px; }
.public-shelf .book-body .h-sub { font-size: var(--text-xl); }
.book-card.is-coming .cover-type::after {
  /* A quiet band across the foot of the cover of a book that is not published yet. */
  content: ''; position: absolute; inset-inline: -40%; bottom: -14%; height: 1px; background: rgba(239, 228, 200, 0.28);
}
.library-note { margin-top: var(--sp-8); color: var(--c-ink-2); font-size: var(--text-base); }
/* A photograph of the real cover: whole, in its own proportions, with nothing drawn over it but the fold of the board. */
.public-shelf .cover.has-art { aspect-ratio: var(--cover-ratio, 2 / 3); background: #14110f; }
.public-shelf .cover.has-art .cover-sheen { opacity: 0.35; }
.public-shelf .cover.has-art .cover-spine { opacity: 0.5; }
/* Every cover stands in a seat as tall as the tallest book, so that all of them rest on one line. */
.public-shelf .cover-seat { width: 100%; max-width: 216px; aspect-ratio: 1 / var(--tallest, 1.5); display: flex; align-items: flex-end; }
.public-shelf .cover-seat .cover { max-width: none; }
/* A book that does not open yet answers with a panel, wherever its card is clicked. */
.book-card.is-closed { cursor: pointer; }
.book-more { display: block; align-self: flex-start; margin-top: var(--sp-2); margin-inline: 0 auto; padding: 0; border: 0; background: none; text-align: start; font: inherit; font-size: var(--text-sm); color: var(--c-accent-ink, var(--c-accent)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.book-more:focus-visible { outline: none; }
.book-card.is-closed:has(.book-more:focus-visible) .cover { outline: 3px solid var(--c-accent); outline-offset: 4px; transform: translateY(-10px); }
.soon { display: flex; gap: var(--sp-5); align-items: flex-start; }
.soon-cover { flex: 0 0 132px; container-type: inline-size; }
.soon-cover .cover.has-art { aspect-ratio: var(--cover-ratio, 2 / 3); background: #14110f; }
.soon-text { min-width: 0; flex: 1; }
.soon-text > * { margin: 0; }
.soon-text > * + * { margin-top: var(--sp-2); }
.soon-state { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-3); }
.soon-text h2 { font-family: var(--font-display); font-size: var(--text-xl); }
.soon-note { margin-top: var(--sp-4) !important; }
@media (max-width: 480px) { .soon { flex-direction: column; align-items: center; text-align: center; } .soon-cover { flex-basis: auto; width: 132px; } }
.book-note { font-size: var(--text-xs); color: var(--c-ink-3); margin-top: var(--sp-2); }

/* ---- a published edition names the parts of its opening pages; this is how each is set ---- */
.bookview .bk-flow.is-title p.bk-h.bk-r-title { font-family: var(--font-display); font-size: 1.75em; font-style: normal; line-height: 1.24; letter-spacing: 0.05em; margin-bottom: calc(var(--lh) * 1.6); }
.bookview .bk-flow.is-title p.bk-h.bk-r-author { font-size: 1.12em; font-style: normal; line-height: var(--lh); margin-top: 0; margin-bottom: calc(var(--lh) * 1.8); }
.bookview .bk-flow.is-title p.bk-h.bk-r-minor { font-size: 0.82em; font-style: normal; letter-spacing: 0.1em; line-height: calc(var(--lh) * 0.95); margin-top: 0; margin-bottom: calc(var(--lh) * 2.6); }
.bookview .bk-flow.is-title p.bk-h.bk-r-minor i { letter-spacing: 0.02em; }
.bookview .bk-flow.is-title p.bk-h.bk-r-imprint { font-size: 0.84em; font-style: normal; letter-spacing: 0.12em; line-height: calc(var(--lh) * 0.95); margin-top: 0; margin-bottom: 0; }
.bookview .bk-flow.is-title p.bk-h.bk-r-dedication { font-family: var(--bk-font); font-size: 1em; font-style: normal; font-variant: small-caps; letter-spacing: 0.08em; line-height: calc(var(--lh) * 1.35); }
.bookview .bk-flow.is-foot { display: flex; flex-direction: column; justify-content: flex-end; column-width: auto; padding-bottom: var(--lh); }
.bookview .bk-flow p.bk-r-small { font-size: 0.8em; line-height: 1.5; text-indent: 0; hyphens: none; }
.bookview .bk-flow p.bk-r-center { text-align: center; margin-top: 1.1em; letter-spacing: 0.02em; }
.bookview .bk-flow p.bk-r-cont { text-indent: 0; }
.bookview .bk-flow p.bk-toc { display: flex; align-items: baseline; gap: 0.9em; text-indent: 0; text-align: start; hyphens: none; margin-bottom: calc(var(--lh) * 0.18); break-inside: avoid; }
.bookview .bk-flow p.bk-toc .s { display: contents; }
.bk-toc-mark { flex: 0 0 6.6em; white-space: nowrap; text-align: end; font-size: 0.82em; font-variant: all-small-caps; letter-spacing: 0.08em; color: var(--bk-ink-2); }
.bk-toc-title { flex: 1 1 auto; min-width: 0; }
.bk-toc-page { flex: none; font-variant-numeric: tabular-nums lining-nums; color: var(--bk-ink-2); }
/* What the website says inside a page of a book is set apart from the book: its own typeface, smaller, quieter. */
.bookview .bk-flow p.bk-ednote { font-family: var(--font-ui); font-size: 0.7em; font-style: normal; font-variant: normal; line-height: 1.5; letter-spacing: 0; text-indent: 0; text-align: center; hyphens: none; color: var(--bk-ink-2); max-width: 36ch; margin: calc(var(--lh) * 0.9) auto 0; white-space: normal; }
.bookview .bk-flow p.bk-ednote + p.bk-ednote { margin-top: calc(var(--lh) * 0.35); }
.bookview .bk-flow p.bk-ednote-head { font-family: var(--font-display); font-size: 1.3em; color: var(--bk-ink); margin-top: 0; }
@media (max-width: 560px) {
  .public-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-5); }
  .public-shelf .book-stand { min-height: 0; padding: 18px 14px 0; }
  .public-shelf .book-body { padding-inline: 10px; }
  .public-shelf .book-body .h-sub { font-size: var(--text-lg); }
}

/* On a narrow screen the menu is its icon; its name stays for assistive technology. */
@media (max-width: 480px) {
  .site-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* In the Hebrew interface the lines under a cover start where the card starts, English titles included. */
[dir='rtl'] .public-shelf .book-body :is(h2, .book-meta) { text-align: right; }

/* ---- foot of the page ---- */
.site-foot { padding: var(--sp-6) var(--gutter) var(--sp-7); border-top: 1px solid var(--c-line); color: var(--c-ink-3); font-size: var(--text-xs); }
.site-foot p { margin: 0; }
.site-foot p + p { margin-top: var(--sp-2); }
.site-foot a { color: var(--c-ink-2); }

/* ---- reading: the book has the whole window ---- */
body.is-reading .site-head, body.is-reading .site-foot { display: none; }
body.is-reading { min-height: 0; }

noscript .no-js { max-width: 640px; margin: var(--sp-8) auto; padding: 0 var(--gutter); }

@media print {
  .site-head, .site-foot { display: none; }
}