/* № 2139: книжная полка /knigi/ и страница издания — по эскизу Дизайнера № 2137 (polka-2137/demo/polka.css) */
:root {
  --pk-noch: var(--navy);
  --pk-noch-2: var(--navy-2);
  --pk-belyy: #ffffff;
  --pk-svet: rgba(255, 255, 255, .78);
  --pk-svet-2: rgba(255, 255, 255, .62);
  --pk-doska: var(--fon-3);
  --pk-doska-kray: #c9d6e3;
  --pk-ten: rgba(10, 26, 51, .28);
  --pk-tochki: radial-gradient(circle, rgba(169, 187, 210, .13) 1px, transparent 1.4px);
  --pk-shir: 1200px;
}

html, body { overflow-x: clip; }


/* ---------- первый экран полки ---------- */
.pk-geroy { background: var(--pk-noch) var(--pk-tochki); background-size: 22px 22px; color: var(--pk-belyy); }
.pk-geroy-v { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 24px; align-items: end; max-width: var(--pk-shir); margin: 0 auto; padding: 28px var(--polya) 32px; }
.pk-geroy .zag { overflow-wrap: break-word; min-width: 0; }
.pk-lid { margin: 12px 0 0; max-width: 34ch; font: 400 1.0625rem/1.5 var(--f-tekst); color: var(--pk-svet); }
.pk-novoe { margin-top: 24px; }
.pk-novoe-zag { margin: 0; font: 600 1.0625rem/1.35 var(--f-zag); }
.pk-novoe-zag span { display: block; margin-bottom: 2px; font: 500 .9375rem/1.3 var(--f-ui); color: var(--pk-svet-2); }
.pk-novoe-zag a { color: var(--pk-belyy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--pk-svet-2); }
.pk-novoe-zag a:hover { text-decoration-color: var(--pk-belyy); }
.pk-geroy-obl { grid-column: 2; grid-row: 1; align-self: start; display: block; width: 132px; }
.pk-geroy-obl img, .kk-obl { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 40px -18px var(--pk-ten); }
.pk-geroy .kn-knopki { margin-top: 16px; }
@media (max-width: 599px) {
  .pk-geroy-v { grid-template-columns: minmax(0, 1fr) 104px; align-items: start; }
  .pk-geroy-tekst { display: contents; }
  .pk-geroy .rm-put, .pk-geroy .zag, .pk-lid { grid-column: 1; }
  .pk-geroy-obl { grid-row: 1 / span 3; width: 104px; margin-top: 4px; }
  .pk-novoe { grid-column: 1 / -1; margin-top: 4px; }
  .pk-geroy .kn-knopki .kn-knopka { flex: 1 1 auto; }
  .pk-geroy .kn-knopki .kn-knopka:first-child { flex-basis: 100%; }
}
@media (min-width: 900px) {
  .pk-geroy-v { grid-template-columns: minmax(0, 1fr) 360px; gap: 0 72px; align-items: center; padding-top: 48px; padding-bottom: 0; }
  .pk-geroy-tekst { padding-bottom: 56px; }
  .pk-geroy .zag { font-size: clamp(3rem, 1.6rem + 3vw, 4.5rem); }
  .pk-lid { font-size: 1.25rem; }
  .pk-novoe { margin-top: 36px; }
  .pk-novoe-zag { font-size: 1.25rem; max-width: 30ch; }
  /* обложка стоит на краю тёмной полосы, низ уходит на белый лист */
  .pk-geroy { overflow: visible; margin-bottom: 120px; }
  .pk-geroy-obl { width: 360px; margin-bottom: -120px; align-self: end; transform: rotate(0); }
}

