/* ============================================================
   Каркас: полосы, оболочка, шапка, подвал.
   Ни одного значения цвета или размера — только из токенов.
   ============================================================ */

/* Атрибут hidden обязан выигрывать у display, назначенного классом.
   Без !important строка `.op-working { display: flex }` перебивает hidden по
   специфичности, и «спрятанный» блок остаётся на экране. Ровно это и вышло:
   надпись «конвертирую…» висела над готовым результатом. */
[hidden] { display: none !important; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Оболочка держит содержимое в пределах страницы. Полосы, которые красят
   фон во всю ширину, кладут её внутрь себя, а не заменяют собой. */
.op-shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/*
 * Полоса, выходящая за колонку, считает ширину окна вместе с полосой
 * прокрутки, а свою — без неё. Разница вылезает справа горизонтальной
 * прокруткой всей страницы.
 *
 * `clip`, а не `hidden`: `hidden` сделал бы из main прокручиваемую область, и
 * залипающий кадр на листе 02 перестал бы залипать — он считает от окна.
 * `clip` обрезает, но области прокрутки не заводит.
 */
.op-main { overflow-x: clip; }

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

.op-headerbar {
  background: var(--c-bg);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.op-header {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 4rem;
}

.op-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-text);
  text-decoration: none;
}

/*
 * Знак нарисован — 28.10.2026 здесь перестала стоять заглушка.
 *
 * До этого была точка: сперва квадрат, приехавший из прошлого лица, потом
 * круг. Комментарий, стоявший тут, объяснял круг лаймом и тем, что «зелёный
 * на этом сайте значит наше» — от лица, которого нет с 30.09.2026. Он врал
 * про цвет целый месяц, и это цена комментария, описывающего вид, а не
 * причину.
 *
 * Сама картинка — в `parts/brand-mark.php`, одна на шапку и подвал. Здесь
 * только размер и цвет: цвет разный, потому что подвал тёмный.
 */
.op-brand__mark {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  color: var(--c-accent);
  flex: none;
}

/* Знак тянется во всю отведённую коробку, в обоих местах. */
.op-mark {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.op-brand__name {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fs-display-stretch);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-tight);
}

/*
 * Словесный знак делится надвое — весом и цветом. Выбрано было именно это
 * деление, а не гарнитура: картинки, по которым шло обсуждение, набирались
 * шрифтом переписки, и семейство в них не задавалось. Подробности — в
 * `parts/brand-word.php`.
 *
 * Числа не на глаз: `--c-muted` даёт 7,21 : 1 на бумаге, `--c-accent-text`
 * 6,68 : 1. Обе пары стоят в списке `scripts/contrast`. Заливочный
 * `--c-accent` здесь нельзя — 3,1 : 1, порог 4,5 не держит.
 */
.op-brand__name .op-word__a {
  font-weight: 400;
  color: var(--c-muted);
}

.op-brand__name .op-word__b {
  font-weight: 700;
  color: var(--c-accent-text);
}

.op-nav {
  margin-inline-start: auto;
}

/* ---------- подвал ---------- */

/*
 * Три столбца: имя, документы, реквизиты. Ниже — строка через всю ширину.
 *
 * Раньше подвал был одной строкой: имя слева, список документов справа. Когда
 * документов семь, а к ним прибавились четыре реквизита, строка перестала
 * держаться — поэтому столбцы.
 */
/*
 * Подвал — тёмная полоса, и это приём Apex: на светлой странице так меняют
 * голос, не заводя нового цвета.
 *
 * Сделано переопределением токенов, а не правкой каждого правила внутри.
 * Подвал объявляет, что здесь «фон» значит тёмное, а «текст» — светлое, и
 * тридцать правил ниже работают как были. Иначе пришлось бы к каждому из них
 * дописывать второй цвет, и однажды один забыли бы.
 *
 * Новых цветов при этом не заводится: всё считается от `--c-band` и
 * `--c-band-in`. Приглушённый — 66 % светлого, это 6,74 : 1 к полосе,
 * посчитано, а не прикинуто.
 */
