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

/* Атрибут hidden обязан выигрывать у display, назначенного классом.
   Без !important строка `.sr-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;
}

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

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

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

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

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

.sr-brand__mark {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background: var(--c-accent);
  flex: none;
}

.sr-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);
}

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

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

/*
 * Три столбца: имя, документы, реквизиты. Ниже — строка через всю ширину.
 *
 * Раньше подвал был одной строкой: имя слева, список документов справа. Когда
 * документов семь, а к ним прибавились четыре реквизита, строка перестала
 * держаться — поэтому столбцы.
 */
.sr-footerbar {
  border-top: var(--border);
  margin-block-start: var(--s-9);
}

.sr-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);
}

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

/* Тот же знак, что в шапке: подвал — второй конец одной и той же страницы. */
.sr-footer__mark {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background: var(--c-accent);
  flex: none;
}

.sr-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);
}

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

.sr-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);
}

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

.sr-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);
}

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

/*
 * Название документа, за которым пока нечего читать. Пунктир под словом
 * говорит то же, что серый цвет, но глазом: это ещё не ссылка. Цвет взят не
 * самый бледный из возможных — 4,6 : 1 к фону, то есть читается по правилам,
 * а не «почти виден».
 */
.sr-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;
}

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

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

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

.sr-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);
}

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

/*
 * Незаполненное поле. Не пусто и не выдумано: рамка на месте значения
 * показывает, что здесь чему-то быть, а подпись внутри говорит, чему именно.
 */
.sr-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;
}

.sr-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));
}

.sr-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) {
  .sr-footer {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6) var(--s-6);
  }

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

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

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

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

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

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

.sr-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);
}

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

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

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

.sr-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);
}

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

.sr-header__cta {
  background: var(--c-accent);
  color: var(--c-accent-in);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
  margin-inline-start: var(--s-5);
}

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

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

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

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

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

/*
 * Общая механика для обоих слоёв — света и сетки.
 *
 * Во всю ширину окна, а не полотна. Полотно шире 1200 не бывает, и на широком
 * мониторе свет обрывался бы вертикальной гранью — освещённый прямоугольник
 * посреди черноты. Отрицательный отступ выносит слой за края.
 */
.sr-home::before,
.sr-main::before,
.sr-main::after {
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  pointer-events: none;
  background-repeat: no-repeat;
}

/*
 * Края слоя света растворяются.
 *
 * Без этого нижнее пятно упиралось в край полотна и обрывалось ровной
 * горизонтальной гранью — на короткой странице «Join» это читалось как
 * светлый прямоугольник, положенный поверх фона. Растворение задано в точках,
 * а не в процентах: на странице в 640 точек 90 — заметная доля, на странице в
 * 6900 их попросту не видно, и первый экран ничего не теряет. Потолок в 12 %
 * нужен для совсем коротких: у «Privacy» полотно в 356 точек, и два раза по
 * 90 съели бы половину — от света осталась бы полоска.
 */
.sr-main::before {
  mask-image: linear-gradient(180deg,
    transparent 0,
    #000 min(90px, 12%),
    #000 calc(100% - min(90px, 12%)),
    transparent 100%);
}

.sr-home::before,
.sr-main::before,
.sr-main::after { content: ''; }

.sr-home,
.sr-main {
  position: relative;
  z-index: 0;
  --sr-cell: 72px;
  --sr-rule: color-mix(in srgb, var(--c-text) 2.5%, transparent);
}

/*
 * Содержимое первой страницы обязано лежать поверх свечения, иначе оно
 * ложится на текст пятном.
 *
 * Само свечение из правила исключено. Без исключения оно получало
 * position: relative — одинаковая сила селекторов, побеждает написанное
 * ниже, — вставало в поток и своими размерами отпихивало первый экран вниз,
 * за край окна. Страница открывалась пустой.
 *
 * У внутренних страниц отдельного элемента нет: там свет — псевдоэлемент на
 * минус первом слое, и поднимать над ним нечего.
 */
.sr-home > *:not(.sr-glow) { position: relative; z-index: 1; }

.sr-main::before { z-index: -1; }

/* ---------- неоновая подсветка ---------- */

/*
 * Пятна расставлены по высоте страницы в процентах: чем она длиннее, тем
 * дальше они друг от друга, и ни одно не растягивается — размер задан в
 * vw/vh, то есть от окна, а не от полотна. Стороны чередуются, чтобы при
 * прокрутке свет переходил слева направо и обратно, а не тянулся полосой.
 *
 * Сила подобрана не на глаз, а по контрасту. Сливовый фон #1C1719 под розовым
 * в 18 % даёт подписям 5,39 : 1 при пороге 4,5, а основному тексту — 11,5.
 * Ярче 18 % ни одно пятно не светит, и центры разнесены на пятую часть высоты
 * при радиусе меньше половины экрана — то есть не накладываются вовсе.
 */
