/*
Theme Name: Atlanta VPN Ru
Theme URI: https://atlanta-vpn.info/
Description: Тема сайта Atlanta VPN Ru. Язык дизайна — «список серверов»: несущий элемент всех страниц строка сети с режимом, лимитом и статусом; активная строка заливается фирменным синим целиком.
Version: 1.0.11
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atlanta-vpn-info
*/

/* ============================================================
   КОНТРАКТ НАПРАВЛЕНИЯ (выбор владельца 17.09.2026, вариант 2;
   ключ броска impeccable — cab50dcc, крутилки 6–7 / 3–4 / 4–5)

   THESIS. Сайт показывает сеть так, как её видит подписчик в своём
   клиенте: строка направления с режимом, лимитом и состоянием. Он
   отказывается от категорийного лендинга с карточками «три причины»,
   щитом и картой мира с точками — вместо обещаний у него реестр.

   OWN-WORLD. Полотно #00020b с фирменного знака, линии в 1px
   #16203a, ни одного скругления и ни одной тени. Весь интерфейс
   набран Maple Mono, проза — Noto Serif. Единственный цвет —
   фирменный #0284f6, и он работает только как состояние: заливает
   активную строку целиком, метит текущий пункт меню и кнопку.

   STORY. Посетитель за один экран понимает, что у сервиса две сети:
   обычные серверы без лимита трафика и обходы белых списков со
   счётчиком гигабайтов, которые включают только на мобильном
   интернете. Дальше он идёт за ценой, за клиентом под свою систему
   или за порядком действий, когда связь перестала подниматься, —
   и уходит в бота по кнопке, которая видна с первого экрана.

   FIRST VIEWPORT. Шапка в одну строку: знак, меню, кнопка справа.
   Под ней заголовок в две строки и лид в одну колонку слева, справа
   счёт сети цифрами. Ниже во всю ширину — реестр из десяти строк
   сети с шапкой колонок; первая строка активна и залита синим.
   Главная кнопка стоит в шапке и повторяется в реестре.

   FORM. Реестр строк вместо карточек; кандидат 2 из 7 в моём
   упорядоченном списке, выбран человеком из четырёх показанных.

   ── Поправка 18.09.2026: фон первого экрана. Запрет на градиенты из
   оси 4 остаётся запретом на градиент В КОМПОНЕНТЕ — на кнопке, на
   цифре, на строке реестра. Первому экрану добавлен один источник
   света у нижней кромки и поле точек над ним: это слой позади
   содержимого, а не отделка элемента. Акцент по-прежнему один и тот
   же #0284f6, второго цвета на холсте нет.

   FINISH. unreviewed and undocumented is unfinished; this build ends
   with the finish review, the verdict, DESIGN.md, and every shipping
   raster carrying its provenance.

   ── Разводка с предыдущим сайтом бренда (atlantavpn.click), снята
   по его коду 17.09.2026, а не по памяти. Семь осей из семи:

   1. Типографика: там Overpass + Hanken Grotesk + Overpass Mono,
      h1 64px дисплейным гротеском. Здесь Maple Mono несёт весь
      интерфейс, Noto Serif — прозу, дисплейного гротеска нет вовсе.
   2. Форма поверхностей: там --cut:16px (срез угла) и --radius-sm:8px
      на карточках. Здесь border-radius: 0 на всём сайте, граница 1px.
   3. Ритм секций: там .section / .section--tint через одну
      тонированные. Здесь сплошная лента, секции разделены правилом
      в 1px, тонированных полос нет.
   4. Характер акцента: там --sweep: linear-gradient(115deg,...)
      на кнопках и цифрах. Здесь градиентов нет ни одного, акцент —
      плоская заливка строки состоянием.
   5. Структура первого экрана: там текст слева и PNG-иллюстрация
      справа. Здесь реестр сети во всю ширину под заголовком.
   6. Ховер: там подъём и сдвиг через transform. Здесь меняется
      только фон строки и цвет точки, раскладка не двигается.
   7. Подача чисел: там .stat__num — крупные дисплейные цифры в
      карточках. Здесь табличные моноширинные цифры в колонках
      реестра, выровненные по разряду.
   ============================================================ */

:root {
  --void: #00020b;
  --deep: #05091a;
  --slab: #080e22;
  --line: #16203a;
  --line-2: #22304f;
  --ink: #e6ecff;
  --dim: #93a1c4;
  --dim-2: #6d7c9f;
  --live: #0284f6;
  --live-deep: #0f47fc;
  --on-live: #00020b;

  --mono: 'Maple Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --serif: 'Noto Serif', 'Maple Mono', Georgia, serif;

  --span: 1520px;
  --gutter: 40px;
  --rail-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-2) var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.66;
  overflow-x: clip;
}

