/*
Theme Name: Seed4Me Ru
Theme URI: https://seed4mevpn.help/
Author: Seed4Me Ru
Description: Русскоязычный сайт о VPN-сервисе Seed4Me. Язык дизайна — ботанический атлас.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: s4m-theme
*/

/* ════════════════════════════════════════════════════════════════
   ТОКЕНЫ
   Палитра снята кодом с CSS-бандлов seed4.me: фирменный #519600
   (24 вхождения), нейтрали #333 / #999 / #ddd. Bootstrap-мусор
   офсайта (#f89406, #ee5f5b, #5bc0de) отброшен — это не цвета бренда.
   Зелёный живёт ГРАДАЦИЯМИ, а не одним тоном, и НИКОГДА не заливает
   кнопку: заливка кнопок фирменным зелёным — это решение соседнего
   сайта того же владельца (seedforme.info), с которым мы расходимся.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* бумага атласа */
  --paper:#f3eee1;
  --paper-2:#e9e2d0;
  --paper-3:#e2dac6;
  --field:#fbf8ef;          /* белое поле гравюрной пластины */

  /* чернила */
  --ink:#1d2115;
  --ink-2:#33381f;
  --ink-3:#808961;
  --rule:rgba(29,33,21,.26);
  --rule-soft:rgba(29,33,21,.14);

  /* зелень: от молодой до хвойной */
  --green-young:#8fbf5a;
  --green:#519600;          /* фирменный */
  --green-mid:#43701d;
  --green-deep:#2f4d16;
  --green-pale:#e7eedb;

  /* терракота — единственный цвет расхождения */
  --clash:#9a4b2f;
  --clash-pale:#f7efe9;

  --shell:1400px;           /* правило 19: не уже 1400 */
  --measure:63ch;           /* ch на кириллице врёт: 63ch ≈ 75 знаков */
  --gutter:44px;
  --r:2px;                  /* один радиус на весь сайт */
  --mast-h:66px;

  --display:'Forum',Georgia,'Times New Roman',serif;
  --text:'PT Serif Caption',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'DejaVu Sans Mono',monospace;
}

/* ── База ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.62 var(--text);
  /* Ни Forum, ни PT Serif Caption не имеют начертания 700. Без этой
     строки браузер рисует псевдожирный сам, и набор плывёт. Акценты
     на этом сайте держатся курсивом, цветом и разрядкой. */
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Зерно бумаги. Именно feTurbulence в data-URI, а не тайл из точек:
   тайл детектор антипаттернов читает как декоративную сетку. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.34'/></svg>");
}
body>*{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep)}
a:hover{color:var(--green-mid)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.005em;margin:0 0 .5em}
h1{font-size:clamp(38px,4.6vw,74px);line-height:1.03}
h2{font-size:clamp(27px,2.7vw,40px);line-height:1.1}
h3{font-size:clamp(20px,1.6vw,25px);line-height:1.2}
p{margin:0 0 1.05em}
.prose p,.prose li{max-width:var(--measure)}
strong,b{font-weight:400;font-style:italic;color:var(--green-deep)}
em{font-style:italic}
.cap{font:11px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums lining-nums}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
::selection{background:var(--green-young);color:var(--ink)}

/* ── Лист (контейнер) ─────────────────────────────────────────── */
.sheet{width:min(100% - var(--gutter)*2,var(--shell));margin-inline:auto}
.sheet--narrow{width:min(100% - var(--gutter)*2,960px)}

/* ── Шапка листа ──────────────────────────────────────────────── */
.mast{border-bottom:1px solid var(--ink);background:var(--paper)}
.mast__in{display:flex;align-items:stretch;min-height:var(--mast-h)}
.sign{display:flex;align-items:center;gap:10px;padding-right:24px;
      border-right:1px solid var(--rule);font-family:var(--display);
      font-size:22px;text-decoration:none;color:var(--ink);white-space:nowrap}
.sign:hover{color:var(--ink)}
.sign svg{flex:0 0 auto}
.sign__ru{color:var(--ink-3)}
.nav{display:flex;align-items:center;gap:20px;padding:0 24px;flex-wrap:wrap}
.nav a{font-size:14.5px;text-decoration:none;color:var(--ink-2);
       border-bottom:1px solid transparent;padding-bottom:1px}
.nav a:hover,.nav a.is-on{border-bottom-color:var(--green);color:var(--ink)}
.mast__sp{flex:1 1 auto}
.checked{display:flex;flex-direction:column;justify-content:center;
         padding:0 18px;border-left:1px solid var(--rule);text-align:right}

/* Реф-кнопка. Чернильная, НЕ зелёная. Живёт в строке шапки,
   вне бургера, на любой ширине. */
