/* ============================================================
   ЕКСЛІБРИС · book.css — сторінка книги
   ============================================================ */

.bhero{position:relative;overflow:hidden;color:var(--cream);
  background:linear-gradient(172deg, var(--sky) 0%, var(--sky-2) 82%);padding:104px 0 96px}
.bhero__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:center;
  position:relative;z-index:3}

.crumbs{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  opacity:.55;margin-bottom:26px}
.crumbs a:hover{opacity:1;border-bottom:1px solid currentColor}

.bhero h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.6vw,74px);
  line-height:1.04;margin:0 0 10px;letter-spacing:.005em}
.bhero__sub{font-family:var(--display);font-size:clamp(19px,2.3vw,28px);opacity:.62;
  line-height:1.25;margin-bottom:26px}
.byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:28px}
.byline a{font-size:16px;border-bottom:1px solid color-mix(in srgb, var(--cream) 45%, transparent);padding-bottom:2px}
.byline a:hover{border-color:var(--cream)}
.byline .dot{opacity:.4}
.byline .y{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.bhero__lede{max-width:50ch;font-size:15.5px;font-weight:300;line-height:1.62;margin:0 0 32px;
  color:color-mix(in srgb, var(--cream) 86%, transparent)}

.acts{display:flex;gap:12px;flex-wrap:wrap}
.acts a{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 22px;border:1px solid color-mix(in srgb, var(--cream) 42%, transparent);transition:.25s}
.acts a:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.acts a.solid{background:var(--tape);color:var(--ink);border-color:var(--tape)}
.acts a.solid:hover{background:var(--sage);border-color:var(--sage)}

.bcov{position:relative;justify-self:center;transform:rotate(-2.2deg)}
.bcov .plate{width:224px;aspect-ratio:5/8;background:#4E4260;border:1px solid rgba(0,0,0,.35);
  padding:20px 18px;display:flex;flex-direction:column;color:var(--cream);position:relative;
  box-shadow:14px 18px 0 rgba(20,22,18,.3)}
.bcov .plate::before{content:"";position:absolute;inset:8px;border:1px solid rgba(242,238,223,.3)}
.bcov .plate .t{font-family:var(--display);font-size:22px;line-height:1.16;padding-top:14px}
.bcov .plate .a{font-size:12px;font-weight:300;font-style:italic;opacity:.82;padding-top:10px}
.bcov .plate .y{margin-top:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;opacity:.75}
.bcov .tape{position:absolute;top:-14px;left:-22px;transform:rotate(-6deg);box-shadow:0 4px 10px rgba(8,10,8,.4)}

/* зміст */
.toc-sec{padding:88px 0 92px}
.toc{border-top:1px solid var(--rule);columns:2;column-gap:56px}
.toc__ch{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:baseline;
  padding:13px 6px;border-bottom:1px solid var(--rule-soft);break-inside:avoid;transition:background .2s}
.toc__ch:hover{background:color-mix(in srgb, var(--sage) 28%, transparent)}
.toc__ch .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.06em}
.toc__ch .t{font-family:var(--display);font-size:18px;line-height:1.28}
.toc__ch:hover .t{color:var(--sky)}
.toc__ch.is-hot .t::after{content:"популярний";font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--sage);color:var(--ink);padding:3px 7px;margin-left:10px;
  vertical-align:middle;white-space:nowrap}

/* далі */
.more-sec{padding:88px 0 100px}

@media(max-width:900px){
  .bhero__grid{grid-template-columns:1fr;gap:46px}
  .bcov{justify-self:start}
  .toc{columns:1}
}