::selection { background: var(--live); color: #fff; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
input, textarea { caret-color: var(--live); }

a { color: var(--ink); text-underline-offset: .22em; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: var(--live); }

h1, h2, h3 { font-family: var(--mono); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem); }
h3 { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lane { width: 100%; max-width: var(--span); margin: 0 auto; padding: 0 var(--gutter); }
/* Ограничение длины строки вешается на текстовую колонку, а не на контейнер:
   иначе проза уезжает в центр экрана и сайт превращается в полосу посреди полей. */
.read { max-width: 68ch; }
.lane.read { max-width: var(--span); }
.lane.read > * { max-width: 68ch; }
.rub { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 60; background: var(--live); color: #fff; padding: 10px 16px; }

/* ── Шапка: одна строка, кнопка крайняя справа, бургер левее неё ── */
.rail {
  position: sticky; top: 0; z-index: 40;
  background: var(--void);
  border-bottom: 1px solid var(--line);
}
/* Зазор 16px, а не 26: строка шапки требует ровно столько места,
   сколько занимают знак, одиннадцать пунктов и кнопка, и на замере
   18.09.2026 при прежних значениях ей нужно было 1447px. Порог бургера
   стоял на 1300 — вся полоса 1301–1440 разъезжалась, пункты меню
   заходили под кнопку до 120px. Полосы прокрутки при этом не возникало:
   у body стоит overflow-x: clip, и метрика переполнения честно давала
   ноль. Ловится только замером правого края меню против левого края
   кнопки. */
.rail__in {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--rail-h);
  max-width: var(--span); margin: 0 auto; padding: 0 var(--gutter);
}
.mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-decoration: none; flex: 0 0 auto; }
.mark__sign { width: 22px; height: 22px; flex: 0 0 auto; }
.mark__word { color: var(--ink); }
.mark__tail { color: var(--live); }

/* min-width: max-content вместо 0. С нулём меню сжималось уже ого себя,
   пункты вылезали за свою коробку и молча ложились поверх кнопки.
   С max-content строка перестаёт схлопываться: если содержимое меню
   когда-нибудь снова перерастёт полосу, это станет настоящим
   переполнением, которое поймает поэлементный замер, а не невидимым
   наездом. */