.act{display:flex;align-items:stretch;border-left:1px solid var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);
     color:var(--paper);text-decoration:none;padding:0 26px;border:0;
     font-family:var(--text);font-size:15px;border-radius:0;cursor:pointer;
     transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--green-deep);color:var(--paper)}
.btn svg{flex:0 0 auto}
.btn--out{border-radius:var(--r);padding:13px 24px}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);
            padding:12px 22px;border-radius:var(--r)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--xs{padding:8px 14px;font-size:13.5px;white-space:nowrap;border-radius:var(--r)}
.btn__short{display:none}

.burger{display:none;align-items:center;justify-content:center;width:52px;
        background:none;border:0;border-left:1px solid var(--rule);cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
        width:22px;height:1.5px;background:var(--ink)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.drawer{display:none;border-bottom:1px solid var(--ink);background:var(--paper-2)}
.drawer.is-open{display:block}
.drawer ul{list-style:none;margin:0;padding:10px 0;
           max-height:calc(100dvh - var(--mast-h) - 10px);overflow-y:auto;
           overscroll-behavior:contain}
.drawer a{display:block;padding:11px var(--gutter);text-decoration:none;color:var(--ink);
          font-size:16px;border-bottom:1px solid var(--rule-soft)}

/* ── Первый экран ─────────────────────────────────────────────── */
.opening{padding:clamp(34px,4.4vw,64px) 0 clamp(30px,3.6vw,52px)}
.opening__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:38px;align-items:center}
@media(min-width:1000px){.opening__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,3.4vw,52px)}}
.opening h1 em{font-style:normal;color:var(--green-mid)}
.lead{font-size:clamp(17px,1.25vw,19px);line-height:1.6;max-width:46ch;color:var(--ink-2)}

/* Ряд крупных чисел под лидом */
.tally{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;
       border-top:1px solid var(--rule);padding-top:16px;margin-top:22px}
.tally__v{display:block;font-family:var(--display);font-size:clamp(28px,2.4vw,36px);
          line-height:1;color:var(--green-deep)}
.tally__k{display:block;margin-top:5px}

/* ── Гравюрная пластина ───────────────────────────────────────── */
.plate{position:relative;background:var(--field);padding:20px 20px 13px;margin:0 auto;max-width: 1100px;
       transform:rotate(-.5deg);
       box-shadow:0 30px 60px -28px rgba(29,33,21,.55),
                  0 2px 0 rgba(255,255,255,.7) inset,
                  0 0 0 1px rgba(29,33,21,.16)}
.plate::before{content:"";position:absolute;inset:9px;border:1px solid var(--rule);pointer-events:none}
.plate svg{width:100%;height:auto;display:block}
/* Картинка внутри пластины ведёт себя как её же гравюра: ширина по
   контейнеру, высота по пропорции файла. width/height в разметке стоят
   настоящие, поэтому место резервируется до загрузки и вёрстка не прыгает. */
.plate picture{display:block}
.plate img{width:100%;height:auto;display:block}
.plate figcaption{margin-top:9px;text-align:center}

/* ── Секции и линейки ─────────────────────────────────────────── */
.leaf{padding:clamp(34px,4vw,58px) 0}

.leaf--ink{background:var(--ink);color:var(--paper)}
.leaf--ink h2,.leaf--ink h3{color:var(--paper)}
.leaf--ink .cap{color:rgba(243,238,225,.66)}
.leaf--ink a{color:var(--green-young)}
.leaf__head{margin-bottom:clamp(18px,2vw,28px)}
.leaf__head p{color:var(--ink-3);max-width:var(--measure);margin:0}
.rule{border:0;border-top:1px solid var(--rule);margin:0;position:relative}
.rule::after{content:"";position:absolute;left:0;top:-1px;width:132px;border-top:2px solid var(--green)}

/* ── Реестр сверки ────────────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;background:var(--field);
        border:1px solid var(--ink);font-size:15px}
.ledger caption{caption-side:top;text-align:left;padding:0 0 9px;
                font:11px/1.4 var(--mono);letter-spacing:.13em;
                text-transform:uppercase;color:var(--ink-3)}
.ledger th{text-align:left;padding:9px 13px;border-bottom:1px solid var(--ink);
           font:10px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;
           color:var(--ink-3);font-weight:400}
.ledger td{padding:10px 13px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.ledger tr:last-child td{border-bottom:0}
.ledger .v{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger .s{font:11.5px/1.4 var(--mono);color:var(--ink-3)}
.ledger .ok{width:34px;text-align:center;color:var(--green);font-size:15px}
.ledger tr:hover td{background:var(--paper-2)}
.ledger tr:hover td.s{color:var(--ink)}

/* Расхождение: две строки, скоба и пометка */
.clash{margin-top:14px;border:1px solid var(--clash);background:var(--clash-pale);
       padding:11px 13px;display:grid;grid-template-columns:14px minmax(0,1fr);gap:11px}