/* ---------- полка ---------- */
.pk-osnova { max-width: var(--pk-shir); margin: 0 auto; padding: 32px var(--polya) 72px; }
.pk-vvod h2, .pk-razdel-zag h2, .kk-osnova h2 { margin: 0; font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.15 var(--f-zag); color: var(--zag); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.pk-vvod p { margin: 8px 0 0; max-width: 60ch; font: 400 1rem/1.55 var(--f-tekst); color: var(--tekst); }
.pk-razdel { margin-top: 44px; }
.pk-razdel-zag { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.pk-razdel-zag h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.pk-razdel-zag a { font: 600 .9375rem/1.3 var(--f-ui); color: var(--akcent-t); text-decoration: none; padding: 10px 0; }
.pk-razdel-zag a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk-ryad { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.pk { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--fon-3); }
.pk-obl { display: block; align-self: start; }
.pk-obl img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 10px 22px -12px var(--pk-ten); transition: transform .2s var(--dvizh); }
.pk-obl:hover img { transform: translateY(-4px); }
.pk-nomer { margin: 0; font: 500 .875rem/1.3 var(--f-ui); color: var(--tekst-2); }
.pk-nazv { margin: 2px 0 0; font: 600 1.125rem/1.25 var(--f-zag); overflow-wrap: break-word; min-width: 0; }
.pk-nazv a { color: var(--zag); text-decoration: none; }
.pk-nazv a:hover { color: var(--akcent-t); }
.pk-obem { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; font: 500 .875rem/1.4 var(--f-ui); color: var(--tekst-2); }
.pk-hod { margin-top: 10px; max-width: 240px; }
.pk-hod li { height: 4px; }
.pk-fayly { margin: 10px 0 0; font: 400 .875rem/1.4 var(--f-ui); color: var(--tekst-2); }

@media (min-width: 640px) {
  .pk-ryad { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 900px) {
  .pk-osnova { padding-top: 40px; }
  .pk-vvod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
  .pk-vvod p { margin: 0; }
  .pk-razdel { margin-top: 56px; }
  .pk-ryad { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; margin-top: 24px; }
  .pk { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; box-shadow: none; }
  .pk-obl { position: relative; padding-bottom: 14px; }
  /* доска полки: под обложками одна сплошная полоса через весь ряд */
  .pk-obl::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; height: 14px; background: var(--pk-doska); box-shadow: inset 0 2px 0 var(--pk-doska-kray); }
  .pk-tekst { padding-top: 16px; }
}

/* ---------- страница книги ---------- */
.kk-geroy { background: var(--pk-noch) var(--pk-tochki); background-size: 22px 22px; color: var(--pk-belyy); }
.kk-geroy-v { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "put put" "obl zag" "gl gl"; gap: 16px 18px; max-width: var(--pk-shir); margin: 0 auto; padding: 22px var(--polya) 32px; }
.kk-put { grid-area: put; margin: 0; }
.kk-put .rubrika-metka { min-height: 44px; }
.kk-obl { grid-area: obl; width: 104px; }
.kk-zag { grid-area: zag; min-width: 0; align-self: center; }
.kk-geroy .zag { margin: 0; font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); overflow-wrap: break-word; min-width: 0; }
.kk-avtor { margin: 8px 0 0; font: 500 .9375rem/1.3 var(--f-ui); color: var(--pk-svet); }
.kk-glavnoe { grid-area: gl; }
.kk-lid { margin: 0; max-width: 60ch; font: 400 1.0625rem/1.55 var(--f-tekst); color: var(--pk-svet); }
.kk-geroy .meta { margin-top: 12px; }
@media (max-width: 599px) {
  .kk-geroy .kn-knopki .kn-knopka { flex: 1 1 auto; }
  .kk-geroy .kn-knopki .kn-knopka:first-child { flex-basis: 100%; }
}
@media (min-width: 900px) {
  .kk-geroy-v { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "obl put" "obl zag" "obl gl"; grid-template-rows: auto auto 1fr; gap: 0 72px; padding-top: 40px; padding-bottom: 48px; }
  .kk-obl { width: 340px; align-self: start; }
  .kk-put { align-self: end; }
  .kk-zag { align-self: start; margin-top: 8px; }
  .kk-geroy .zag { max-width: 18ch; }
  .kk-avtor { margin-top: 14px; font-size: 1.0625rem; }
  .kk-glavnoe { margin-top: 28px; }
  .kk-lid { font-size: 1.1875rem; }
}