.nav { display: flex; gap: 11px; margin-right: auto; flex-wrap: nowrap; min-width: max-content; }
.nav__a {
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  text-decoration: none; white-space: nowrap; padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav__a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.nav__a[aria-current="page"] { color: var(--live); border-bottom-color: var(--live); }

.toggle {
  display: none; flex: 0 0 auto; margin-left: auto;
  width: 40px; height: 36px; background: none; border: 1px solid var(--line-2);
  color: var(--ink); cursor: pointer; padding: 0;
}
.toggle span, .toggle span::before, .toggle span::after {
  display: block; width: 16px; height: 1px; background: currentColor; margin: 0 auto; position: relative;
}
.toggle span::before { content: ''; position: absolute; top: -5px; }
.toggle span::after  { content: ''; position: absolute; top: 5px; }

/* ── Кнопки ── */
.act {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  padding: 11px 20px; text-decoration: none; border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.act--main { background: var(--live); color: var(--on-live); }
.act--main:hover { background: #2f9dff; }
.act--line { background: none; color: var(--ink); border-color: var(--line-2); }
.act--line:hover { border-color: var(--live); color: var(--live); }
.act--sm { font-size: 12.5px; padding: 8px 13px; white-space: nowrap; }
.act--rail { flex: 0 0 auto; }
.act__short { display: none; }

/* ── Мобильная панель ── */
.drawer {
  display: none; border-bottom: 1px solid var(--line); background: var(--deep);
  max-height: calc(100dvh - var(--rail-h)); overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { display: block; }
.drawer__in { max-width: var(--span); margin: 0 auto; padding: 8px var(--gutter) 20px; }
.drawer__a {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-family: var(--mono); font-size: 14px; color: var(--ink); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.drawer__a span { font-family: var(--serif); font-size: 13px; color: var(--dim-2); text-align: right; }
.drawer__a[aria-current="page"] { color: var(--live); }

/* ── Поле сети: фон первого экрана ──────────────────────────────────
   Порт идеи @jahed/parallax-cosmic-background с 21st.dev на ванильный
   холст. От референса взяты две вещи: три слоя точек, идущих с разной
   скоростью (три расстояния), и один источник света у нижней кромки.
   Не взято ничего из его материала: там круглые звёзды, свечение через
   blur(30px) и снос вверх, здесь точки квадратные и целопиксельные, как
   .node__dot в реестре, а снос горизонтальный — полоса первого экрана
   широкая и низкая, вертикальный снос читался бы в ней дождём.

   Свет и подложка живут в CSS, а не на холсте: они неподвижны и в
   каждом кадре рисовать их незачем. Заодно это и есть статический
   кадр — при prefers-reduced-motion, при выключенном JS и до того, как
   скрипт доехал, на месте фона остаётся картинка, а не пустота.

   Цвет на холсте один — тот же #0284f6, что метит состояние в реестре.
   Дальние точки набраны чернилами --ink и на такой прозрачности читаются
   серыми, так что второго акцента на странице не появляется. ── */
.deck, .tier--flat, .gone { position: relative; isolation: isolate; }
.deck > .lane, .tier--flat > .lane, .gone > .lane { position: relative; z-index: 1; }

.field {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  /* Три слоя, как у референса: холодное ядро у самой кромки, широкий
     разлив фирменного синего над ним и подсветка верха полотна. */
  background:
    radial-gradient(58% 40% at 61% 111%, rgba(103, 186, 255, .52), rgba(103, 186, 255, 0) 62%),
    radial-gradient(122% 86% at 61% 119%, rgba(2, 132, 246, .62), rgba(2, 132, 246, .16) 44%, rgba(2, 132, 246, 0) 72%),
    radial-gradient(104% 134% at 44% -12%, #071736, var(--void) 76%);
}
.field__c { display: block; width: 100%; height: 100%; }

/* Затемнение читающей стороны. Поле яркое, и мелкая строка над ним
   уходит под порог 4.5 ровно в тот кадр, когда под неё подплывает
   светлая точка, — порог держится по худшему кадру серии, а не по
   среднему.

   Лежит на самом поле, а не отдельной коробкой под текстом. Коробка
   обрезает градиент по своей границе, и 18.09.2026 это дало на первом
   экране чётко видимый тёмный прямоугольник с вертикальным краем.
   Здесь границ нет вовсе: свет гаснет от левого поля к правому и
   сходит в ноль внутри самого экрана.

   Заодно это композиция, а не заплатка: слева читают, справа смотрят.
   ::after рисуется после холста и до .lane, поэтому гасит точки, но не
   буквы. */
.field::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 104% at 0% 52%,
    rgba(0, 2, 11, .97) 0%, rgba(0, 2, 11, .93) 46%, rgba(0, 2, 11, .70) 66%,
    rgba(0, 2, 11, .28) 84%, rgba(0, 2, 11, 0) 100%);
}

/* ── Первый экран ── */
.deck { border-bottom: 1px solid var(--line); padding: 54px 0 0; }
.deck__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 54px; align-items: end; }
.deck__lead { font-size: 18.5px; color: var(--dim); margin: 20px 0 26px; max-width: 58ch; }
.deck__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* --dim, а не --dim-2. На полотне эта строка давала 4,95:1 — почти на
   самом пороге 4,5 ещё до всякого фона, и над живым полем худший кадр
   серии уводил её вниз. Дело не в фоне: 12,5px самым приглушённым серым
   был слабым местом первого экрана и на статике. */
.deck__meta { font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin: 18px 0 0; }
.tally { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tally__i { background: var(--void); padding: 14px 16px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tally__n { font-family: var(--mono); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally__t { font-size: 14px; color: var(--dim); text-align: right; }

/* ── Реестр строк сети: несущий компонент сайта ── */
/* Шаг 46px — тот же, что у .tier: реестр стоит отдельной секцией и
   обязан жить в общем ритме, а не прилипать к соседям. Значение не
   меняется по брейкпоинтам ровно потому, что у .tier оно тоже не
   меняется, — иначе поле схлопывалось бы на одних ширинах и удваивалось
   на других. Собственной нижней линии у блока нет: её уже несёт
   последняя строка .node, и вторая читалась бы как двойное правило. */
.reg { width: 100%; padding: 46px 0; }
.reg__head, .node {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.7fr) .95fr .9fr minmax(0, 1.5fr);
  gap: 20px; align-items: center;
  padding: 13px var(--gutter);
  max-width: var(--span); margin: 0 auto;
}
.reg__head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--dim-2);
  text-transform: uppercase; border-bottom: 1px solid var(--line-2);
}
.node { border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 14px; }
.node:hover { background: var(--slab); }
/* Заливкой помечается ровно одна строка — та, о которой идёт речь.
   Если залить все, состояние перестаёт быть состоянием. */
.node--now { background: #06203c; }
.node--now:hover { background: #082a4d; }
.node__dot { width: 8px; height: 8px; background: var(--dim-2); }
.node--live .node__dot { background: var(--live); }
.node__name { font-weight: 700; }
.node__mode { color: var(--live); }
.node--off .node__mode { color: var(--dim); }
.node__cap { color: var(--ink); font-variant-numeric: tabular-nums; }
.node__note { color: var(--dim); font-family: var(--serif); font-size: 14.5px; }

/* ── Секции ── */
.tier { border-bottom: 1px solid var(--line); padding: 46px 0; }
.tier--flat { border-bottom: 0; }
.tier__h { margin: 0 0 8px; }
.tier__sub { color: var(--dim); margin: 0 0 26px; max-width: 72ch; }
.prose { font-size: 17px; }
.prose h2 { margin: 34px 0 12px; }
.prose h3 { margin: 26px 0 8px; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.15em; }
.prose li { margin: 0 0 .4em; }
.prose a { color: var(--live); }

/* ── Ступени: нумерация несёт порядок действий, а не украшает ── */
.steps { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--mono); font-size: 13px; color: var(--live); padding-top: 3px; }
.step__t { font-family: var(--mono); font-size: 15.5px; font-weight: 700; margin: 0 0 4px; }
.step__d { color: var(--dim); margin: 0; }

/* ── Тарифы: те же строки реестра, а не карточки ── */
.rates { border-top: 1px solid var(--line-2); }
.rate {
  display: grid; grid-template-columns: minmax(0, 1.2fr) .9fr .9fr minmax(0, 1fr) auto;
  gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 14.5px;
}
.rate--best { background: var(--slab); }
.rate__term { font-weight: 700; font-size: 16px; }
.rate__sum { font-size: 19px; font-weight: 700; }
.rate__mo { color: var(--dim); }
.rate__save { color: var(--live); }
.rate__note { color: var(--dim-2); font-family: var(--serif); font-size: 14px; }

/* ── Таблица клиентов по платформам ── */
.port { border-top: 1px solid var(--line-2); }
.port__r {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.8fr) auto;
  gap: 20px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 14px;
}
.port__os { font-weight: 700; }
.port__what { color: var(--dim); font-family: var(--serif); font-size: 14.5px; }

/* ── FAQ ── */
.ask { border-top: 1px solid var(--line-2); }
.ask__i { border-bottom: 1px solid var(--line); }
.ask__q {
  width: 100%; background: none; border: 0; color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: 15px; font-weight: 700; text-align: left;
  padding: 16px 40px 16px 0; position: relative;
}
.ask__q::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--live); font-weight: 400; }
.ask__i.is-open .ask__q::after { content: '\2212'; }
.ask__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.ask__i.is-open .ask__wrap { grid-template-rows: 1fr; }
.ask__a { overflow: hidden; }
.ask__a p { color: var(--dim); padding: 0 0 16px; margin: 0; max-width: 78ch; }

/* ── Отзывы ── */
.said { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.said__i { background: var(--void); padding: 20px 22px; }
.said__top { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin: 0 0 10px; }
.said__who { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.said__when { font-family: var(--mono); font-size: 12px; color: var(--dim-2); margin-left: auto; }
.said__t { color: var(--dim); margin: 0; }

.stars { position: relative; display: inline-block; font-family: var(--mono); font-size: var(--star-size, 15px); line-height: 1; letter-spacing: .08em; }
.stars__bg { color: var(--line-2); }
.stars__fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--live); }

/* ── Оценка по пунктам ── */
.score { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; border-top: 1px solid var(--line-2); }
.score__n { font-family: var(--mono); font-weight: 700; padding: 13px 0; border-bottom: 1px solid var(--line); }
.score__n small { display: block; font-family: var(--serif); font-weight: 400; font-size: 14px; color: var(--dim); margin-top: 3px; }
.score__v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--live); padding: 13px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.score__out { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding: 18px 0 0; font-family: var(--mono); }
.score__out b { font-size: 30px; }