.clash__brace{border-left:2px solid var(--clash);border-top:2px solid var(--clash);
              border-bottom:2px solid var(--clash)}
.clash p{margin:0 0 4px;font-size:14.5px}
.clash p:last-of-type{margin-bottom:0}
.clash .cap{color:var(--clash);margin-top:6px;display:block}

/* ── Сетки ────────────────────────────────────────────────────── */
/* auto-fit с minmax(0,1fr) невалиден и роняет ВСЁ объявление —
   колонка схлопывается по max-content и страница едет вбок. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media(min-width:760px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:760px) and (max-width:999px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Врезка с одним фактом ────────────────────────────────────── */
.note{border-left:2px solid var(--green);padding:2px 0 2px 16px;margin:0 0 1.05em;
      max-width:var(--measure)}
.note p:last-child{margin-bottom:0}

/* ── Стадии прорастания как шкала сроков ──────────────────────── */
.stalk{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--rule)}
@media(min-width:760px){.stalk{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stage{padding:15px 14px;border-bottom:1px solid var(--rule-soft)}
@media(min-width:760px){.stage{border-bottom:0;border-right:1px solid var(--rule-soft)}
  .stage:last-child{border-right:0}}
.stage.is-best{background:var(--green-pale)}
.stage__v{display:block;font-family:var(--display);font-size:29px;line-height:1;margin:7px 0 4px}
.stage__rub{display:block;font-size:13.5px;color:var(--ink-3)}

/* ── Таблицы ──────────────────────────────────────────────────── */
/* ── Карта сети ───────────────────────────────────────────────────────
   Вкладка атласа на листе «Локации». Ширина отдаётся контейнеру, высота
   держится соотношением сторон viewBox — так на любой ширине нет ни
   переполнения, ни скачка вёрстки при загрузке. */
.s4m-map{margin:0 auto;}
.s4m-map__svg{display:block;width:100%;height:auto;background:var(--field)}
.s4m-map__grid{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.13}
.s4m-map__land{fill:var(--paper-2);stroke:var(--ink);stroke-width:.7;
               stroke-linejoin:round;fill-rule:evenodd}
/* Отметки увеличиваются на узких экранах: карта ужимается вместе с
   контейнером, и в 390px точка радиусом 3 по viewBox 1000 превращается
   в пиксель. Масштаб — вокруг центра самой отметки (transform-box:
   fill-box), поэтому координаты не съезжают. */
.s4m-map__pt{fill:var(--green);stroke:var(--field);stroke-width:1.3;
             transform-box:fill-box;transform-origin:center}
@media(max-width:820px){ .s4m-map__pt{transform:scale(1.5)} }
@media(max-width:480px){ .s4m-map__pt{transform:scale(2.1)} }
.s4m-map__pt--mark{fill:var(--green-deep);stroke:var(--field);stroke-width:1.6}
.s4m-map__pt--cluster{fill:var(--green-young);stroke:var(--ink);stroke-width:1.3}
.s4m-map__key{list-style:none;margin:18px 0 0;padding:0;display:flex;
              flex-wrap:wrap;gap:8px 26px;font-size:15px}
.s4m-map__key li{display:flex;align-items:center;gap:9px}
.s4m-map__chip{width:11px;height:11px;border-radius:50%;flex:0 0 auto;
               background:var(--green);box-shadow:0 0 0 1.5px var(--paper)}
.s4m-map__chip--mark{background:var(--green-deep)}
.s4m-map__chip--cluster{border-radius:2px;background:var(--green-young);
                        box-shadow:0 0 0 1.5px var(--ink)}
.s4m-map__note{margin-top:14px;max-width:var(--measure)}
@media(max-width:640px){
  .s4m-map__key{gap:8px 18px;font-size:14px}
}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:var(--field);
     border:1px solid var(--rule)}
.tbl th{text-align:left;padding:10px 13px;border-bottom:1px solid var(--ink);
        font:10px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;
        color:var(--ink-3);font-weight:400}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .tbl,.tbl tbody,.tbl tr,.tbl td,
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:100%}
  .tbl thead,.ledger thead{display:none}
  .tbl tr,.ledger tr{border-bottom:1px solid var(--rule);padding:6px 0}
  .tbl td,.ledger td{border:0;padding:6px 13px;display:flex;gap:12px;justify-content:space-between}
  .tbl td::before,.ledger td::before{content:attr(data-label);font:10px/1.5 var(--mono);
                  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
  /* Ширину служебной колонки на стопке не держим: она задана для сетки. */
  .ledger .ok{width:auto;text-align:right}
  .ledger .v{white-space:normal}
}

/* ── Аккордеон ────────────────────────────────────────────────── */
.qa{border-top:1px solid var(--rule)}
.qa__item{border-bottom:1px solid var(--rule)}
.qa__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
       padding:16px 40px 16px 0;font-family:var(--display);font-size:20px;
       color:var(--ink);position:relative}
.qa__q::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
              border-right:1.5px solid var(--green-deep);border-bottom:1.5px solid var(--green-deep);
              transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.qa__item.is-open .qa__q::after{transform:translateY(-30%) rotate(-135deg)}
/* grid-template-rows, не max-height: дешевле и не дёргает раскладку */
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.qa__item.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{padding-bottom:16px;max-width:var(--measure)}

/* ── Оценка и отзывы ──────────────────────────────────────────── */
.score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.score__v{font-family:var(--display);font-size:clamp(44px,4.4vw,64px);line-height:1;
          color:var(--green-deep)}
.crit{border-top:1px solid var(--rule)}
.crit__row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;
           padding:15px 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:820px){.crit__row{grid-template-columns:200px 62px minmax(0,1fr);gap:20px;align-items:baseline}}
.crit__n{font-family:var(--display);font-size:20px}
.crit__s{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--green-deep)}
.crit__t p{margin:0 0 .4em;max-width:var(--measure)}
.crit__t p:last-child{margin-bottom:0;color:var(--ink-3)}

.voice{background:var(--field);border:1px solid var(--rule);padding:18px 20px}
.voice__who{font-family:var(--display);font-size:19px;margin:0 0 3px}
.voice__meta{margin:0 0 10px}
.voice p:last-child{margin-bottom:0}
.stars{display:inline-block;position:relative;line-height:1;white-space:nowrap}
.stars svg{fill:currentColor;color:var(--rule)}
.stars__fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.stars__fill svg{color:var(--green)}

/* ── Перелинковка ─────────────────────────────────────────────── */
.onward a{display:block;background:var(--field);border:1px solid var(--rule);
          padding:16px 18px;text-decoration:none;color:var(--ink);
          transition:border-color .18s ease,transform .18s ease}
.onward a:hover{border-color:var(--green);transform:translateY(-2px)}
.onward b{display:block;font-family:var(--display);font-size:19px;font-weight:400;
          font-style:normal;color:var(--ink);margin-bottom:4px}
.onward span{font-size:14.5px;color:var(--ink-3)}

/* ── Выходные данные (подвал) ─────────────────────────────────── */
.colophon{background:var(--ink);color:var(--paper);padding:clamp(32px,3.6vw,52px) 0 26px;
          margin-top:clamp(36px,4vw,64px)}
.colophon h2{color:var(--paper);font-size:24px}
.colophon__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media(min-width:820px){.colophon__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{margin-bottom:7px}
/* :not() обязателен — иначе правило .colophon a перекрасит реф-кнопку
   по специфичности, и подпись уедет в цвет ссылок подвала */
.colophon a:not(.btn){color:var(--green-young);text-decoration:none;font-size:15px}
.colophon a:not(.btn):hover{color:#c7e29b;text-decoration:underline}
.colophon .btn{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:13px 24px}
.colophon .btn:hover{background:var(--green-young);color:var(--ink)}
.colophon__act{margin-top:32px}          /* воздух над кнопкой ≥28px */
.colophon__note{margin-top:26px;padding-top:18px;border-top:1px solid rgba(243,238,225,.2);
                color:rgba(243,238,225,.62);font-size:13.5px;max-width:92ch}

/* ── 404 ──────────────────────────────────────────────────────── */
.lost{padding:clamp(48px,7vw,110px) 0;text-align:center}
.lost .plate{max-width:300px;margin:0 auto 28px;transform:rotate(1deg)}

/* ══ Адаптив. Лестница своя, выведена под эту шапку, а не взята
   круглыми числами: 1180 — где строка меню перестаёт помещаться. ══ */
@media(max-width:1320px){:root{--gutter:34px}}
@media(max-width:1180px){
  .nav{display:none}
  .burger{display:flex}
  .checked{display:none}
}
@media(max-width:1000px){:root{--mast-h:60px}}
@media(max-width:820px){:root{--gutter:26px}}
@media(max-width:640px){:root{--gutter:20px}}
/* Порядок жертв канонический: сначала сокращается подпись КНОПКИ,
   знак с подписью — последнее, чем жертвуем. */
@media(max-width:480px){
  .btn__full{display:none}
  .btn__short{display:inline}
  .btn{padding:0 16px}
}
@media(max-width:400px){
  :root{--gutter:15px}
  .sign{font-size:19px;padding-right:14px}
  .nav{gap:14px}
}
@media(max-width:345px){
  .sign__ru{display:none}
  .sign{gap:7px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media print{
  .mast,.drawer,.colophon__act,.burger{display:none}
  body::before{display:none}
  .plate{box-shadow:none;transform:none}
}