/* ==========================================================================
   САЙТ 7k2006.casino — шаблон bindery (переплётная). Акцент hue 67, второй 217
   --------------------------------------------------------------------------
   ПАРАДИГМА
   Переплётная мастерская. Страница — книжный блок, собранный из тетрадей:
     · ВЕРСТАК    — .bnbench, фиксированный слой под контентом (тёмный картон
                    переплёта плюс мелкое волокно). Виден по краям окна;
     · КАПТАЛ     — .bnhead, полосатая тесьма шириной в книжный блок, лежит
                    поверх верхнего среза перед форзацем. Полоса двухцветная:
                    первый акцент через второй, разделённые цветом бумаги;
     · ФОРЗАЦ     — .bnend, первый экран. Подложка .bnend__paper — мраморная
                    бумага (пять слоёв градиентов: два «гребня», две «жилы»,
                    одна заливка). Текст лежит на вклеенном листе .bnend__in,
                    у него своя полупрозрачная бумажная подложка;
     · ТЕТРАДЬ    — .bnsig, главная единица раскладки, одна секция = одна
                    тетрадь. Грид `74px minmax(0,1fr)`: слева корешок
                    .bnsig__spine (кожа, стежки нити, бинт .bnband сверху,
                    шильда с номером .bnsig__no), справа лист .bnsig__leaf
                    с контентом;
     · БИНТ       — .bnband, поперечный валик на корешке. Стоит в начале каждой
                    тетради, поэтому сверху вниз корешок читается как настоящий:
                    ровные промежутки между валиками;
     · ОБРЕЗ      — .bnsig__leaf::after, правый край листа: крап (три слоя
                    точечных радиальных градиентов по вертикальному шагу) на
                    светлой полосе. Правый padding листа обязан быть больше
                    ширины обреза, иначе текст ползёт на крап;
     · КОЛОФОН    — .bncolo, выходные данные = заметка автора (E-E-A-T);
     · ПЛИНТУС    — .bnfoot, тёмный, реквизиты и 18+.
   Кожа, бумага, нить, крап и мрамор нарисованы ТОЛЬКО градиентами и тенями.
   Растровых картинок и SVG-иллюстраций в шаблоне нет, анимаций нет.

   NAMESPACE
   Все классы начинаются на .bn — .bnbench, .bnhead, .bnblock, .bnrun, .bnmark,
   .bnnav, .bnend, .bnkick, .bnlead, .bncta, .bnbtn, .bnkpi, .bnsig, .bnband,
   .bnstitch, .bnleaf-h, .bngrid, .bncard, .bnchips, .bnchip, .bnscroll, .bntab,
   .bntiers, .bntier, .bnrev, .bnfaq, .bnnote, .bncolo, .bnfoot, .bnage,
   .bnem, .bnem2, .bnnum, .bnmut. Вне .bn* объявляются только base-правила
   html/body/p/img/table — пересечений с другими шаблонами банка нет.

   ПОРЯДОК БЛОКОВ (см. bindery.sample.html)
   .bnbench -> .bnblock[ .bnhead -> header.bnrun -> section.bnend
   -> main.bnbody(.bnsig x N) -> aside.bncolo -> footer.bnfoot ].
   Тетради идут ПОДРЯД внутри .bnbody: оттенок кожи корешка чередуется по
   :nth-of-type, посторонний блок между тетрадями рвёт ритм корешка.
   Внутри .bnsig__leaf порядок: .bnleaf-h (кикер + H2) -> проза -> один из
   блоков .bngrid | .bnscroll>table.bntab | .bntiers | .bnchips | .bnfaq
   -> необязательный .bnnote.

   АДАПТИВ
   <=1080px снимается боковое поле верстака (книжный блок во всю ширину);
   <=900px корешок ложится горизонтально над листом (.bnsig в одну колонку,
   бинт становится поперечной планкой, шильда встаёт в строку);
   <=620px всё в одну колонку, кнопки на всю ширину, крап обреза сужается.
   Горизонтального скролла у страницы нет: широкие таблицы лежат в
   .bnscroll{overflow-x:auto}, у гридов minmax(0,1fr), у .bnsig__leaf и ячеек
   min-width:0 — иначе min-width таблицы протекает в грид-трек и на 390px
   появляется горизонтальная полоса.

   ЛОВУШКИ ПЕРЕКРАСКИ
   1. Весь цвет собран внутри блока @palette:start/end и выведен из двух чисел
      --bn-h (акцент сайта) и --bn-h2 (второй акцент). Меняете два числа —
      перекрашивается всё, включая мрамор форзаца, нить, крап и каптал.
      Литеральных hsl() вне блока палитры в шаблоне нет.
   2. Шаблон СВЕТЛЫЙ по контенту и ТЁМНЫЙ по обвязке: лист .bnsig__leaf,
      карточки и таблица — бумага с тёмной краской, а верстак, корешок и
      плинтус — картон переплёта со светлым текстом. Пары --bn-paper/--bn-ink
      и --bn-cover/--bn-coat правятся ТОЛЬКО вместе. Наследование от body внутрь
      листа даёт светлый текст на светлой бумаге.
   3. Цвет надписи кнопок держится на селекторах .bn .bnbtn--p / .bn .bnbtn--g
      (специфичность 0-2-0). Правило .bn a{color} (0-1-1) объявлено НАМЕРЕННО
      выше — если написать цвет кнопки на .bnbtn (0-1-0), ссылочный цвет
      перекроет надпись CTA и кнопка станет нечитаемой. Ту же пару правил
      продублируйте в медиазапросах, если меняете там оформление кнопок.
   4. --bn-acc обязан оставаться СВЕТЛЫМ (L 44-58%): на нём стоит тёмная краска
      --bn-onacc. Уводите акцент в тёмное — переворачивайте и --bn-onacc,
      иначе первый CTA теряет контраст.
   5. --bn-acc2 — вторая краска: нить прошивки, каптал, рамка второй кнопки,
      жилы мрамора. Его тональная дистанция от --bn-acc (+150 град.) держит
      мраморную бумагу; равные хью дают грязную одноцветную заливку.
   6. Тач-цели: min-height:44px задан в базовом правиле .bn a / .bn button И
      продублирован в мобильном медиазапросе. Логотип шапки .bnmark и ссылки
      подвала .bnfoot a — первые, кто проваливается ниже 44px при правке
      паддингов; проверяйте их скриптом, а не глазом.
   ========================================================================== */