/* ── Перелинковка ── */
.nexts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; }
.next { background: var(--void); padding: 16px 18px; text-decoration: none; display: block; }
.next:hover { background: var(--slab); }
.next__t { display: block; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--live); margin-bottom: 4px; }
.next__d { display: block; font-size: 14px; color: var(--dim); }

/* ── Крошки ── */
.trail { font-family: var(--mono); font-size: 12px; color: var(--dim-2); padding: 14px 0 0; }
.trail a { color: var(--dim-2); text-decoration: none; }
.trail a:hover { color: var(--live); }
.trail span { margin: 0 8px; }

/* ── Подвал ── */
.base { border-top: 1px solid var(--line-2); padding: 40px 0 34px; }
.base__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.base__t { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); margin: 0 0 14px; }
.base__list { list-style: none; margin: 0; padding: 0; }
.base__list li { margin: 0 0 9px; }
.base__list a:not(.act) { font-family: var(--mono); font-size: 13.5px; color: var(--dim); text-decoration: none; }
.base__list a:not(.act):hover { color: var(--live); }
.base__cta { margin-top: 30px; }
.base__note { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px; font-size: 13.5px; color: var(--dim-2); }

/* ── 404 ── */
.gone { padding: 70px 0; }
.gone__code { font-family: var(--mono); font-size: 13px; color: var(--live); margin: 0 0 12px; }

