/* bablobanov.ru — некритические стили. Бюджет ≤ 30 КБ (stek-i-arhitektura.md).
   Направление «Паспорт изделия»: бумага для чтения, стальные полосы для данных,
   еловая полоса для действия. Разделители — границы, подъём — тени (feel-polish). */

/* ── Шрифты со своего сервера, не с Google Fonts: сторонний CDN получал бы IP
   каждого посетителя, а оператор ПДн здесь — ООО. Файлы урезаны до нужных
   символов (14+14+8+24 КБ вместо 82). Preload на Geologica — в layout.php */
@font-face{font-family:Geologica;src:url(/assets/fonts/geologica-cyrillic.woff2)format("woff2");
  font-weight:200 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Geologica;src:url(/assets/fonts/geologica-latin.woff2)format("woff2");
  font-weight:200 700;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-cyrillic.woff2)format("woff2");
  font-weight:400 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin.woff2)format("woff2");
  font-weight:400 700;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}

/* ── Хлебные крошки */
.breadcrumbs{padding-top:1rem;font-size:.875rem;color:var(--muted)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.breadcrumbs__item+.breadcrumbs__item::before{content:"/";margin:0 .35rem;color:var(--hair)}
.breadcrumbs a{color:var(--muted)}

/* ── Полосы. Сталь = данные, еловая = действие; сетка-чертёж связывает их */
.band{background:var(--steel);color:var(--paper);padding-block:3rem;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(50rem 28rem at 78% -18%,rgba(57,211,167,.10),transparent 60%);
  background-size:44px 44px,44px 44px,auto}
.band .mono{color:#8e99a5}
.band h2{color:var(--paper)}
.band p{color:#b9c2cb}
/* Кнопки исключены: иначе .band a перебивал цвет текста .btn--mint
   (специфичность 0,0,1,1 против 0,0,1,0) и надпись сливалась с заливкой */
.band a:not(.btn){color:var(--mint)}
.band--deep{background:#0d2723;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(58rem 34rem at 82% -25%,rgba(57,211,167,.16),transparent 62%),
    linear-gradient(180deg,#10302b,#0b211d);
  background-size:44px 44px,44px 44px,auto,auto}
.band--deep .mono{color:#84b0a5}
.band--deep .card{background:#123430;box-shadow:inset 0 0 0 1px #1c453d}
.band--deep .card:hover{box-shadow:inset 0 0 0 1px #276e60}
.band--deep .kpi{background:#1c453d;box-shadow:inset 0 0 0 1px #1c453d}
.band--deep .kpi>div{background:#123430}
/* .band.band--deep, а не .band--deep: общее правило .band .btn--ghost
   объявлено ниже и при равной специфичности перебивало бы эти состояния */
.band.band--deep .btn--ghost{box-shadow:inset 0 0 0 1px #1c453d}
.band.band--deep .btn--ghost:hover{background:#123430}

/* ── Заголовки и текст разделов.
   .spec h1 (титульный лист) живёт в критическом CSS и перекрывает это правило */
h1{font-size:clamp(1.9rem,5.5vw,2.6rem);line-height:1.15;margin:0 0 1rem;
  font-weight:700;letter-spacing:-.03em}
.main>.container{padding-top:2.5rem}
.main>.container:last-child{padding-bottom:3.5rem}
/* padding-block: секция обычно несёт и .container, сокращённая запись
   стёрла бы его горизонтальные поля и прижала текст к краю экрана */
.section{padding-block:3rem}
/* Титул без портрета занимает всю ширину: правило перебивает двухколоночное
   из критического CSS (равная специфичность, site.css подключается позже) */
.spec__inner--solo{grid-template-columns:1fr}
h2{font-size:clamp(1.5rem,4.5vw,2.1rem);margin:.5rem 0 1.25rem;font-weight:700;letter-spacing:-.025em}
h3{font-size:1.1rem;margin:1.5rem 0 .5rem;font-weight:600}
p,ul,ol{margin:0 0 1rem}
.lead{font-size:1.125rem}
/* Колонка чтения ограничивается у самих блоков текста, а не у обёртки:
   на странице `article.container.prose` иначе побеждала бы узкая ширина
   вместе с margin:auto — текст уезжал в центр, а заголовок оставался слева.
   table/dl/pre/figure в списке обязательны: у таблицы width:100%, и в полном
   контейнере она растянулась бы на --max мимо меры (ревью Codex 26.08.2026) */
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>blockquote,
.prose>table,.prose>dl,.prose>pre,.prose>figure,
.prose>.lead,.prose>.updated{max-width:var(--col)}
.container.prose{max-width:var(--max)}
/* Сужателя контейнера (.prose--narrow) больше нет: центрированное тело уводило
   текст с оси листа — на «Обо мне» и «Контактах» получалось три вертикали
   (замер штаба 26.08.2026). Ось одна: контент стоит у левого края контейнера,
   мера строки капается у самих блоков текста правилом выше */
.prose h2{margin-top:2.25rem}
.prose table{border-collapse:collapse;width:100%;margin:0 0 1rem;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--hair);padding:.5rem .65rem;text-align:left}
.prose blockquote{margin:0 0 1rem;padding:.5rem 1rem;border-left:3px solid var(--hair);color:var(--muted)}
.prose--document h2{font-size:1.15rem}

/* ── Показатели: числа табличные, чтобы не дёргались */
.kpi{display:grid;gap:1px;background:var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
  margin:1.75rem 0 0;box-shadow:inset 0 0 0 1px var(--line-dark)}
.kpi>div{background:var(--panel);padding:1.15rem 1.25rem}
.kpi b{display:block;font-weight:700;font-size:clamp(1.9rem,6vw,2.5rem);line-height:1;
  letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:.45rem;color:#9aa5b1;font-size:.9rem}

/* ── Таблица-спецификация: фирменный ход направления */
.spec-table{width:100%;border-collapse:collapse;margin:1.5rem 0 0}
.spec-table th,.spec-table td{border-top:1px solid var(--hair);padding:.9rem .5rem;
  vertical-align:top;text-align:left}
.spec-table th{width:12rem;color:var(--muted);font-weight:400}
.spec-table tr:hover th,.spec-table tr:hover td{background:var(--paper-2)}
.spec-table__num{color:var(--deep);width:2.75rem;font-variant-numeric:tabular-nums}
/* span, а не max-width у td: таблица с авторазметкой ширину ячейки не ограничит */
.spec-table__text{display:block;max-width:var(--col)}
/* Цель нажатия 44px: в ячейке ссылка иначе высотой в одну строку текста */
.spec-table a{display:inline-flex;align-items:center;min-height:44px}
/* На узком экране таблица разворачивается в блоки: фиксированная колонка 12rem
   плюс текст давали минимальную ширину больше вьюпорта — страница ехала вбок */
@media(max-width:47.99em){
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block;width:auto}
  .spec-table tr{border-top:1px solid var(--hair);padding:.9rem 0}
  .spec-table tr:hover th,.spec-table tr:hover td{background:none}
  .spec-table th,.spec-table td{border:0;padding:0}
  .spec-table th{color:var(--ink);font-weight:600;margin:.15rem 0 .2rem}
}

/* ── Карточки (радиус внешний = внутренний + отступ) */
.cards{display:grid;gap:1rem;margin:1.5rem 0 0}
.card{border-radius:var(--r-lg);padding:1.15rem 1.25rem;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line-dark);
  transition:box-shadow .2s,transform .2s cubic-bezier(.4,0,.2,1)}
.card:hover{box-shadow:inset 0 0 0 1px #3a444f;transform:translateY(-2px)}
.card__title{margin:0 0 .35rem;font-size:1.05rem;font-weight:600;color:var(--paper)}
.card__title a{color:var(--paper);text-decoration:none}
.card__title a:hover{color:var(--mint)}
/* .band p специфичнее одиночного класса, поэтому цвет описания задаётся
   и для контекста полосы — иначе компонентный токен молча не работал */
.card__summary,.band .card__summary{margin:0;color:#9aa5b1;font-size:.95rem}
.card__price{margin:.5rem 0 0;font-weight:700;color:var(--paper);font-variant-numeric:tabular-nums}
.card__media img{border-radius:var(--r);outline-color:rgba(255,255,255,.1)}

/* ── Сертификаты: превью слева, данные справа — как приложение к спецификации */
.certs{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.25rem}
.cert{background:var(--panel);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-dark);display:grid;
  transition:box-shadow .2s,transform .2s cubic-bezier(.4,0,.2,1)}
.cert:hover{box-shadow:inset 0 0 0 1px #3a444f;transform:translateY(-2px)}
.cert__shot{position:relative;display:block;background:#0f1418;line-height:0}
.cert__shot img{width:100%;height:auto;outline-color:rgba(255,255,255,.1)}
.cert__shot:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
.cert__meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0}
/* .band .mono задаёт серый цвет и специфичнее одиночного класса — без этого
   селектора надпись на мятной плашке давала контраст 1.5:1 вместо 4.5:1 */
.cert__mark,.band .cert__mark{background:var(--mint);color:#06211a;padding:.2rem .45rem;
  border-radius:.3rem;font-weight:700}
.cert__body{padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.cert__date{color:#8e99a5}
.cert__title{margin:0;font-size:1.15rem;font-weight:700;color:var(--paper);letter-spacing:-.01em}
.cert__issuer{margin:0;color:var(--mint);font-size:.95rem}
/* Мера строки и в широкой карточке: описание не растягивается на всю ячейку */
.cert__summary{margin:.25rem 0 0;color:#9aa5b1;font-size:.95rem;max-width:var(--col)}
.cert__links{margin:.75rem 0 0;display:flex;gap:1.25rem;flex-wrap:wrap}
.cert__links a{color:var(--paper);min-height:44px;display:inline-flex;align-items:center;
  text-underline-offset:3px}
.cert__links a:hover{color:var(--mint)}

/* Разворот .duo убран 25.08.2026: колонка minmax(0,1fr) была шире меры строки,
   и между текстом и карточкой зияло ~500px пустоты (замер штаба). Выносы
   переехали в титул (panel в page-head), тело страниц — .container.prose
   на оси листа (центрированный .prose--narrow убран 26.08.2026) */

/* ── Учётная карточка: белый лист — панель титула и вынос разделов */
.dossier{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--lift);max-width:22rem}
.dossier__head{display:flex;gap:1rem;align-items:center;padding:1.15rem 1.25rem;
  border-bottom:1px solid var(--paper-2)}
.dossier__photo{width:5.5rem;height:5.5rem;object-fit:cover;border-radius:var(--r)}
.dossier__name{margin:0;font-weight:700;letter-spacing:-.01em}
.dossier__index{margin:.3rem 0 0;color:var(--muted)}
.dossier__index--bare{margin:0;padding:1.05rem 1.25rem .3rem}
.dossier__list{margin:0;padding:.35rem 1.25rem 1.05rem}
.dossier__row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;
  padding:.55rem 0;border-top:1px solid var(--paper-2)}
.dossier__row:first-child{border-top:0}
.dossier__row dt{color:var(--muted);padding-top:.2rem}
/* Без hyphens:auto: браузер рвал русские слова ради ровных строк даже там, где
   слово помещалось целиком — «про-изводственного» (замер штаба 26.08.2026).
   Слова переносятся целиком; break-word остаётся страховкой неразрывным
   токенам (email, t.me/…), если им не хватит ширины */
.dossier__row dd{margin:0;font-size:.95rem;overflow-wrap:break-word}
/* В панели титула на 992–1919 колонка карточки 17.5–19.5rem: значение в два
   столбца получало ~118–140px, и неразрывные токены («info@bablobanov.ru»,
   «t.me/…») рвались посимвольно. Стопка «поле над значением» отдаёт значению
   всю ширину карточки; высота почти не растёт — значения перестают виснуть
   в три строки. Без верхней границы диапазона: два столбца с 1920 возвращает
   блок 120em в конце файла — пара max-119.99/min-120 оставляла бы дробный
   зазор при масштабировании (ревью Codex 25.08.2026) */
@media(min-width:62em){
  .spec__side .dossier__row{grid-template-columns:1fr;gap:.1rem}
  .spec__side .dossier__row dt{padding-top:0}
}

/* ── Приложенный лист: белый документ стоит на оси листа, не по центру —
   единая вертикаль со всеми страницами (замер штаба 26.08.2026). Ширина =
   колонка чтения + поля, чтобы мера строки не менялась */
.sheet{max-width:calc(var(--col) + 5rem);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--lift);
  padding:2rem 2.5rem}
@media(max-width:47.99em){.sheet{padding:1.5rem 1.25rem}}

/* ── Полоса с формой: факты слева на оси листа, белая карточка формы у правого
   края контейнера — та же геометрия, что у титула с панелью. Центрированный
   модуль (max-width col+36rem) давал третью вертикаль на странице (замер штаба
   26.08.2026); поле между фактами и карточкой уравновешивается выносом, как в титуле */
.split{display:grid;gap:2.5rem}
@media(min-width:62em){.split{grid-template-columns:minmax(0,1fr) 30rem;gap:3.5rem;
  align-items:start}}
.facts{list-style:none;margin:1.5rem 0 0;padding:0;max-width:var(--col)}
.facts li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.5rem;
  padding:.8rem 0;border-top:1px solid #1c453d}
.facts .mono{margin:0;padding-top:.2rem}
.formcard{background:#fff;border-radius:var(--r-lg);padding:1.75rem;box-shadow:var(--lift)}
.formcard .form{margin:0;max-width:none}
/* Карточка светлая даже на полосе: селектор с .formcard специфичнее (0-3-1)
   контекстных правил .band (0-2-1), поэтому побеждает независимо от порядка.
   Возврату подлежит ВСЁ, что перекрашивает .band: поля, ссылки, фокус, ошибка —
   иначе мята ложится на белый с контрастом 1,9:1 (находка ревью Codex 25.08.2026) */
.band .formcard .form__field input,.band .formcard .form__field select{background:#fff;
  color:var(--ink);border-color:var(--stroke)}
.band .formcard .form__field input:focus,.band .formcard .form__field select:focus{
  outline-color:var(--deep);border-color:var(--deep)}
.band .formcard .form__field{color:var(--ink)}
.band .formcard .form__consent,.band .formcard .form__checkbox{color:var(--muted)}
.band .formcard a:not(.btn){color:var(--deep)}
.band .formcard .btn:focus-visible{outline-color:var(--deep)}
.band .formcard .form__error,.band .formcard p.form__error{color:#a3271f}

/* ── Кнопка на стали */
.btn--mint{background:var(--mint);color:#06211a}
.btn--mint:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(57,211,167,.55)}
/* Отклик на нажатие: при одновременных :hover и :active позднее правило hover
   перебивало .btn:active из критического CSS, и кнопка не «проседала» */
.btn--mint:active{transform:scale(.96)}
.band .btn--ghost{color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-dark)}
.band .btn--ghost:hover{background:var(--panel)}
.band .btn:focus-visible{outline-color:var(--mint)}

/* ── Плашка рекламы (ст. 18.1 38-ФЗ) и раскрытие партнёрства */
.ad-label{margin:1rem 0;padding:.5rem .75rem;background:var(--paper-2);border-radius:var(--r);
  font-size:.85rem;color:var(--muted)}
.disclosure{padding:.65rem .85rem;border-left:3px solid var(--deep);background:var(--paper-2);
  border-radius:0 var(--r) var(--r) 0;font-size:.95rem}

/* ── Цена и промокод */
.price{font-size:1.35rem;font-weight:700;display:flex;gap:.6rem;align-items:baseline;
  font-variant-numeric:tabular-nums}
.price__old{color:var(--muted);font-weight:400;font-size:1.05rem}
.promo{margin:0;font-size:.95rem}
.promo__code{font:600 1rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:.5rem .75rem;
  min-height:44px;border:1px dashed var(--deep);border-radius:var(--r);background:#fff;color:var(--deep);
  cursor:pointer;transition:background .15s,border-style .15s}
.promo__code:active{transform:scale(.96)}
.promo__code.is-copied{border-style:solid;background:var(--paper-2)}

/* ── Формы */
.form{max-width:26rem;display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.form__field{display:flex;flex-direction:column;gap:.35rem;font-size:.95rem}
.form__field input,.form__field select{font:inherit;padding:.6rem .7rem;min-height:44px;
  border:1px solid var(--stroke);border-radius:var(--r);background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
.form__field input:focus,.form__field select:focus{outline:2px solid var(--deep);outline-offset:1px;
  border-color:var(--deep)}
/* На тёмной полосе глубокий зелёный как индикатор фокуса неразличим (≈1.7:1) */
.band .form__field input:focus,.band .form__field select:focus{outline-color:var(--mint);
  border-color:var(--mint)}
.form__consent{font-size:.85rem;color:var(--muted);margin:0}
.form__checkbox{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:var(--muted)}
/* 24px — минимальная цель нажатия по WCAG 2.2 (было 1.1rem = 17,6px) */
.form__checkbox input{width:1.5rem;height:1.5rem;margin-top:.1rem;accent-color:var(--deep);flex:none}
.form__hp{position:absolute;left:-9999px;top:-9999px}
.form__error{color:#a3271f;font-size:.9rem;margin:0}
.band .form__field input,.band .form__field select{background:var(--panel);color:var(--paper);
  border-color:var(--line-dark)}
.band .form__consent,.band .form__checkbox{color:#9aa5b1}

/* ── FAQ: геометрия контейнера, пункты капаются мерой — секция стоит на оси
   листа, а не по центру (сейчас данных нет и блок не рендерится; правило,
   чтобы будущая секция встала на ось без раздумий) */
.faq{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.faq__item{border-bottom:1px solid var(--hair);padding:.25rem 0;max-width:var(--col)}
.faq__q{cursor:pointer;font-weight:600;padding:.6rem 0;min-height:44px}
.faq__a{padding:.25rem 0 1rem;color:var(--muted)}

/* ── Футер: тёмный, замыкает страницу как обложку документа */
.footer{background:var(--steel);color:#8e99a5;padding:2.25rem 0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px,44px 44px}
.footer__inner{display:grid;gap:1.25rem}
.footer__col{display:flex;flex-direction:column;gap:.4rem}
.footer__brand{font-weight:600;color:var(--paper);text-transform:uppercase;letter-spacing:.02em}
.footer__legal{margin:0;font-size:.85rem;line-height:1.5}
.footer__link{color:var(--paper);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer__link:hover{color:var(--mint)}
.footer a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ── Служебное */
.updated{color:var(--muted);font-size:.875rem;margin-top:2rem}

/* Узкий экран: кнопки в столбик во всю ширину — в ряд они мельчали до нечитаемых,
   мета-строка шапки прячется — с брендом и меню в 390px она не помещается */
@media(max-width:39.99em){
  .btns{flex-direction:column;align-items:stretch}
  .btns .btn{justify-content:center}
}
@media(max-width:47.99em){.header__meta{display:none}}

@media(min-width:40em){
  .cards{grid-template-columns:repeat(2,1fr)}
  .kpi{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:48em){
  .footer__inner{grid-template-columns:repeat(3,1fr)}
  .cert{grid-template-columns:20rem minmax(0,1fr);align-items:start}
}
/* Широкие экраны: правила вынесены из критического CSS ради бюджета.
   Безопасно — site.css блокирует рендер, до первой отрисовки применяется тоже.
   Сетка растёт до 1600px, колонка чтения — до ~44rem: дальше строка становится
   слишком длинной для глаза, а не «шире и лучше» */
@media(min-width:90em){
  :root{--max:88rem;--col:41rem}
  body{font-size:1.0625rem}
  .portrait{max-width:19.5rem}
  /* :not(--solo) обязателен: без него правило перебивало одноколоночный титул
     страниц без портрета и оставляло справа пустую колонку */
  .spec__inner:not(.spec__inner--solo){grid-template-columns:minmax(0,1fr) 19.5rem}
}
@media(min-width:120em){
  /* --col 42rem, не 44: при базовом кегле 1.0625rem строка в 44rem выходила
     за ~75 знаков — верхнюю границу меры (правило 25.08.2026). Кегль H1 растёт
     одним clamp в критическом CSS, ступеней здесь больше нет */
  :root{--max:100rem;--col:42rem}
  .portrait{max-width:22rem}
  .spec__inner:not(.spec__inner--solo){grid-template-columns:minmax(0,1fr) 22rem}
  /* Колонка панели снова 22rem — строки dossier возвращаются в два столбца
     (стопка объявлена с 62em без верхней границы, возврат живёт здесь) */
  .spec__side .dossier__row{grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem}
  .spec__side .dossier__row dt{padding-top:.2rem}
}