:root{
/* @palette:start ——— нейтральная палитра банка; сайт меняет два числа ——— */
  --bn-h: 67;          /* акцент сайта (градусы HSL) */
  --bn-h2: 217;        /* второй акцент, +150 град. */

  --bn-cover:  hsl(var(--bn-h) 11% 11%);   /* картон переплёта, фон страницы */
  --bn-cover2: hsl(var(--bn-h) 13% 17%);   /* кожа корешка, светлее */
  --bn-cover3: hsl(var(--bn-h) 12% 8%);    /* тень корешка и плинтуса */
  --bn-coat:   hsl(var(--bn-h) 16% 84%);   /* текст на картоне */
  --bn-coat2:  hsl(var(--bn-h) 10% 62%);   /* вторичный текст на картоне */

  --bn-paper:  hsl(var(--bn-h) 40% 95%);   /* бумага листа */
  --bn-paper2: hsl(var(--bn-h) 32% 90%);   /* бумага карточки */
  --bn-paper3: hsl(var(--bn-h) 26% 85%);   /* бумага шапки таблицы */
  --bn-ink:    hsl(var(--bn-h) 28% 14%);   /* краска на бумаге */
  --bn-ink2:   hsl(var(--bn-h) 14% 35%);   /* вторичная краска */
  --bn-rule:   hsl(var(--bn-h) 18% 74%);   /* линейка, рамка */
  --bn-speck:  hsl(var(--bn-h) 24% 46%);   /* крап обреза */

  --bn-acc:    hsl(var(--bn-h) 72% 48%);   /* первый акцент: CTA, бинт, цифры */
  --bn-acc-d:  hsl(var(--bn-h) 66% 38%);   /* его тёмная кромка */
  --bn-acc-w:  hsl(var(--bn-h) 62% 88%);   /* его водянистая заливка */
  --bn-onacc:  hsl(var(--bn-h) 46% 10%);   /* краска НА акценте */
  --bn-acc2:   hsl(var(--bn-h2) 58% 40%);  /* второй акцент: нить, каптал */
  --bn-acc2-w: hsl(var(--bn-h2) 46% 90%);  /* его водянистая заливка */
  --bn-thread: hsl(var(--bn-h2) 52% 46%);  /* нить прошивки */

  --bn-fd: "Ysabeau Infant", Georgia, "Segoe UI", system-ui, serif;
  --bn-fb: "IBM Plex Sans", system-ui, "Segoe UI", Arial, sans-serif;
/* @palette:end ————————————————————————————————————————————————— */

  --bn-w: 1180px;      /* ширина книжного блока */
  --bn-spine: 74px;    /* ширина корешка */
  --bn-edge: 16px;     /* ширина обреза с крапом */
}

/* ————————————————————————————— база ————————————————————————————— */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bn-cover);color:var(--bn-coat);
  font:400 17px/1.64 var(--bn-fb);overflow-x:hidden;
}
img{max-width:100%;display:block}
p{margin:0 0 13px}
table{border-collapse:collapse;width:100%}

/* ссылочный цвет объявлен здесь НАМЕРЕННО — см. ловушку 3 в шапке */
.bn a{color:var(--bn-acc2);text-decoration:none}
.bn a,.bn button{display:inline-flex;align-items:center;min-height:44px}

.bnem{color:var(--bn-acc-d);font-weight:600}
.bnem2{color:var(--bn-acc2);font-weight:600}
.bnnum{font-family:var(--bn-fd);font-weight:700;font-variant-numeric:tabular-nums}
.bnmut{color:var(--bn-ink2)}

/* ——————————————————— верстак: фиксированный фон ——————————————————— */
.bnbench{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(96deg, hsl(var(--bn-h) 14% 6% / .55) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(4deg, hsl(var(--bn-h) 12% 26% / .18) 0 1px, transparent 1px 11px),
    radial-gradient(130% 90% at 50% 0%, var(--bn-cover2) 0%, var(--bn-cover) 52%, var(--bn-cover3) 100%);
}

/* ——————————————————— книжный блок и колонтитул ——————————————————— */
.bnblock{
  position:relative;z-index:1;
  max-width:var(--bn-w);margin:0 auto;padding:0 0 0;
}

/* каптал — тесьма поверх верхнего среза */
.bnhead{
  height:15px;border-radius:8px 8px 0 0;
  background:repeating-linear-gradient(90deg,
    var(--bn-acc) 0 7px, var(--bn-paper) 7px 14px,
    var(--bn-acc2) 14px 21px, var(--bn-paper) 21px 28px);
  box-shadow:inset 0 -4px 7px hsl(var(--bn-h) 20% 6% / .40),
             0 1px 0 var(--bn-cover3);
}

.bnrun{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:9px 22px;
  background:linear-gradient(180deg, var(--bn-cover2), var(--bn-cover));
  border-bottom:1px solid var(--bn-cover3);
}
.bnmark{
  font:700 22px/1.1 var(--bn-fd);letter-spacing:.4px;color:var(--bn-coat);
  padding:6px 12px 6px 0;gap:9px;min-height:44px;
}
.bnmark i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:3px;font-size:15px;
  background:var(--bn-acc);color:var(--bn-onacc);
  box-shadow:0 2px 0 var(--bn-acc-d);
}
.bnnav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.bnnav a{
  color:var(--bn-coat2);font-size:14.5px;padding:6px 11px;border-radius:3px;
  min-height:44px;border:1px solid transparent;
}
.bnnav a:hover{color:var(--bn-coat);border-color:hsl(var(--bn-h) 12% 30%)}

/* ——————————————————— форзац: мраморная бумага ——————————————————— */
.bnend{position:relative;overflow:hidden;border-bottom:3px solid var(--bn-cover3)}
.bnend__paper{
  position:absolute;inset:0;z-index:0;
  background:
    repeating-radial-gradient(circle at 17% 26%,
      hsl(var(--bn-h2) 44% 44% / .17) 0 9px, transparent 9px 25px),
    repeating-radial-gradient(circle at 78% 71%,
      hsl(var(--bn-h) 62% 42% / .16) 0 8px, transparent 8px 22px),
    repeating-linear-gradient(103deg,
      hsl(var(--bn-h2) 42% 38% / .11) 0 5px, transparent 5px 19px),
    repeating-linear-gradient(-77deg,
      hsl(var(--bn-h) 54% 40% / .10) 0 4px, transparent 4px 16px),
    radial-gradient(125% 95% at 28% 0%,
      hsl(var(--bn-h) 44% 96%) 0%, hsl(var(--bn-h) 34% 88%) 58%,
      hsl(var(--bn-h) 24% 79%) 100%);
}
.bnend__in{
  position:relative;z-index:1;margin:26px 30px 30px;padding:26px 28px 28px;
  background:hsl(var(--bn-h) 42% 97% / .90);
  color:var(--bn-ink);
  border:1px solid var(--bn-rule);
  box-shadow:0 12px 30px hsl(var(--bn-h) 20% 8% / .28);
}
.bnkick{
  display:inline-flex;align-items:center;gap:9px;
  font:600 12.5px/1 var(--bn-fb);letter-spacing:2.1px;text-transform:uppercase;
  color:var(--bn-acc2);margin:0 0 14px;
}
.bnkick::before{content:"";width:34px;height:2px;background:var(--bn-acc)}
.bnend h1{
  font:700 clamp(29px,4.5vw,52px)/1.08 var(--bn-fd);
  margin:0 0 14px;color:var(--bn-ink);letter-spacing:-.4px;
}
.bnlead{font-size:18px;line-height:1.6;color:var(--bn-ink2);max-width:64ch;margin:0 0 20px}

/* ——————————————————————— кнопки и KPI ——————————————————————— */
.bncta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.bnbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:12px 26px;border-radius:3px;
  font:600 16px/1 var(--bn-fb);letter-spacing:.2px;
  border:1px solid transparent;cursor:pointer;text-align:center;
}
/* 0-2-0 — перебивает .bn a{color} (0-1-1). Не понижать до .bnbtn! */
.bn .bnbtn--p{
  background:linear-gradient(180deg, var(--bn-acc), var(--bn-acc-d));
  color:var(--bn-onacc);border-color:var(--bn-acc-d);
  box-shadow:0 3px 0 var(--bn-acc-d), 0 8px 18px hsl(var(--bn-h) 40% 20% / .30);
}
.bn .bnbtn--g{
  background:var(--bn-paper);color:var(--bn-ink);
  border-color:var(--bn-acc2);box-shadow:0 3px 0 var(--bn-rule);
}
.bnkpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bnkpi div{
  min-width:0;padding:12px 13px;background:var(--bn-paper2);
  border:1px solid var(--bn-rule);border-top:3px solid var(--bn-acc);
}
.bnkpi__v{
  display:block;font:700 25px/1.1 var(--bn-fd);color:var(--bn-ink);
  font-variant-numeric:tabular-nums;
}
.bnkpi__c{display:block;font-size:12.5px;line-height:1.35;color:var(--bn-ink2);margin-top:5px}