.kk-osnova { max-width: var(--pk-shir); margin: 0 auto; padding: 36px var(--polya) 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (min-width: 900px) {
  .kk-osnova { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 72px; row-gap: 56px; padding-top: 56px; }
  .kk-ogl { grid-column: 1; grid-row: 1; }
  .kk-izd { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 88px; }
  .kk-vo { grid-column: 1; grid-row: 2; }
  .kk-eshche { grid-column: 1 / -1; }
}

.ogl { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: ch; }
.ogl > li { padding: 14px 0; box-shadow: inset 0 -1px 0 var(--fon-3); }
.ogl-chast { display: block; font: 600 1.125rem/1.3 var(--f-zag); color: var(--zag); }
.ogl-pod { margin: 8px 0 2px; padding: 0 0 0 1.25em; display: grid; gap: 6px; font: 400 .9375rem/1.45 var(--f-tekst); color: var(--tekst); }
.ogl-pod li::marker { color: var(--tekst-2); }

.kk-izd { padding: 24px; background: var(--fon-2); border-radius: 16px; }
.kk-izd h2 { font-size: 1.25rem; }
.kk-izd dl { margin: 14px 0 0; display: grid; gap: 10px; }
.kk-izd dl div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.kk-izd dt { font: 500 .875rem/1.4 var(--f-ui); color: var(--tekst-2); }
.kk-izd dd { margin: 0; font: 500 .9375rem/1.4 var(--f-ui); color: var(--zag); }
.kk-polnaya { margin: 18px 0 0; padding-top: 16px; box-shadow: inset 0 1px 0 var(--fon-3); font: 400 .9375rem/1.5 var(--f-tekst); color: var(--tekst); }
.kk-polnaya a { display: inline-block; margin-top: 6px; font: 600 .9375rem/1.4 var(--f-ui); color: var(--akcent-t); }

.vo { box-shadow: inset 0 -1px 0 var(--fon-3); }
.kk-vo h2 + .vo { margin-top: 12px; }
.vo summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; font: 600 1.0625rem/1.35 var(--f-zag); color: var(--zag); }
.vo summary::-webkit-details-marker { display: none; }
.vo summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--fon-2); color: var(--akcent-t); font: 500 1.25rem/1 var(--f-ui); transition: transform .2s var(--dvizh); }
.vo[open] summary::after { transform: rotate(45deg); }
.vo p { margin: 0 0 16px; max-width: 62ch; font: 400 1rem/1.6 var(--f-tekst); color: var(--tekst); }

.kk-eshche ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kk-eshche ul a { display: grid; gap: 10px; text-decoration: none; color: var(--zag); font: 600 .9375rem/1.3 var(--f-zag); }
.kk-eshche img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 10px 22px -12px var(--pk-ten); }
.kk-eshche ul a:hover span { color: var(--akcent-t); }
@media (min-width: 900px) {
  .kk-eshche ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; }
}

/* фокус — мгновенно, как на сайте */
.pk a:focus-visible, .pk-razdel-zag a:focus-visible, .pk-novoe-zag a:focus-visible, .kk-polnaya a:focus-visible, .kk-eshche a:focus-visible, .vo summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pk-obl img, .vo summary::after { transition: none; }
  .pk-obl:hover img { transform: none; }
}

/* без переносов внутри слов в блоках полки */
.polka .pk-geroy, .polka .kk-geroy, .pk-osnova, .kk-osnova { hyphens: manual; -webkit-hyphens: manual; }
.pk-geroy .meta { margin-top: 10px; }
@media (min-width: 900px) {
  .pk-para { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pk-para .pk-ryad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pk { align-content: start; }
@media (max-width: 599px) {
  .pk-geroy-v { row-gap: 12px; }
  .pk-geroy .rm-put { grid-column: 1 / -1; grid-row: 1; }
  .pk-geroy .zag { grid-row: 2; align-self: start; }
  .pk-lid { grid-row: 3; margin: 0; align-self: start; }
  .pk-geroy-obl { grid-column: 2; grid-row: 2 / span 2; margin-top: 6px; }
  .pk-novoe { grid-row: 4; margin-top: 8px; }
}

/* № 2139: книга без готовой обложки — обложка серии буквами (ночь, название Literata), пока Дизайнер не нарисует свою */
.pk-obl-zag { display: flex; flex-direction: column; aspect-ratio: 300 / 426; padding: 12% 11% 9%; border-radius: 2px; background: linear-gradient(180deg, var(--pk-noch) 0%, var(--pk-noch-2) 100%); box-shadow: 0 10px 22px -12px var(--pk-ten); color: #fff; overflow: hidden; }
.pk-obl-zag small { font: 500 .5625rem/1.2 var(--f-ui); color: rgba(255, 255, 255, .62); }
.pk-obl-zag small:last-child { margin-top: auto; }
.pk-obl-zag b { margin-top: 10%; font: 500 clamp(.8125rem, .6rem + .9vw, 1.375rem)/1.12 "Literata", Georgia, serif; overflow-wrap: break-word; hyphens: manual; }
.pk-obl:hover .pk-obl-zag { transform: translateY(-4px); }
.pk-obl-zag { transition: transform .2s var(--dvizh); }
.pk-bud .pk-nazv a { color: var(--tekst); }

/* файлы издания в «Об издании» */
.kk-fayly { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.kk-fayly a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: var(--fon); box-shadow: inset 0 0 0 1px var(--fon-3); color: var(--zag); text-decoration: none; font: 600 .9375rem/1.3 var(--f-ui); }
.kk-fayly a:hover { box-shadow: inset 0 0 0 1px var(--akcent-t); }
.kk-fayly small { font: 500 .8125rem/1.3 var(--f-ui); color: var(--tekst-2); }
.kk-fayly a:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }