:root {
  /* --- Цвета: примитивы --- */
  --bb-ink: #0c1323;
  --bb-white-pill: #f5f6fa;
  --bb-marine: #0d1b2e;
  --bb-marine-light: #223556;
  --bb-blue-light: #e8eefb;
  --bb-accent: #344a9a;
  --bb-secondary-bg-light: #e4e8f0;

  /* --- Текст (свой набор под каждую тему блока) --- */
  --bb-text-primary-light: #0c1323;
  --bb-text-primary-dark: #f5f6fa;
  --bb-text-secondary-light: #323e4f;
  --bb-text-secondary-dark: #c4c9d2;

  /* --- Кнопки --- */
  --bb-btn-primary-bg: #f5f6fa;
  --bb-btn-primary-text: #0c1323;
  --bb-btn-secondary-bg-light: #e4e8f0;
  --bb-btn-secondary-text-light: #0c1323;
  --bb-btn-secondary-bg-dark: #223556;
  --bb-btn-secondary-text-dark: #f5f6fa;

  /* --- Blues, шкала 100 (тёмный) → 900 (светлый) --- */
  --bb-blue-100: #122036;
  --bb-blue-200: #1f365c;
  --bb-blue-300: #2d4b82;
  --bb-blue-400: #3a5fa8;
  --bb-blue-500: #5377c3;
  --bb-blue-600: #7a94d0;
  --bb-blue-700: #a0b1dd;
  --bb-blue-800: #c6d0ea;
  --bb-blue-900: #eceff8;

  /* --- Arrows --- */
  --bb-arrow-default-on-dark: #4a5a75;
  --bb-arrow-default-on-light: #8fa3c4;
  --bb-arrow-hover: #344a9a; /* alias accent */

  /* --- Типографика --- */
  --bb-font-header: 'WDXL Lubrifont SC', sans-serif;
  --bb-font-body: 'Inter', sans-serif;
  --bb-letter-spacing: -0.02em;

  /* --- Сетка: значения по умолчанию = Mobile --- */
  --bb-columns: 4;
  --bb-margin: 16px;
  --bb-gutter: 24px;
  --bb-container-max: none;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Tablet */
  :root {
    --bb-columns: 4;
    --bb-margin: 28px;
    --bb-gutter: 24px;
  }
}



@media (min-width: 1024px) {
  /* Desktop S / Desktop L: сетка одна и та же, меняется только контейнер */
  :root {
    --bb-columns: 16;
    --bb-margin: 20px;
    --bb-gutter: 24px;
    --bb-container-max: 1536px;
  }
}

/* Утилита-контейнер: тянется на 100% до 1536px, дальше центрируется с fixed max-width */
.bb-container {
  width: 100%;
  max-width: var(--bb-container-max, none);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bb-margin);
  padding-right: var(--bb-margin);
  box-sizing: border-box;
}