/* ————————————————————— тетради (секции) ————————————————————— */
.bnbody{display:block}
.bnsig{
  display:grid;grid-template-columns:var(--bn-spine) minmax(0,1fr);
  background:var(--bn-paper);
  border-bottom:1px solid var(--bn-rule);
}
.bnsig__spine{
  position:relative;min-width:0;
  background:linear-gradient(90deg, var(--bn-cover3) 0%, var(--bn-cover2) 42%, var(--bn-cover) 100%);
  box-shadow:inset -6px 0 12px hsl(var(--bn-h) 20% 5% / .45);
}
.bnsig:nth-of-type(2n) .bnsig__spine{
  background:linear-gradient(90deg, var(--bn-cover3) 0%, var(--bn-cover) 46%, var(--bn-cover2) 100%);
}
/* стежки нити вдоль корешка */
.bnstitch{
  position:absolute;top:0;bottom:0;left:26px;width:2px;
  background:repeating-linear-gradient(180deg,
    var(--bn-thread) 0 11px, transparent 11px 20px);
  opacity:.85;
}
.bnstitch::after{
  content:"";position:absolute;top:0;bottom:0;left:11px;width:2px;
  background:repeating-linear-gradient(180deg,
    hsl(var(--bn-h2) 40% 34%) 0 7px, transparent 7px 20px);
}
/* бинт — поперечный валик в начале тетради */
.bnband{
  position:absolute;top:16px;left:-4px;right:-8px;height:17px;
  background:linear-gradient(180deg,
    hsl(var(--bn-h) 16% 34%) 0%, hsl(var(--bn-h) 14% 22%) 46%, var(--bn-cover3) 100%);
  border-top:1px solid hsl(var(--bn-h) 16% 40%);
  box-shadow:0 3px 7px hsl(var(--bn-h) 20% 5% / .5);
}
.bnband::after{
  content:"";position:absolute;left:0;right:0;top:3px;height:2px;
  background:var(--bn-acc);opacity:.55;
}
.bnsig__no{
  position:absolute;top:54px;left:50%;transform:translateX(-50%);
  writing-mode:vertical-rl;
  font:600 11.5px/1 var(--bn-fb);letter-spacing:2.6px;text-transform:uppercase;
  color:var(--bn-coat2);padding:9px 4px;
  border:1px solid hsl(var(--bn-h) 12% 30%);border-radius:2px;
  background:hsl(var(--bn-h) 12% 14%);
}
.bnsig__leaf{
  position:relative;min-width:0;
  padding:34px calc(var(--bn-edge) + 30px) 34px 34px;
  color:var(--bn-ink);
  background:
    linear-gradient(90deg, hsl(var(--bn-h) 24% 78% / .55) 0 2px, transparent 2px),
    var(--bn-paper);
}
/* обрез с крапом по правому краю листа */
.bnsig__leaf::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:var(--bn-edge);
  border-left:1px solid var(--bn-rule);
  background:
    radial-gradient(circle at 4px 8px, var(--bn-speck) 1.1px, transparent 1.3px),
    radial-gradient(circle at 11px 21px, var(--bn-speck) .9px, transparent 1.1px),
    radial-gradient(circle at 7px 34px, var(--bn-speck) 1px, transparent 1.2px),
    linear-gradient(90deg, hsl(var(--bn-h) 22% 82%), hsl(var(--bn-h) 30% 93%));
  background-size:15px 41px,15px 41px,15px 41px,100% 100%;
  opacity:.9;
}
.bnleaf-h{margin:0 0 15px}
.bnleaf-h .bnkick{margin-bottom:9px}
.bnsig h2{
  font:700 clamp(22px,2.7vw,32px)/1.16 var(--bn-fd);
  margin:0;color:var(--bn-ink);letter-spacing:-.2px;
}
.bnsig h2::after{
  content:"";display:block;width:64px;height:3px;margin-top:11px;
  background:linear-gradient(90deg, var(--bn-acc) 0 32px, var(--bn-acc2) 32px 64px);
}
.bnsig h3{font:600 18px/1.25 var(--bn-fd);margin:0 0 7px;color:var(--bn-ink)}

