/* bookspine — авторский шаблон, namespace .bs */

:root{
  --bsLeather:#241a14;
  --bsPanel:#31241b;
  --bsGold:#cfa349;
  --bsRed:#7b2d26;
  --bsPaper:#efe6d5;
  --bsInk:#2a201a;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bsLeather);
  color:var(--bsPaper);
  font-family:'Commissioner',system-ui,'Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.62;
  overflow-wrap:break-word;
}

.bs{max-width:1060px;margin:0 auto;padding:0 14px}
.bs p{margin:0 0 14px}

.bs h1,.bs h2{
  font-family:'Vollkorn SC','Vollkorn',Georgia,'Times New Roman',serif;
  font-weight:700;
  letter-spacing:.012em;
}

/* ---------- шапка ---------- */

.bsHead{
  background:var(--bsPanel);
  border-bottom:2px solid var(--bsGold);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
.bsHeadIn{
  max-width:1060px;margin:0 auto;padding:9px 14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.bsLogo{display:flex;align-items:center;gap:9px;text-decoration:none}
.bsLogoTx{
  font-family:'Vollkorn SC',Georgia,serif;
  font-size:18px;letter-spacing:.07em;color:var(--bsGold);line-height:1.1;
}
.bsLogoSub{display:block;font-family:'Commissioner',sans-serif;font-size:10.5px;letter-spacing:.14em;color:#9c8664}
.bsHeadGap{flex:1 1 auto}

.bsHead a.bsCta,
.bs a.bsCta{
  display:inline-block;
  background:linear-gradient(180deg,#e7c47c,#b9862f);
  color:#231a12;
  text-decoration:none;
  font-weight:600;font-size:14px;
  padding:9px 17px;border-radius:3px;
  border:1px solid #f2d79a;
  box-shadow:0 2px 0 #6d4c14;
  white-space:nowrap;
}
.bsHead a.bsCta:hover,
.bs a.bsCta:hover{filter:brightness(1.07)}
.bsHead a.bsCtaWide,
.bs a.bsCtaWide{padding:12px 26px;font-size:15.5px}

/* ---------- герой ---------- */

.bsHero{
  background:var(--bsPanel);
  border:1px solid #4a3627;
  border-left:7px solid var(--bsRed);
  border-radius:2px;
  padding:26px 22px 22px;
  margin:20px 0 20px;
}
.bsHero h1{font-size:30px;line-height:1.2;margin:0 0 13px;color:var(--bsGold)}
.bsLede{font-size:16.5px;color:#e4d8c1;margin:0 0 16px;max-width:72ch}
.bsStats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.bsStat{
  background:#211710;border:1px solid #57402c;border-radius:2px;
  padding:8px 12px;font-size:13.5px;color:#ddd0b8;
}
.bsFig{color:var(--bsGold);font-weight:600}

/* ---------- книги на полке ---------- */

.bsGroup{display:flex;flex-direction:column;gap:3px}
.bsBook{
  display:flex;
  background:var(--bsPaper);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.45);
}
.bsSpine{
  flex:0 0 54px;width:54px;
  position:relative;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:46px;
  background:var(--bsRed);
  box-shadow:inset -6px 0 12px -6px rgba(0,0,0,.6),inset 6px 0 10px -6px rgba(255,255,255,.14);
}
.bsBand{position:absolute;left:0;right:0;height:7px;background:linear-gradient(180deg,#e9c988,#a97f2d)}
.bsBandT{top:18px}
.bsBandB{bottom:18px}
.bsVolume{
  writing-mode:vertical-rl;text-orientation:sideways;transform:rotate(180deg);
  font-family:'Vollkorn SC',Georgia,serif;
  font-size:12.5px;letter-spacing:.26em;color:#f6e6c1;
}
.bsS1{background:#7b2d26}
.bsS2{background:#3f5a46}
.bsS3{background:#2f4258}
.bsS4{background:#5a3a67}
.bsS5{background:#7a5a22}
.bsS6{background:#6a3526}
.bsS7{background:#2d4f4f}
.bsS8{background:#4a3a6b}
.bsS9{background:#6e4a1f}
.bsS10{background:#55342c}
.bsS11{background:#36503a}

.bsPage{
  flex:1 1 auto;min-width:0;
  padding:22px 24px 8px;
  color:var(--bsInk);
  background:linear-gradient(90deg,#dfd3bb 0,#e7dcc7 10px,var(--bsPaper) 26px);
}
.bsPage h2{font-size:23px;line-height:1.24;margin:0 0 12px;color:#4a2b1e}
.bsPage h3{
  font-family:'Commissioner',sans-serif;
  margin:18px 0 8px;font-size:14px;font-weight:600;
  color:#7b4a2c;text-transform:uppercase;letter-spacing:.07em;
}
.bsPage p{color:#33271e}

.bsShelf{
  height:13px;margin:0 0 26px;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,#d9b169,#8b6524 55%,#573c13);
  box-shadow:0 14px 22px -8px rgba(0,0,0,.8);
}

/* ---------- каталожная полка ---------- */

.bsRack{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin:16px 0 18px}
.bsRackItem{width:70px;display:flex;flex-direction:column}
.bsRackSpine{
  position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:2px 2px 0 0;padding:12px 0;
  box-shadow:inset -5px 0 10px -5px rgba(0,0,0,.55);
}
.bsRackName{
  writing-mode:vertical-rl;text-orientation:sideways;transform:rotate(180deg);
  font-size:11.5px;line-height:1.15;letter-spacing:.02em;color:#f7ead0;
}
.bsRackRtp{
  background:#241a14;color:var(--bsGold);
  font-size:11px;text-align:center;padding:4px 0;border-radius:0 0 2px 2px;
  letter-spacing:.04em;
}
.bsH1{height:196px}
.bsH2{height:168px}
.bsH3{height:212px}
.bsH4{height:180px}
.bsH5{height:204px}
.bsH6{height:158px}

/* ---------- карточки ---------- */

.bsCards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 16px}
.bsCardItem{
  border:1px solid #cdbc9d;border-left:4px solid #7b2d26;
  background:#f6efe1;padding:12px 14px;border-radius:2px;
}
.bsCardT{font-weight:600;font-size:15px;color:#3a241a;margin:0 0 3px}
.bsMeta{font-size:12.5px;color:#83612f;letter-spacing:.03em;margin:0 0 7px}
.bsCardItem p{margin:0;font-size:14px}

.bsSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 16px}
.bsStep{background:#f6efe1;border:1px solid #cdbc9d;border-top:4px solid #9c5a4a;padding:11px 12px;border-radius:2px}
.bsStepN{font-family:'Vollkorn SC',Georgia,serif;font-size:12px;letter-spacing:.16em;color:#8a5a2c;display:block;margin:0 0 4px}
.bsStep p{margin:0;font-size:13.5px;color:#33271e}

/* ---------- клуб: книги растущей толщины ---------- */

.bsClub{display:flex;flex-direction:column;gap:4px;margin:16px 0 18px}
.bsClubBook{display:flex;background:#f6efe1;border:1px solid #cdbc9d;border-radius:2px;overflow:hidden}
.bsClubSpine{
  flex:0 0 auto;position:relative;
  box-shadow:inset -5px 0 10px -5px rgba(0,0,0,.6);
}
.bsT1{width:18px;background:#a4685a}
.bsT2{width:26px;background:#95584c}
.bsT3{width:34px;background:#86473e}
.bsT4{width:42px;background:#7b2d26}
.bsT5{width:50px;background:#63231e}
.bsT6{width:58px;background:#4c1a16}
.bsClubBody{padding:10px 14px;flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline}
.bsClubName{font-weight:600;color:#3a241a;font-size:15px}
.bsClubFig{font-size:13.5px;color:#6b533a}

/* ---------- таблица кассы ---------- */

.bsTableWrap{overflow-x:auto;margin:14px 0 16px}
.bsTable{width:100%;border-collapse:collapse;font-size:14px}
.bsTable th{
  background:#e2d5ba;color:#3a241a;text-align:left;
  padding:8px 10px;font-weight:600;font-size:13px;border-bottom:2px solid #b79a63;
}
.bsTable td{padding:8px 10px;border-bottom:1px solid #d8c9ac;color:#33271e}

/* ---------- врезка-отзыв ---------- */

.bsNote{
  margin:16px 0;padding:13px 16px;
  background:#e9dcc2;border-left:4px solid var(--bsGold);border-radius:2px;
}
.bsNote p{margin:0 0 6px;font-size:14.5px;font-style:italic;color:#3b2c20}
.bsNoteWho{margin:0;font-style:normal;font-size:12.5px;color:#7d5c30;letter-spacing:.03em}

/* ---------- FAQ ---------- */

.bsFaq details{border-bottom:1px solid #d3c3a4;padding:9px 0}
.bsFaq summary{
  cursor:pointer;font-weight:600;font-size:15px;color:#3a241a;
  list-style:none;position:relative;padding-right:26px;
}
.bsFaq summary::-webkit-details-marker{display:none}
.bsFaq summary::after{content:'+';position:absolute;right:4px;top:-3px;color:#9a6a2a;font-size:20px;line-height:1.4}
.bsFaq details[open] summary::after{content:'\2212'}
.bsFaq p{margin:8px 0 2px;font-size:14.5px}

/* ---------- автор + подвал ---------- */

.bsAuthor{
  background:var(--bsPanel);
  border:1px solid #4a3627;border-top:3px solid var(--bsGold);
  border-radius:2px;padding:18px 20px 8px;margin:6px 0 24px;
  color:#dcd0b9;font-size:14.5px;
}
.bsAuthorT{
  font-family:'Vollkorn SC',Georgia,serif;font-size:15px;letter-spacing:.08em;
  color:var(--bsGold);margin:0 0 8px;text-transform:uppercase;
}
.bsFoot{background:#1b130e;border-top:2px solid #4a3627;padding:22px 0 34px;color:#b5a78f;font-size:13.5px}
.bsFoot p{margin:0 0 9px;max-width:92ch}
.bs a{color:var(--bsGold)}
.bsCtaRow{margin:18px 0 6px}

/* ---------- 390 px: корешок ложится горизонтальной полосой ---------- */

@media (max-width:660px){
  .bsHero{padding:20px 16px 18px;border-left-width:5px}
  .bsHero h1{font-size:23px;line-height:1.24}
  .bsLede{font-size:15.5px}

  .bsBook{flex-direction:column}
  .bsSpine{flex:0 0 32px;width:auto;height:32px;align-items:center;padding-top:0}
  .bsBand{top:0;bottom:0;left:16px;right:auto;width:7px;height:auto;background:linear-gradient(90deg,#e9c988,#a97f2d)}
  .bsBandB{top:0;bottom:0;right:16px;left:auto;width:7px;height:auto}
  .bsVolume{writing-mode:horizontal-tb;transform:none;font-size:12px;letter-spacing:.3em}

  .bsPage{padding:18px 15px 6px;background:var(--bsPaper)}
  .bsPage h2{font-size:19px}

  .bsCards,.bsSteps{grid-template-columns:1fr}
  .bsRackItem{width:64px}
  .bsRackName{font-size:11px}
  .bsTable{font-size:13px}
  .bsTable th,.bsTable td{padding:7px 8px}
  .bsClubBody{padding:9px 11px;gap:2px 12px}
  .bsT1{width:12px}.bsT2{width:18px}.bsT3{width:24px}
  .bsT4{width:30px}.bsT5{width:36px}.bsT6{width:42px}
  .bsHeadIn{padding:8px 12px;gap:8px}
  .bsLogoTx{font-size:16px}
  .bsHead a.bsCta,
.bs a.bsCta{padding:8px 13px;font-size:13px}
}