.op-footerbar {
  background: var(--c-band);
  margin-block-start: var(--s-9);

  --c-bg:        var(--c-band);
  --c-surface:   color-mix(in srgb, var(--c-band-in) 6%, var(--c-band));
  --c-text:      var(--c-band-in);
  --c-muted:     color-mix(in srgb, var(--c-band-in) 66%, var(--c-band));
  --c-line:      color-mix(in srgb, var(--c-band-in) 16%, transparent);
  --c-line-soft: color-mix(in srgb, var(--c-band-in) 9%, transparent);
  --c-accent-text: color-mix(in srgb, var(--c-accent) 62%, var(--c-band-in));
}

.op-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-7) var(--s-8);
  align-items: start;
  padding-block: var(--s-8) var(--s-6);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.op-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Тот же знак, что в шапке: подвал — второй конец одной и той же страницы. */
/*
 * В подвале знак светлее. `--c-accent` на чернилах даёт 3,1 : 1 и не держит;
 * `--c-accent-on-band` — 6,36 : 1, это проверенная сторожем пара «акцент на
 * полосе».
 */
.op-footer__mark {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  color: var(--c-accent-on-band);
  flex: none;
}

.op-footer__name {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--t-base);
  color: var(--c-text);
  letter-spacing: var(--ls-tight);
}

/*
 * То же деление, но числа другие: на чернилах приглушённый серый мутнеет,
 * поэтому «empty» здесь берёт полный `--c-band-in` (15,99 : 1), а половины
 * делит цвет — `--c-accent-on-band` (6,36 : 1). Обе пары стоят в списке
 * `scripts/contrast`.
 *
 * Унаследованный в полосе `--c-accent-text` намеренно не взят: он смешивается
 * на лету из `--c-accent` и `--c-band-in`, и такой пары сторож не считает. Цвет,
 * который никто не мерил, на лице сайта стоять не должен.
 */
.op-footer__name .op-word__a {
  font-weight: 400;
  color: var(--c-band-in);
}

.op-footer__name .op-word__b {
  font-weight: 700;
  color: var(--c-accent-on-band);
}

.op-footer__blurb {
  margin: var(--s-4) 0 0;
  max-inline-size: 34ch;
  line-height: 1.7;
}

.op-footer__k {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.op-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.op-footer__list a {
  color: var(--c-muted);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.op-footer__list a:hover {
  color: var(--c-text);
  border-block-end-color: var(--c-accent-text);
}

/*
 * Название документа, за которым пока нечего читать. Пунктир под словом
 * говорит то же, что серый цвет, но глазом: это ещё не ссылка. Цвет взят не
 * самый бледный из возможных — 4,6 : 1 к фону, то есть читается по правилам,
 * а не «почти виден».
 */
.op-footer__list .is-pending {
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
  border-block-end: 1px dashed color-mix(in srgb, var(--c-muted) 45%, transparent);
  cursor: default;
}

/* ---------- реквизиты ---------- */

.op-footer__who {
  margin: 0;
  display: grid;
  gap: var(--s-3);
}

.op-footer__who > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
}

.op-footer__who dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.op-footer__who dd {
  margin: 0;
  color: var(--c-text);
}

/*
 * Незаполненное поле. Не пусто и не выдумано: рамка на месте значения
 * показывает, что здесь чему-то быть, а подпись внутри говорит, чему именно.
 */
.op-footer__who .is-blank {
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  border: 1px dashed color-mix(in srgb, var(--c-muted) 40%, transparent);
  padding: var(--s-1) var(--s-2);
  justify-self: start;
}

.op-footer__pending {
  margin: var(--s-4) 0 0;
  max-inline-size: 30ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
}

.op-footer__copy {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line-soft);
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
}

/* Три столбца в 1200 точек встают свободно, в 900 — уже нет: реквизиты
   переносят значения по слогам. Сперва два столбца, потом один. */
@media (max-width: 1000px) {
  .op-footer {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6) var(--s-6);
  }

  .op-footer__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .op-footer {
    grid-template-columns: 1fr;
    padding-block: var(--s-7) var(--s-5);
  }

  .op-footer__who > div {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }

  .op-footer__pending { max-inline-size: none; }
}