/* ——————————————————— наполнение листа ——————————————————— */
.bngrid{display:grid;gap:13px;margin:16px 0 4px}
.bngrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bngrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bncard{
  min-width:0;padding:15px 16px;background:var(--bn-paper2);
  border:1px solid var(--bn-rule);border-left:3px solid var(--bn-acc);
}
.bncard--x{border-left-color:var(--bn-acc2)}
.bncard p:last-child{margin-bottom:0}
.bncard .bnnum{font-size:21px;color:var(--bn-ink)}

.bnchips{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 4px;padding:0;list-style:none}
.bnchips li{
  padding:7px 12px;font-size:14px;background:var(--bn-acc-w);
  border:1px solid var(--bn-rule);color:var(--bn-ink);border-radius:2px;
}
.bnchips li:nth-child(3n){background:var(--bn-acc2-w)}

.bnscroll{overflow-x:auto;margin:16px 0 4px;border:1px solid var(--bn-rule);min-width:0}
.bntab{min-width:560px;font-size:15px;background:var(--bn-paper)}
.bntab th,.bntab td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--bn-rule)}
.bntab th{
  background:var(--bn-paper3);color:var(--bn-ink);font-weight:600;
  font-family:var(--bn-fd);letter-spacing:.3px;
}
.bntab td{color:var(--bn-ink2)}
.bntab tr:last-child td{border-bottom:0}
.bntab td:first-child{color:var(--bn-ink);font-weight:500}

.bntiers{display:grid;gap:9px;margin:16px 0 4px}
.bntier{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:11px 14px;background:var(--bn-paper2);
  border:1px solid var(--bn-rule);border-left:3px solid var(--bn-acc2);
}
.bntier i{
  font-style:normal;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:2px;
  background:var(--bn-acc);color:var(--bn-onacc);
  font:700 15px/1 var(--bn-fd);
}
.bntier span{min-width:0;font-size:15px;color:var(--bn-ink2)}
.bntier em{font-style:normal;white-space:nowrap;font-weight:600;color:var(--bn-ink)}

.bnrev{
  margin:0;padding:15px 16px;background:var(--bn-paper2);
  border:1px solid var(--bn-rule);border-top:3px solid var(--bn-acc2);
  min-width:0;
}
.bnrev blockquote{margin:0 0 10px;font-size:15.5px;color:var(--bn-ink)}
.bnrev figcaption{font-size:13px;color:var(--bn-ink2)}

.bnfaq{margin:16px 0 4px}
.bnfaq details{border:1px solid var(--bn-rule);background:var(--bn-paper2);margin-bottom:8px}
.bnfaq summary{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:11px 14px;
  cursor:pointer;font:600 15.5px/1.35 var(--bn-fb);color:var(--bn-ink);list-style:none;
}
.bnfaq summary::-webkit-details-marker{display:none}
.bnfaq summary::before{
  content:"";flex:0 0 auto;width:11px;height:11px;
  background:var(--bn-acc);border:1px solid var(--bn-acc-d);
}
.bnfaq details[open] summary::before{background:var(--bn-acc2);border-color:var(--bn-acc2)}
.bnfaq p{margin:0 14px 13px;font-size:15.5px;color:var(--bn-ink2)}

.bnnote{
  margin:16px 0 0;padding:12px 15px;font-size:15px;color:var(--bn-ink2);
  background:var(--bn-acc2-w);border-left:3px solid var(--bn-acc2);
}