.bb-grid {
  display: grid;
  grid-template-columns: repeat(var(--bb-columns), 1fr);
  gap: var(--bb-gutter);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ХОВЕР КНОПОК — добавка к global.css.
   Единственное место, где живёт механика ховера. Дописывается в конец того
   global.css, что стоит на Tilda; новые кнопки правим здесь же.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Такт ховера — общий для всех кнопок. Дописывается в существующий :root. */
:root {
  --bb-hover-duration: 320ms;
  --bb-hover-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
}

.bb-btn-sweep {
  background-image: linear-gradient(to top,
                                    var(--bb-sweep-fill, var(--bb-blue-200)) 50%,
                                    transparent 50%);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 50% 0%;    /* видна прозрачная половина */
  transition:
    background-position var(--bb-hover-duration) var(--bb-hover-ease),
    color var(--bb-hover-duration) var(--bb-hover-ease);
}

.bb-btn-sweep .bb-sweep-tile {
  transition: fill var(--bb-hover-duration) var(--bb-hover-ease);
}

.bb-btn-sweep .bb-sweep-glyph {
  transition: stroke var(--bb-hover-duration) var(--bb-hover-ease);
}

/* hover: hover — чтобы на тапе по мобиле состояние не залипало до следующего тапа. */
@media (hover: hover) {
  .bb-btn-sweep:hover { background-position: 50% 100%; color: var(--bb-sweep-text, var(--bb-white-pill)); }
  .bb-btn-sweep:hover .bb-sweep-tile { fill: var(--bb-sweep-tile, var(--bb-blue-600)); }
  .bb-btn-sweep:hover .bb-sweep-glyph { stroke: var(--bb-sweep-glyph, var(--bb-ink)); }
}

/* Клавиатура получает то же состояние, что и мышь. */
.bb-btn-sweep:focus-visible { background-position: 50% 100%; color: var(--bb-sweep-text, var(--bb-white-pill)); }
.bb-btn-sweep:focus-visible .bb-sweep-tile { fill: var(--bb-sweep-tile, var(--bb-blue-600)); }
.bb-btn-sweep:focus-visible .bb-sweep-glyph { stroke: var(--bb-sweep-glyph, var(--bb-ink)); }

@media (prefers-reduced-motion: reduce) {
  .bb-btn-sweep,
  .bb-btn-sweep .bb-sweep-tile,
  .bb-btn-sweep .bb-sweep-glyph { transition-duration: 1ms; }
}

.no-wrap { white-space: nowrap; }


/* Статья */

/* ==========================================================================
   bb-article — страница новости /novosti/{slug}
   Ставится ОДИН РАЗ: Настройки сайта → Ещё → HTML-код для вставки внутрь HEAD
   (обернуть в ...</style>). В блок статьи стили не копируются.
   ========================================================================== */
.bb-article {
  /* ритм и чтение */
  --bb-a-text: 18px;          /* базовый кегль текста */
  --bb-a-measure: 34em;       /* ширина колонки ≈ 68 знаков */
  --bb-a-bleed: 0px;          /* выход картинок за колонку */
  --bb-a-head: 24px;
  --bb-a-lead: 32px;
  --bb-a-ink: #1b2333;        /* текст: мягче чистого ink */

  padding: 120px 0 80px;
  background: var(--bb-white-pill, #f5f6fa);
}
.bb-article *,
.bb-article *::before,
.bb-article *::after { box-sizing: border-box; }
.bb-article__inner { display: flex; flex-direction: column; }
.bb-article ::selection { background: #d6e0f7; color: var(--bb-ink, #0c1323); }

/* Полоска прогресса чтения */
.bb-article__progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 50;
  pointer-events: none;
}
.bb-article__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bb-accent, #344a9a);
  transform-origin: left center;
}

/* Назад */
.bb-article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: var(--bb-a-head);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--bb-hover-duration, 320ms) var(--bb-hover-ease, cubic-bezier(0.33, 1, 0.68, 1));
}
.bb-article__back,
.bb-article__back:link,
.bb-article__back:visited { color: var(--bb-text-secondary-light, #323e4f) !important; }
.bb-article__back-arrow {
  width: 24px; height: 24px; flex-shrink: 0;
  transition: transform var(--bb-hover-duration, 320ms) var(--bb-hover-ease, cubic-bezier(0.33, 1, 0.68, 1));
}
@media (hover: hover) {
  .bb-article__back:hover,
  .bb-article__back:hover:link,
  .bb-article__back:hover:visited { color: var(--bb-ink, #0c1323) !important; }
  .bb-article__back:hover .bb-article__back-arrow { transform: translateX(-4px); }
}
.bb-article__back:focus-visible { color: var(--bb-ink, #0c1323) !important; }

/* Шапка */
.bb-article__title {
  margin: 0 0 16px;
  font-family: 'WDXLLubrifontTC', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--bb-ink, #0c1323);
}
.bb-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bb-text-secondary-light, #323e4f);
}
.bb-article__meta-sep {
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 1px;
  background: var(--bb-accent, #344a9a);
}

/* Автор */
.bb-article__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--bb-a-lead);
  font-family: 'Inter', sans-serif;
}

.bb-article__author-name,
.bb-article__author-role { margin: 0; letter-spacing: -0.01em; }
.bb-article__author-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--bb-ink, #0c1323);
}
.bb-article__author-name a {
  text-decoration: none;
  transition: color 200ms ease;
}
.bb-article__author-name a,
.bb-article__author-name a:link,
.bb-article__author-name a:visited { color: var(--bb-ink, #0c1323) !important; }
@media (hover: hover) {
  .bb-article__author-name a:hover,
  .bb-article__author-name a:hover:link,
  .bb-article__author-name a:hover:visited { color: var(--bb-accent, #344a9a) !important; }
}
.bb-article__author-name a:focus-visible { color: var(--bb-accent, #344a9a) !important; }
.bb-article__author-role {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--bb-text-secondary-light, #323e4f);
}

.bb-article__cover {
  position: relative;
  margin: 0 0 var(--bb-a-lead);
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  background: var(--bb-secondary-bg-light, #e4e8f0);
}
.bb-article__cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Тело статьи ── */
.bb-article__body {
  width: 100%;
  max-width: var(--bb-a-measure);
  margin-inline: auto;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: var(--bb-a-text);
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--bb-a-ink);
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  hanging-punctuation: first last;
  font-variant-numeric: proportional-nums;
}
.bb-article__body > *:first-child { margin-top: 0; }
.bb-article__body > *:last-child { margin-bottom: 0; }
.bb-article__body p { margin: 0 0 1.3em; }
.bb-article__body strong { font-weight: 600; color: var(--bb-ink, #0c1323); }

/* Лид */
.bb-article__lead {
  font-size: 1.2em;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--bb-ink, #0c1323);
  margin-bottom: 1.6em !important;
  hyphens: none;
}

/* Заголовки в тексте */
.bb-article__body h2 {
  margin: 2.2em 0 0.6em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
  hyphens: none;
  color: var(--bb-ink, #0c1323);
  scroll-margin-top: 96px;
}
.bb-article__body h3 {
  margin: 1.8em 0 0.5em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: none;
  color: var(--bb-ink, #0c1323);
  scroll-margin-top: 96px;
}

/* Ссылки */
.bb-article__body a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(52, 74, 154, 0.4);
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.bb-article__body a,
.bb-article__body a:link,
.bb-article__body a:visited { color: var(--bb-accent, #344a9a) !important; }
@media (hover: hover) {
  .bb-article__body a:hover,
  .bb-article__body a:hover:link,
  .bb-article__body a:hover:visited {
    color: var(--bb-ink, #0c1323) !important;
    text-decoration-color: currentColor;
  }
}
.bb-article__body a:focus-visible { color: var(--bb-ink, #0c1323) !important; }

/* Списки */
.bb-article__body ul,
.bb-article__body ol {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
  counter-reset: bb-li;
}
.bb-article__body li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.7em;
}
.bb-article__body li:last-child { margin-bottom: 0; }
.bb-article__body ul > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--bb-accent, #344a9a);
}
.bb-article__body ol > li { counter-increment: bb-li; padding-left: 1.9em; }
.bb-article__body ol > li::before {
  content: counter(bb-li) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--bb-accent, #344a9a);
  font-variant-numeric: tabular-nums;
}

/* Картинки — чуть шире текстовой колонки */
.bb-article__body figure {
  margin: 2.2em 0;
  width: calc(100% + var(--bb-a-bleed) * 2);
  margin-left: calc(var(--bb-a-bleed) * -1);
}
.bb-article__body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--bb-secondary-bg-light, #e4e8f0);
}
.bb-article__body figcaption {
  margin-top: 12px;
  padding-left: var(--bb-a-bleed);
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--bb-text-secondary-light, #323e4f);
}

/* Цитата */
.bb-article__body blockquote {
  margin: 2.2em 0;
  padding-left: 1.1em;
  border-left: 3px solid var(--bb-accent, #344a9a);
}
.bb-article__body blockquote p {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.45;
  letter-spacing: -0.014em;
  hyphens: none;
  color: var(--bb-ink, #0c1323);
}

/* Врезка */
.bb-article__note {
  margin: 2.2em 0;
  padding: 1.4em 1.5em;
  border-radius: 8px;
  background: var(--bb-blue-light, #e8eefb);
}
.bb-article__note p:last-child { margin-bottom: 0; }

/* Источники */
.bb-article__sources {
  display: block;
  margin-top: 2.6em;
  padding-top: 1.5em;
  border-top: 1px solid var(--bb-secondary-bg-light, #e4e8f0);
  font-size: 0.88em;
}
.bb-article__body .bb-article__sources-title {
  margin: 0 0 0.9em;
  font-size: 1.1em;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.bb-article__sources ol { margin-bottom: 1.2em; }
.bb-article__sources li { margin-bottom: 0.55em; line-height: 1.5; hyphens: none; }
.bb-article__sources-note {
  margin: 0;
  color: var(--bb-text-secondary-light, #323e4f);
}

@media (prefers-reduced-motion: reduce) {
  .bb-article__back,
  .bb-article__back-arrow,
  .bb-article__author-name a,
  .bb-article__body a { transition-duration: 1ms; }
}

@media (min-width: 768px) {
  .bb-article {
    --bb-a-text: 19px;
    --bb-a-bleed: 32px;
    --bb-a-head: 32px;
    --bb-a-lead: 48px;
    padding: 140px 0 96px;
  }
  .bb-article__title { font-size: 50px; }
}

@media (min-width: 1024px) {
  .bb-article {
    --bb-a-text: 20px;
    --bb-a-bleed: 56px;
    --bb-a-lead: 56px;
    padding: 140px 0 120px;
  }
  .bb-article__inner {
    display: grid;
    grid-template-columns: repeat(var(--bb-columns, 16), 1fr);
    column-gap: var(--bb-gutter, 24px);
    align-items: start;
  }
  .bb-article__back   { grid-column: 1 / -1; }
  .bb-article__title  { grid-column: 1 / span 12; font-size: 70px; line-height: 0.9; margin-bottom: 24px; }
  .bb-article__meta   { grid-column: 1 / -1; }
  .bb-article__author { grid-column: 1 / -1; }
  .bb-article__cover  { grid-column: 1 / -1; aspect-ratio: 2 / 1; }

  /* текстовая колонка — 8 из 16, строго по центру */
  .bb-article__body   { grid-column: 5 / span 8; line-height: 1.7; }

  .bb-article__body h2 { font-size: 1.7em; }
}