/* ---------- содержимое ---------- */

/* GeneratePress раскладывает свои контейнеры сам; здесь только то, что
   касается нашей полосы содержимого. */
.site-content,
.op-main {
  display: block;
  padding-block: var(--s-7);
}

.op-prose {
  max-width: var(--w-text);
}

/* ---------- родительская тема ---------- */

/* Цвета родителя переведены на наши токены в tokens.css — там же объяснено
   почему. Здесь остаётся только то, что цветом не лечится: GeneratePress
   вешает на карточку содержимого тень, рассчитанную на светлый сайт. */
.inside-article,
.site-content,
.content-area,
.site-main {
  box-shadow: none;
}

/* ---------- заголовки ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fs-display-stretch);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--c-text);
}

/* ---------- меню ---------- */

.op-nav { margin-inline-start: auto; }

.op-nav__list {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.op-nav__list a {
  color: var(--c-muted);
  text-decoration: none;
  font-size: var(--t-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.op-nav__list a:hover { color: var(--c-text); }

/*
 * Кнопка-таблетка, как у Apex: единственное круглое пятно в прямоугольной
 * шапке, поэтому глаз находит её, не ища.
 *
 * Тёмной заливкой, а не лаймовой. Лайм на кремовом кричит, и в шапке, которая
 * висит поверх страницы всё время прокрутки, он кричал бы непрерывно. Лайм
 * остаётся первой кнопке на экране — той, ради которой сюда пришли.
 */
.op-header__cta {
  background: var(--c-band);
  color: var(--c-band-in);
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
  margin-inline-start: var(--s-5);
  transition: background var(--dur-fast) var(--ease);
}

.op-header__cta:hover { background: var(--c-text); }

/* На телефоне шапка складывается: в строку имя, меню и кнопка не помещаются. */
@media (max-width: 640px) {
  .op-header {
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-block: var(--s-4);
  }

  .op-nav { margin-inline-start: 0; inline-size: 100%; order: 3; }
  .op-nav__list { gap: var(--s-4); flex-wrap: wrap; }
  .op-header__cta { margin-inline-start: auto; }
}

/* ============================================================
   Свет и разметка фона

   Раньше это жило в home.css и работало только на первой
   странице: внутренние оставались ровным чёрным полем.
   Владелец попросил свет и туда — значит, это уже не украшение
   лендинга, а общий приём сайта, и место ему здесь.
   ============================================================ */

/*
 * Слой света шире полотна, а всё, что вылезло за край, обычно даёт
 * горизонтальную прокрутку. clip срезает его и, в отличие от hidden, не
 * превращает страницу в область прокрутки — прилипший заголовок остаётся
 * прилипшим.
 */
body:has(.op-home),
body:has(.op-main) { overflow-x: clip; }

/* ---------- фон ----------
 *
 * Здесь лежали два слоя под содержимым: неоновый свет и тонкая сетка «как в
 * цеху». Оба писались под тёмное лицо и объясняли сами себя тем, что чёрный
 * прямоугольник надо чем-то оживить.
 *
 * Кремовая бумага в этом не нуждается, а фотографии комнат — тем более: всё,
 * что положено под них фоном, спорит с ними за внимание. У Apex фон чистый,
 * и это не бедность, а решение. Удалено 29.09.2026.
 */

/* ---------- скругление в шапке и подвале ---------- */

.op-footer__who .is-blank { border-radius: var(--r-sm); }

/*
 * Здесь стояло `.op-header__cta { border-radius: var(--r-md) }` и квадратный
 * знак со скруглением в три точки. Оба перебивали правила выше — те самые,
 * что делают кнопку таблеткой, а знак кругом, — потому что написаны ниже при
 * равной силе. Найдено глазами: кнопка упрямо оставалась прямоугольной.
 *
 * Это цена правки чужого лица по кускам: переопределение, написанное когда-то
 * «в конце, чтобы наверняка», переживает то, ради чего писалось.
 */