/* ——————————————————— колофон = заметка автора ——————————————————— */
.bncolo{
  position:relative;padding:28px 34px 30px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 27px, hsl(var(--bn-h) 20% 72% / .55) 27px 28px),
    var(--bn-paper);
  color:var(--bn-ink);border-bottom:1px solid var(--bn-rule);
}
.bncolo h3{font:700 21px/1.2 var(--bn-fd);margin:0 0 10px;color:var(--bn-ink)}
.bncolo p{color:var(--bn-ink2);max-width:78ch}
.bncolo p:last-child{margin-bottom:0}

/* ————————————————————————— плинтус ————————————————————————— */
.bnfoot{
  padding:26px 30px 32px;background:var(--bn-cover3);color:var(--bn-coat2);
  border-top:3px solid var(--bn-acc2);font-size:14.5px;
}
.bnfoot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px}
.bnfoot a{color:var(--bn-coat);min-height:44px;padding:4px 0}
.bnfoot p{margin:0 0 9px;max-width:92ch}
.bnage{
  display:inline-flex;align-items:center;min-height:34px;padding:4px 11px;margin:6px 0 10px;
  border:1px solid var(--bn-acc);color:var(--bn-acc);
  font:700 14px/1 var(--bn-fd);letter-spacing:1.2px;
}

/* ————————————————————————— адаптив ————————————————————————— */
@media (max-width:1080px){
  .bnblock{max-width:100%}
  .bnkpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .bnsig{grid-template-columns:minmax(0,1fr)}
  .bnsig__spine{
    height:46px;
    background:linear-gradient(180deg, var(--bn-cover2), var(--bn-cover3));
    box-shadow:inset 0 -6px 12px hsl(var(--bn-h) 20% 5% / .45);
  }
  .bnsig:nth-of-type(2n) .bnsig__spine{
    background:linear-gradient(180deg, var(--bn-cover), var(--bn-cover3));
  }
  .bnstitch{top:auto;bottom:7px;left:0;right:0;width:auto;height:2px;
    background:repeating-linear-gradient(90deg,
      var(--bn-thread) 0 11px, transparent 11px 20px);}
  .bnstitch::after{top:6px;bottom:auto;left:0;right:0;width:auto;height:2px;
    background:repeating-linear-gradient(90deg,
      hsl(var(--bn-h2) 40% 34%) 0 7px, transparent 7px 20px);}
  .bnband{top:0;left:0;right:0;height:9px}
  .bnsig__no{
    top:13px;left:16px;transform:none;writing-mode:horizontal-tb;padding:4px 9px;
  }
  .bnsig__leaf{padding:26px calc(var(--bn-edge) + 18px) 26px 20px}
  .bngrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bnend__in{margin:18px;padding:20px 18px 22px}
  .bncolo{padding:24px 20px}
  .bnfoot{padding:22px 20px 28px}
}
@media (max-width:620px){
  body{font-size:16.5px}
  :root{--bn-edge:10px}
  .bngrid--2,.bngrid--3,.bnkpi{grid-template-columns:minmax(0,1fr)}
  .bncta{flex-direction:column;align-items:stretch}
  /* дубль пары правил: цвет надписи кнопки не должен зависеть от .bn a */
  .bn .bnbtn{width:100%;min-height:52px;padding:13px 18px}
  .bn .bnbtn--p{color:var(--bn-onacc)}
  .bn .bnbtn--g{color:var(--bn-ink)}
  .bn a,.bn button{min-height:44px}
  .bnnav a{padding:6px 9px;font-size:14px;min-height:44px}
  .bnmark{font-size:19px;min-height:44px}
  .bnfoot a{min-height:44px}
  .bntier{grid-template-columns:34px minmax(0,1fr);row-gap:7px}
  .bntier em{grid-column:1/-1}
  .bnrun{padding:8px 14px}
  .bnsig__leaf{padding:22px calc(var(--bn-edge) + 12px) 22px 15px}
}