/* ══════════ Адаптив.
   Пороги подобраны под содержимое строк реестра, а не круглыми числами;
   замер переполнения гоняется по ним же (порог, порог−1, порог+1). ══════════ */

/* Порог бургера. Замер 18.09.2026: знак 166px + одиннадцать пунктов 850px
   + кнопка 118px, при зазорах 26/18 строке нужно было 1447px, при 16/11 и
   кегле 12.5px — 1324px. Из 147px нехватки 123px закрыты разведением
   элементов и только 24px переносом порога: 1300 → 1346. На 1346 между
   последним пунктом и кнопкой остаётся 22px — вдвое больше, чем зазор
   между самими пунктами, так что кнопка читается отдельно от меню.
   Порог совпадает с BURGER_AT в scripts.js — иначе панель осталась бы
   открытой после поворота экрана. */
@media (max-width: 1345px) {
  .nav { display: none; }
  .toggle { display: block; }
  .act--rail { margin-left: 14px; }
}

@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .deck__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
}

@media (max-width: 1024px) {
  .reg__head, .node { grid-template-columns: 12px minmax(0, 1.4fr) .9fr .9fr; }
  .node__note, .reg__head span:last-child { display: none; }
  .rate { grid-template-columns: minmax(0, 1fr) .8fr .8fr auto; }
  .rate__note { display: none; }
  .nexts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* Одна колонка: текст занимает верх экрана, а не левую половину, —
     и затемнение разворачивается сверху вниз вслед за ним. */
  .field::after {
    background: radial-gradient(152% 64% at 30% 18%,
      rgba(0, 2, 11, .97) 0%, rgba(0, 2, 11, .93) 42%, rgba(0, 2, 11, .66) 64%,
      rgba(0, 2, 11, .24) 84%, rgba(0, 2, 11, 0) 100%);
  }
  .deck { padding-top: 40px; }
  .deck__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
  .base__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
  .port__r { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) auto; }
  .port__r > .port__app { display: none; }
}

@media (max-width: 700px) {
  :root { --gutter: 22px; }
  .reg__head { display: none; }
  .node {
    grid-template-columns: 12px minmax(0, 1fr);
    grid-template-areas: 'dot name' '. mode' '. cap';
    gap: 6px 14px; padding-top: 14px; padding-bottom: 14px;
  }
  .node__dot { grid-area: dot; margin-top: 6px; }
  .node__name { grid-area: name; }
  .node__mode { grid-area: mode; font-size: 13px; }
  .node__cap { grid-area: cap; font-size: 13px; color: var(--dim); }
  .rate { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .rate__mo, .rate__save { font-size: 13px; }
  .step { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
  .port__r { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
  .score { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .base__grid { grid-template-columns: minmax(0, 1fr); }
  .tally__t { font-size: 13px; }
}

@media (max-width: 430px) {
  /* Порядок жертв: первой сокращается подпись кнопки, знак с подписью — последний */
  .act__full { display: none; }
  .act__short { display: inline; }
  .act { padding: 10px 14px; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .rail__in { gap: 12px; }
  .act--sm { font-size: 12px; padding: 7px 10px; }
  /* На 320px пара кнопок первого экрана в строку не помещалась: вторая
     выходила за правый край на 11px. Ставим их друг под друга. */
  .deck__row .act:not(.act--sm) { width: 100%; }
}

@media (max-width: 345px) {
  .mark__word { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}