/*
 * Слой размером с экран, а не с полотно.
 *
 * Было: элемент во всю высоту страницы — 1280 × 7537 точек, девять с половиной
 * миллионов, а на экране с удвоенной плотностью около тридцати восьми. Поверх
 * семи градиентов на нём висела ещё и маска во всю ту же высоту. Браузер
 * закрашивает такой слой не целиком, а кусками, по мере того как читатель до
 * них доходит, — и каждый такой кусок при прокрутке и есть рывок.
 *
 * Измерено при разборе: обработчик прокрутки тратил 0,15 мс на кадр при
 * бюджете 16, пересчёт раскладки со свечением и без отличался на 0,4 мс.
 * То есть ни скрипт, ни раскладка ни при чём — оставалась закраска, а её
 * размер и есть та самая цифра выше.
 *
 * Стало: `fixed` во весь экран. Слой закрашивается один раз, при прокрутке
 * только смещается — эту работу делает видеокарта, и она бесплатна. Площадь
 * упала с 9,6 млн точек до 1,15 млн, в восемь раз.
 *
 * Цена решения названа честно: свет больше не проезжает вдоль страницы, он
 * стоит как освещение комнаты. Пятна поэтому пересчитаны под один экран — семь
 * прежних, сойдясь на одном экране, слились бы в розовое поле.
 *
 * Сила подобрана по контрасту, как и раньше: ни одно пятно не ярче 18 %, а
 * центры разнесены так, что хвосты соседей не складываются выше этого порога.
 * Сливовый фон #1C1719 под розовым в 18 % даёт подписям 5,39 : 1 при пороге
 * 4,5, а основному тексту — 11,5.
 */
.sr-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;

  /*
   * Отдельный слой под освещение.
   *
   * Пятно приколочено к окну и не меняется никогда, а страница под ним едет.
   * Без этой строчки браузер на каждом обороте прокрутки перерисовывает все
   * четыре растяжки заново, во весь экран — самая дорогая работа на странице,
   * и прокрутка от неё запинается.
   *
   * `will-change` просит отложить освещение на собственный слой: тогда его
   * рисуют один раз, а дальше только двигают содержимое поверх.
   * `contain` обещает, что за края пятна ничего не вылезет, — браузеру не
   * нужно проверять это самому.
   */
  will-change: transform;
  contain: strict;
  background:
    /* верхний правый угол — самое яркое место */
    radial-gradient(52vw 52vh at 86% 2%,
      color-mix(in srgb, var(--c-accent) 18%, transparent) 0%,
      transparent 68%),
    /* холодное слева сверху, чтобы розовое не читалось как заливка */
    radial-gradient(58vw 44vh at 0% 4%,
      color-mix(in srgb, var(--c-text) 6%, transparent) 0%,
      transparent 62%),
    radial-gradient(46vw 46vh at 2% 54%,
      color-mix(in srgb, var(--c-accent) 13%, transparent) 0%,
      transparent 70%),
    radial-gradient(54vw 48vh at 98% 96%,
      color-mix(in srgb, var(--c-accent) 15%, transparent) 0%,
      transparent 70%);
}

/*
 * Внутренние страницы короче первой — в один-три экрана. Те же семь пятен
 * сошлись бы на них в одно светлое поле, поэтому здесь их три, и каждое
 * бледнее: доли подобраны так, чтобы даже там, где хвосты соседей находят
 * друг на друга, сумма не переваливала за проверенные 18 %.
 */
.sr-main::before {
  background:
    radial-gradient(50vw 46vh at 90% 4%,
      color-mix(in srgb, var(--c-accent) 13%, transparent) 0%,
      transparent 68%),
    radial-gradient(56vw 40vh at 2% 0%,
      color-mix(in srgb, var(--c-text) 5%, transparent) 0%,
      transparent 62%),
    radial-gradient(46vw 44vh at 4% 50%,
      color-mix(in srgb, var(--c-accent) 11%, transparent) 0%,
      transparent 70%),
    radial-gradient(52vw 46vh at 96% 94%,
      color-mix(in srgb, var(--c-accent) 12%, transparent) 0%,
      transparent 70%);
}

/* ---------- разметка ---------- */

/*
 * Тонкая сетка на фоне — не декор ради декора: «Верстак» это цех, а в цеху
 * поверхности размечены. Даёт тёмному фону материальность вместо чёрного
 * прямоугольника, и заметна ровно настолько, чтобы не мешать читать.
 *
 * Лежит поверх света: под ним она превращалась бы в пятно на полосах.
 * Порядок держится сам собой — ::after рисуется после ::before, а элемент
 * .sr-glow идёт после ::before первой страницы.
 */
.sr-home::before,
.sr-main::after {
  z-index: -1;
  background-image:
    linear-gradient(var(--sr-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--sr-rule) 1px, transparent 1px);
  background-size: var(--sr-cell) var(--sr-cell);
  /* Сетка обрывалась на 62 % высоты, и низ страницы оставался голым чёрным
     прямоугольником. Теперь идёт до конца и гаснет только у самого края,
     чтобы не упираться в подвал ровной обрезкой. */
  mask-image: linear-gradient(180deg,
    #000 0%, #000 78%, color-mix(in srgb, #000 45%, transparent) 94%, transparent 100%);
}

/* На телефоне клетка в 72 точки — это пять столбцов на весь экран, и разметка
   из фактуры превращается в решётку поверх текста. Мельче и бледнее. */
@media (max-width: 640px) {
  .sr-home,
  .sr-main {
    --sr-cell: 44px;
    --sr-rule: color-mix(in srgb, var(--c-text) 1.6%, transparent);
  }
}

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

.sr-header__cta { border-radius: var(--r-md); }

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

/* Знак у имени — квадрат, но не острый: он лежит рядом со скруглённой
   кнопкой, и один прямой угол на всю шапку выглядит забытым. */
.sr-brand__mark,
.sr-footer__mark { border-radius: 3px; }