/* Brand type: Literatura Past (serif, regular + italic) for titles and reading text,
   Geist Hebrew with redrawn Cyrillic (variable 100–900) for UI and meta. */
@font-face { font-family: "Literatura Past"; src: url("/static/fonts/literatura-past-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literatura Past"; src: url("/static/fonts/literatura-past-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-hebrew-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --serif: "Literatura Past", Georgia, serif; --sans: "Geist", system-ui, sans-serif; --footer-bg: #141414; background: var(--page-bg, #fff); }
.detail-title, .intro h1, .praise blockquote p, .md, .author-name, .grid .title { font-family: var(--serif); font-weight: 400; }
em, i { font-style: italic; }

/* Placeholder styles until the design pass. */
*, *::before, *::after { box-sizing: border-box; }
body { font: 16px/1.5 var(--sans); margin: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--page-bg, #fff); }
main { flex: 1; overflow-x: clip; background: #fff; padding-bottom: 4rem; }
.site-header { background: #fff; }
.band .site-header { background: transparent; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px)); }
.container-fluid { max-width: none; padding-inline: max(1.5rem, env(safe-area-inset-left, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)); overflow-x: clip; }

/* The home page uses the window width, with its own cover-only catalogue. */
.home-intro { padding-top: 4rem; }
.home-wordmark { margin: 0; line-height: 0; }
.home-wordmark svg { display: block; width: 100%; height: auto; }
.home-statement { margin: 4rem 0 6rem; text-align: center; }
.home-statement .md { font: 400 clamp(1.75rem, 3.3vw, 4rem)/1.2 var(--serif); text-wrap: balance; }
.home-statement .md p { margin: 0; }
.home-statement .md p + p { margin-top: 1em; }
.home-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 60px 0; padding: 0; margin: 0 -1.5rem 5rem; list-style: none; }
.home-covers li { min-width: 0; padding-inline: 7.5px; }
.home-covers a { display: block; width: 80%; max-width: 275px; margin-inline: auto; }
.home-covers a:focus-visible { outline: 2px solid currentColor; outline-offset: .75rem; }
@media (min-width: 62rem) {
  .home-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 200px; }
  .home-covers a { width: 100%; }
}
@media (max-width: 40rem) {
  .container-fluid { padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); }
  .home-intro { padding-top: 1rem; }
  .home-statement { margin-block: 2rem 3rem; }
  .home-covers { margin-inline: -1rem; }
}


a { color: inherit; }

/* Coloured top band (book page): site header + page head on --band-bg, white page continues below. */
.band { background: var(--band-bg); color: var(--band-fg); padding-bottom: 4rem; overflow-x: clip; }
.band .imprint { color: inherit; opacity: .7; }
.site-header a { text-decoration: none; }
.site-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr); align-items: start; min-height: calc(5.5rem + env(safe-area-inset-top, 0px)); padding: calc(1.5rem + env(safe-area-inset-top, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)) 1.5rem max(1.5rem, env(safe-area-inset-left, 0px)); }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-nav-left { grid-column: 1; grid-row: 1; gap: 1rem; }
.site-nav-right { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.site-search { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: .75rem; margin: -.75rem; box-sizing: content-box; }
.site-search:hover { opacity: .65; }
.site-search:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.logo { display: block; line-height: 0; }
.logo svg { display: block; height: 100%; width: auto; }
/* The «ТЫ» mark stays fixed at the top centre and inherits the header colour. */
.site-header .logo { position: fixed; z-index: 10; top: calc(1rem + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; height: 3.5rem; }

/* Publisher's colophon in the site's own serif: the statement, then columns of plain links. */
.site-footer { background: var(--footer-bg); color: #f4f2ec; }
.footer-inner {
  /* Same 1.5rem from the window edge as «Книги» and «Авторы» in the header; line-height 1 like
     there, so the padding is the visible gap. */
  padding: 1.5rem max(1.5rem, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1.5rem, env(safe-area-inset-left, 0px));
  font: 400 1.125rem/1 var(--serif);
}
.site-footer a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.footer-statement { margin: 0; font-size: 1.75rem; }
/* Link lists sit side by side at the left, as wide as their text; contact goes to the bottom right
   corner, on the last line of the longest list. */
.footer-columns { display: grid; grid-template-columns: max-content max-content 1fr; gap: 1.5rem 4rem; margin-top: 2rem; }
.footer-links:last-child:not(:first-child) { justify-self: end; align-self: end; text-align: right; }
.footer-links { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; align-content: start; }
.footer-links a { overflow-wrap: anywhere; }
@media (max-width: 48rem) {
  main { padding-bottom: 3rem; }
  .footer-inner { padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
  .footer-statement { font-size: 1.375rem; text-wrap: balance; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }
  .footer-links:last-child { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* Desktop: four books per row, airy. Mobile overrides below. */
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4rem 3rem; }
/* Mobile: /books is two covers per row, the home page one large cover per row. */
@media (max-width: 40rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .grid-large { grid-template-columns: 1fr; gap: 3rem; }
}
.grid a { display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
.grid .cover-frame, .grid .cover { margin-bottom: .75rem; }
.grid .title { font-size: 1.125rem; line-height: 1.15; }
.grid .names { line-height: 1.3; }
.cover { display: block; width: 100%; height: auto; }
/* BookFlat flat shadow; geometry comes from the book's size (see flatShadow in components.tsx). */
.cover-frame { position: relative; display: block; isolation: isolate; }
.cover-frame::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: var(--shadow-w); height: var(--shadow-h);
  background: rgb(0 0 0 / .04); clip-path: var(--shadow-clip);
}
/* 3D book (book3d.js) over the flat cover: a horizontal swipe turns it, a vertical one scrolls.
   At rest the crisp image with its flat shadow covers it again. */
.cover-frame[data-book3d] { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cover-frame[data-book3d]:active { cursor: grabbing; }
.cover-frame::before { transition: opacity .3s; }
/* The canvas stays shown under the image: a WebGL canvas that is hidden and shown again can
   flash blank for a frame on phones, so only the image on top is switched off. */
.book3d { position: absolute; pointer-events: none; }
.cover-frame[data-book3d] > .cover { position: relative; z-index: 1; transition: opacity .3s; }
.cover-frame.is-3d::before, .cover-frame.is-3d > .cover { opacity: 0; }
/* Off at once when the book starts to turn (else it ghosts over the moving book); back in with
   a fade, over the face-on book that matches it, so the switch in sharpness doesn't pop. */
.cover-frame.is-3d > .cover { transition: none; }
div.cover { aspect-ratio: 2 / 3; background: #eee; display: grid; place-items: center; padding: 1rem; text-align: center; }
.detail-tag { display: table; margin: 1.5rem auto 0; padding: .35rem .75rem; border: 1px solid currentColor; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.detail-title { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; text-align: center; margin: .5rem 0 0; }
.detail > .detail-title:first-child { margin-top: 2rem; }
.detail-crumb, .detail-subtitle, .detail-byline { display: block; text-align: center; }
/* Section label above the title («Книги», «Авторы»): small caps-style, muted, no underline. */
.detail-crumb { width: fit-content; margin: 0 auto; font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; opacity: .55; }
.detail-crumb:hover { opacity: 1; }
/* Author above the title, subtitle under it: both sans and upright, so the serif title is the one accent. */
.detail-byline { margin: 1.5rem 0 0; font-size: clamp(1rem, 1.6vw, 1.125rem); }
.detail-subtitle { max-width: 36rem; margin: 1rem auto 0; font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.3; opacity: .65; }
.detail-byline a { text-decoration: underline; text-underline-offset: .2em; }
.detail-media { max-width: 28rem; margin: 2.5rem auto; }
.detail-media img { display: block; width: 100%; height: auto; }
.author-photo { margin: 0; }
.photo-credit { margin-top: .5rem; color: #737373; font: 400 .75rem/1.35 var(--sans); text-align: right; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .detail-media > .cover-frame, .detail-media > .cover { width: min(70vw, 18rem); margin-inline: auto; }
}
.detail-body { max-width: 40rem; margin: 2.5rem auto 0; }
.detail-body .md { font-size: 1.125rem; line-height: 1.45; }
/* Native justify + hyphens until Justif lays the lines out, so its pass barely shifts the text. */
.detail-body .md > p { text-align: justify; hyphens: auto; }
/* Reading text (annotation, bio, pages) a step larger on desktop. */
@media (min-width: 40rem) { .detail-body .md { font-size: 1.25rem; } }
.related { margin-top: 4rem; }
.related > .grid { display: flex; flex-wrap: wrap; justify-content: center; }
.related > .grid > li { flex: 0 0 calc((100% - 9rem) / 4); min-width: 0; }
@media (max-width: 40rem) {
  .related > .grid > li { flex-basis: calc((100% - 1rem) / 2); }
}
.related > h2 { margin: 0 0 2rem; font: 500 .75rem/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; text-align: center; opacity: .55; }
.praise { max-width: 48rem; margin: 4rem auto; text-align: center; }
.praise blockquote { margin: 0 0 3rem; }
.praise blockquote p { font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.25; margin: 0 0 1rem; }
.praise footer { color: #666; }
.names, .updated, .imprint { color: #666; }
.imprint { text-align: center; }
.imprint dd { margin: 0; }
.imprint dd:not(.imprint-credit) + .imprint-credit { margin-top: 1.5rem; }
.foreign-agent { font-size: .75rem; text-transform: uppercase; }
.intro { text-align: center; margin: 2rem 0 3rem; }
.intro h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; margin: 0 0 2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.search-form { display: flex; align-items: center; gap: 1rem; max-width: 40rem; margin: 0 auto; padding-bottom: .75rem; border-bottom: 1px solid #aaa; text-align: left; }
.search-form:focus-within { border-color: #141414; }
.search-form input { min-width: 0; flex: 1; width: 100%; padding: .5rem 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: 400 1.25rem/1.5 var(--sans); }
.search-form input:focus-visible { outline: none; }
.search-submit { flex: none; padding: .75rem 0 .75rem .5rem; border: 0; background: transparent; color: inherit; font: 500 .75rem/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.search-submit:hover { text-decoration: underline; text-underline-offset: .2em; }
.search-submit:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.search-results { display: grid; gap: 2.5rem; max-width: 40rem; margin-inline: auto; }
.search-results-title { margin: 0 0 .75rem; font: 500 .75rem/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.search-results-title span { margin-left: .5rem; color: #777; }
.search-result-list { margin: 0; padding: 0; list-style: none; }
.search-result { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid #e5e5e5; text-decoration: none; }
.search-result .portrait { margin-bottom: 0; }
.search-result-text { display: grid; gap: .375rem; }
.search-result-title { font: 400 1.25rem/1.2 var(--serif); }
.search-result-caption { color: #666; font-size: .875rem; line-height: 1.4; }
.search-result:hover .search-result-title { text-decoration: underline; text-underline-offset: .2em; }
.search-result:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.search-empty { margin: 0; text-align: center; color: #666; }
@media (max-width: 40rem) { .search-form input { font-size: 1rem; } }
@media (min-width: 64rem) {
  .detail { padding-top: 4rem; }
  .detail > .detail-title:first-child { margin-top: 0; }
  .intro { margin-top: 4rem; }
}
.list-controls { display: flex; justify-content: center; gap: 1.5rem; }
.control { font: 500 .75rem/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; background: none; border: 0; padding: .5rem 1.25rem .5rem 0; cursor: pointer; color: inherit; }
button.control, .sort-trigger { position: relative; opacity: .55; }
button.control:hover, button.control[aria-expanded="true"], .sort-trigger:hover, .sort-control[open] > .sort-trigger { opacity: 1; }
button.control::after, .sort-trigger::after { content: ""; position: absolute; right: .15rem; top: calc(50% - .25rem); width: .4rem; height: .4rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; }
button.control[aria-expanded="true"]::after, .sort-control[open] > .sort-trigger::after { transform: translateY(.2rem) rotate(225deg); }
.sort-control { position: relative; width: 11rem; text-align: left; }
.sort-trigger { display: block; list-style: none; }
.sort-trigger::-webkit-details-marker { display: none; }
.sort-options { position: absolute; z-index: 20; top: calc(100% + .5rem); right: 0; width: max-content; min-width: 100%; padding: .375rem; background: #fff; color: #000; border: 1px solid #ddd; box-shadow: 0 .5rem 1.5rem #0000000d; }
.sort-option { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .625rem .75rem; border: 0; border-radius: 0; background: none; color: inherit; font: 500 .75rem/1.5 var(--sans); letter-spacing: .15em; text-align: left; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.sort-option::after { content: "✓"; visibility: hidden; margin-left: 1rem; letter-spacing: 0; }
.sort-option[aria-pressed="true"]::after { visibility: visible; }
.sort-option:hover, .sort-option:focus-visible { background: #f2f2f2; }
.control:focus-visible, .sort-option:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.filter-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; max-width: 60rem; margin: 0 auto; text-align: left; }
.filter-panel[hidden] { display: none; }
.filter-col { min-width: 10rem; }
.filter-col.wide { flex: 0 1 22rem; }
.filter-col h5 { margin: 2.5rem 0 1.25rem; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 500; opacity: .55; }
.filter-col input { width: 100%; font: inherit; padding: .5rem; border: 1px solid #ccc; }
.chip { display: table; margin: 0 0 .5rem; padding: .35rem .75rem; border: 1px solid currentColor; background: none; color: #000; font: 500 .75rem/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.chip[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
@media (max-width: 40rem) {
  .filter-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
  .filter-col { min-width: 0; }
  .filter-col.wide { grid-column: 1 / -1; }
  .filter-col h5 { margin: 0 0 1rem; }
  .filter-col .chip { display: block; max-width: 100%; text-align: left; }
}

/* /authors: tiles with photo, or latest cover on grey, or initials. */
.authors { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 3rem 1.5rem; }
@media (max-width: 40rem) { .authors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }
.authors a { display: grid; gap: .25rem; text-decoration: none; }
.portrait { position: relative; display: block; aspect-ratio: 1; margin-bottom: .75rem; }
/* Whole photo, no crop, centred in the square (are.na). */
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.portrait-blank { position: absolute; inset: 0; margin: auto; height: 100%; aspect-ratio: 4 / 5; background: var(--blank); opacity: .45; }
.author-name { font-size: 1.25rem; line-height: 1.2; }
.author-books { color: #666; font-size: .875rem; }