/* BigPapa site.css — единственный общий CSS витрины.
   Классы bp-* — публичный контракт, имена не менять.
   Шрифты: локальные субсеты (OFL). Во ВСЕХ четырёх (и в .woff2, и в парном .ttf) есть
   полный кириллический алфавит U+0410..U+044F, Ё/ё и знак рубля ₽ U+20BD — без исключений.
   Это не слова сборки: `python3 tests/verify_fonts.py` распаковывает каждый .woff2 и читает
   cmap из его собственного потока, сверяя карту символ→глиф с .ttf. */

@font-face {
  font-family: 'BP Display';
  src: url('../fonts/oswald-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BP Text';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BP Text';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BP Mono';
  src: url('../fonts/jbmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Токены. Палитра строго монохромная: чёрное на костяном + пустота.
   Без градиентов, без скруглений. */
:root {
  --bone: #EDEAE4;
  --bone-2: #E4E0D8;
  --ink: #111111;
  --black: #000000;
  /* --muted раньше был #8A8377 — на костяном это 3.13:1, ниже порога WCAG AA 4.5:1,
     а красится им мелочь 9-11px. Значение #8A8377 использовать нельзя.
     Текущий тон даёт 5.27:1 на --bone и 4.80:1 на --bone-2. */
  --muted: #655F55;
  --font-display: 'BP Display', Impact, sans-serif;
  --font-text: 'BP Text', system-ui, sans-serif;
  --font-mono: 'BP Mono', ui-monospace, monospace;
}

/* База */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--ink);
  color: var(--bone);
}
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.bp-wrap {
  max-width: min(1320px, 78vw);
  margin: 0 auto;
  padding: 0 24px;
}
.bp-wrap--narrow {
  max-width: 720px;
}

/* Фирменная чёрная плашка-вкладка со срезанным правым верхним углом */
.bp-plaque {
  display: inline-block;
  background: var(--black);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  padding: 8px 16px 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.5;
}
.bp-plaque span { display: block; }

/* Рейка подвала: линейка сверху, плашка-ярлычок висит вниз от центра */
.bp-rail {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items: start;
  gap: 24px;
  padding-top: 16px;
}
.bp-rail-col {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.6;
}
.bp-rail-col--right {
  text-align: right;
  color: var(--muted);
}
/* Плашка в рейке — средний трек грида между двумя равными колонками minmax(0,1fr):
   грид резервирует под неё место (наложения из прошлого фикса не возвращаются)
   и одновременно держит её ровно на оси рейки независимо от ширин колонок.
   Отрицательный отступ поднимает плашку к линейке, сохраняя вид свисающего ярлычка. */
.bp-rail > .bp-plaque {
  margin-top: -16px;
}

/* Каркас героя: панели с костяными зазорами, сдвиги задаёт страница через --shift */
.bp-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bp-panel {
  background: var(--bone-2);
  overflow: hidden;
  transform: translateY(var(--shift, 0));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bp-reveal {
    from { opacity: 0; transform: translateY(calc(var(--shift, 0px) + 14px)); }
    to   { opacity: 1; transform: translateY(var(--shift, 0)); }
  }
  .bp-panel {
    animation: bp-reveal .6s cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .bp-panel:nth-child(1) { animation-delay: 0ms; }
  .bp-panel:nth-child(2) { animation-delay: 120ms; }
  .bp-panel:nth-child(3) { animation-delay: 240ms; }
}

/* Кнопка: чёрная плита, hover — инверсия */
.bp-btn {
  display: inline-block;
  background: var(--black);
  color: #fff;
  border: 1px solid var(--black);
  border-radius: 0;
  padding: 14px 28px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bp-btn:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--ink);
}
/* Отключённое состояние. ВАЖНО: pointer-events гасит только мышь — активацию с клавиатуры
   (Enter на <a href>) CSS погасить не может. Поэтому разметка ОБЯЗАНА вместе с
   aria-disabled="true" убирать href и ставить tabindex="-1" (у <button> — атрибут disabled).
   Со стороны CSS дополнительно снят hover/focus-отклик, чтобы элемент не выглядел живым. */
.bp-btn:disabled,
.bp-btn[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}
.bp-btn:disabled:hover,
.bp-btn:disabled:focus-visible,
.bp-btn[aria-disabled="true"]:hover,
.bp-btn[aria-disabled="true"]:focus-visible {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

/* Утилиты */
.bp-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.bp-h {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0;
}
.bp-demo-badge {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Мобильно */
@media (max-width: 640px) {
  .bp-wrap { padding: 0 16px; }
  .bp-rail {
    gap: 12px;
  }
  .bp-rail-col {
    font-size: 9px;
    letter-spacing: .04em;
  }
}

/* Глобальное отключение движения */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}