/* Оформление сайта. Палитра: песок, терракота, олива, кирпич, мёд.
   Тени — коричневатые и чёрные, без подцветки. */

:root {
  --pesok:      #f7efe1;
  --bumaga:     #fffaf1;
  --chernila:   #33291f;
  --shepot:     #7a6a57;
  --gran:       #e3d3ba;
  --terrakota:  #b4531f;
  --terrakota-temnaya: #8f3f13;
  --terrakota-pyl: #f6e3d3;
  --oliva:      #6b7a33;
  --oliva-pyl:  #eaeed9;
  --kirpich:    #a3301f;
  --kirpich-pyl:#fae2dc;
  --med:        #c98a12;
  --med-pyl:    #fbeecd;
  --ten:        0 1px 2px rgba(80, 58, 32, .10), 0 8px 24px rgba(80, 58, 32, .07);
  --ten-nizkaya: 0 1px 2px rgba(80, 58, 32, .09);
  --skruglenie: 14px;

  /* ⛔ Засечек нет (решение владельца 10.08.2026): до правки body шёл стеком
     Charter/PT Serif/Georgia. Обе гарнитуры системные, со стороны не грузится
     ничего. ⚠️ Пустым значение не оставлять: пустое = шрифт браузера, а он
     засечковый — на соседнем сайте засечки взялись ровно отсюда.

     🔴 Стек переписан через час после первой правки, по ДВУМ найденным причинам.
     Первая: Optima/Candara/Gill Sans MT — гарнитуры БЕЗ КИРИЛЛИЦЫ. На русском
     сайте ни одна из трёх не нарисовала бы ни буквы, текст проваливался бы в
     последний запасной вариант, и весь стек был бы декорацией.
     Вторая: ровно такой же стек в тот же час встал на translitor.ru — то есть
     собственный отпечаток сети вместо разведения. Здесь теперь свой набор, и
     каждая гарнитура в нём кириллицу умеет: PT Sans (Linux и российские
     системы), Fira Sans, Noto Sans, Segoe UI (Windows), system-ui (macOS). */
  --shrift-tekst: "PT Sans", "Fira Sans", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --shrift-znak:  "Futura", "Avenir Next", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

/* ⛔ Тёмной темы нет и быть не должно (владелец, 10.08.2026): сайт определяет
   растение по ЦВЕТУ листа, тёмный фон это восприятие сдвигает — не украшение,
   а помеха. Медиазапрос тёмной схемы удалён целиком, а не спрятан за
   переключателем; сторож в tests/run.php держит, чтобы не вернулся.
   ⚠️ Не называть его тут дословно — на первом прогоне сторож покраснел от этого
   самого пояснения, то есть поймал сам себя. */

* { box-sizing: border-box; }

/* 🔴 Своё display: block у элемента ПЕРЕБИВАЕТ атрибут hidden. На первом снимке
   390 из-за этого висела иконка битой картинки с подписью «Ваш снимок» —
   заготовка превью, которую никто не должен был видеть до загрузки файла. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pesok);
  color: var(--chernila);
  font: 16px/1.62 var(--shrift-tekst);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--shrift-znak);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.65rem, 5.4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); margin-top: 2.1rem; }
h3 { font-size: 1.06rem; margin-top: 1.5rem; }

a { color: var(--terrakota); text-underline-offset: 3px; }
a:hover { color: var(--terrakota-temnaya); }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }

.obhod {
  position: absolute; left: -9999px; top: 0;
  background: var(--terrakota); color: #fffaf1; padding: .7rem 1rem; z-index: 50;
}
.obhod:focus { left: 0; }

/* ── Шапка ───────────────────────────────────────────────────────────────── */
.venchik {
  background: var(--bumaga);
  border-bottom: 1px solid var(--gran);
}
.venchik__ryadok {
  max-width: 62rem; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.venchik__imya { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.venchik__znak { flex: none; }
.venchik__slova { display: flex; flex-direction: column; }
.venchik__glavnoe {
  font-family: var(--shrift-znak);
  font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em;
}
.venchik__melko { font-size: .74rem; color: var(--shepot); }
.venchik__hod { display: flex; gap: .2rem; flex-wrap: wrap; }
.venchik__hod a {
  font-family: var(--shrift-znak);
  font-size: .87rem; text-decoration: none; color: var(--chernila);
  padding: .38rem .6rem; border-radius: 9px;
}
.venchik__hod a:hover { background: var(--terrakota-pyl); color: var(--terrakota-temnaya); }

/* ── Крошки ──────────────────────────────────────────────────────────────── */
.stebel {
  max-width: 62rem; margin: 0 auto; padding: .8rem 1rem 0;
  font-size: .8rem; color: var(--shepot);
}
.stebel__uzel { color: var(--shepot); text-decoration: none; }
.stebel__uzel:hover { color: var(--terrakota); }
.stebel__uzel--zdes { color: var(--chernila); }
.stebel__cherta { margin: 0 .35rem; }

/* ── Основное поле ───────────────────────────────────────────────────────── */
.pole { max-width: 62rem; margin: 0 auto; padding: 1.3rem 1rem 3rem; }
.pole--uzko { max-width: 44rem; }

.vvod { max-width: 44rem; }
.vvod p { color: var(--shepot); }

/* ── Объектив: приём фотографии ──────────────────────────────────────────── */
.obektiv {
  background: var(--bumaga);
  border: 1px solid var(--gran);
  border-radius: var(--skruglenie);
  box-shadow: var(--ten);
  padding: 1.1rem;
  margin: 0 0 1.4rem;
  position: relative;
  overflow: hidden;   /* жилки уходят за скруглённый край, а не торчат углом */
}

/* ── Лист: лицо этого сайта ──────────────────────────────────────────────────
   `position:absolute` + заданные размеры: места не занимает, раскладку сдвинуть
   не может. ⚠️ Правился дважды ПО СНИМКУ: при 92 px лист читался как наклейка,
   случайно налезшая на пунктир и обрезанная краем. Крупный и вдвое бледнее —
   читается водяным знаком, и пересечение с пунктиром незаметно. */
.obektiv__list {
  position: absolute; right: -26px; bottom: -30px;
  width: 210px; height: 260px;
  color: var(--oliva); opacity: .10;
  pointer-events: none;
  transform: rotate(14deg);
  transform-origin: bottom right;
}
@media (max-width: 700px) {
  /* На 390 знак такого размера накрыл бы поле уточнения. Проверено снимком. */
  .obektiv__list { width: 128px; height: 158px; right: -22px; bottom: -24px; opacity: .09; }
}

/* «Прорастает» один раз: черешок и средняя жилка, потом контур, потом боковые.
   Каждая кривая короче 320, поэтому одного dasharray хватает на все. */
.obektiv__zhilka {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: zhilka-rastet 1.1s ease-out forwards;
}
.obektiv__zhilka:nth-child(2) { animation-delay: .30s }   /* контур листа */
.obektiv__zhilka:nth-child(3) { animation-delay: .62s }   /* боковые жилки */
.obektiv__zhilka:nth-child(4) { animation-delay: .70s }
.obektiv__zhilka:nth-child(5) { animation-delay: .66s }
.obektiv__zhilka:nth-child(6) { animation-delay: .74s }
@keyframes zhilka-rastet { to { stroke-dashoffset: 0 } }

/* ⚠️ При reduce лист виден СРАЗУ и целиком. Обнулить только `animation` мало:
   без сброса `stroke-dashoffset` рисунок остался бы невидимым навсегда. */
@media (prefers-reduced-motion: reduce) {
  .obektiv__zhilka { animation: none; stroke-dashoffset: 0; }
}
.obektiv__ploshchadka {
  border: 2px dashed var(--gran);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.obektiv__ploshchadka--zhdet { border-color: var(--terrakota); background: var(--terrakota-pyl); }
.obektiv__knopki { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.obektiv__glavnaya, .obektiv__vtoraya {
  font: 600 1rem/1.2 var(--shrift-znak);
  border-radius: 11px; padding: .95rem 1.35rem; cursor: pointer; border: 1px solid transparent;
  min-height: 48px;
}
.obektiv__glavnaya { background: var(--terrakota); color: #fffaf1; box-shadow: var(--ten-nizkaya); }
.obektiv__glavnaya:hover { background: var(--terrakota-temnaya); }
.obektiv__vtoraya { background: transparent; color: var(--terrakota); border-color: var(--gran); }
.obektiv__vtoraya:hover { background: var(--terrakota-pyl); }
.obektiv__podskazka { font-size: .82rem; color: var(--shepot); margin: .8rem 0 0; }
.obektiv__snimok { max-width: 100%; max-height: 260px; border-radius: 11px; margin: 0 auto .8rem; display: block; }
.obektiv__pole {
  width: 100%; font: inherit; font-size: .95rem; padding: .6rem .7rem; margin-top: .7rem;
  border: 1px solid var(--gran); border-radius: 9px; background: var(--pesok); color: var(--chernila);
}

.podozhdem { text-align: center; padding: 1rem 0; }
.podozhdem__poloska { height: 6px; background: var(--gran); border-radius: 3px; overflow: hidden; margin: .7rem auto; max-width: 22rem; }
.podozhdem__zapolnenie { height: 100%; width: 0; background: var(--oliva); transition: width .5s linear; }
.podozhdem__slova { font-size: .9rem; color: var(--shepot); }
.podozhdem__sekundy { font-variant-numeric: tabular-nums; }

/* ── Находка: карточка результата ────────────────────────────────────────── */
.nahodka { margin: 1.4rem 0; }
.nahodka__variant {
  background: var(--bumaga);
  border: 1px solid var(--gran);
  border-left: 5px solid var(--gran);
  border-radius: var(--skruglenie);
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
  box-shadow: var(--ten-nizkaya);
}
.nahodka__variant--pervyj { border-left-color: var(--oliva); box-shadow: var(--ten); }
.nahodka__shapka { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.nahodka__nazvanie { font-size: 1.22rem; margin: 0; }
.nahodka__latin { font-style: italic; color: var(--shepot); font-size: .92rem; }
.nahodka__uverennost {
  font: 600 .82rem/1 var(--shrift-znak);
  background: var(--oliva-pyl); color: var(--oliva); padding: .35rem .6rem; border-radius: 999px; white-space: nowrap;
}
.nahodka__uverennost--slabaya { background: var(--med-pyl); color: #8a5c07; }
.nahodka__zagolovochek {
  font: 600 .74rem/1 var(--shrift-znak);
  text-transform: uppercase; letter-spacing: .08em; color: var(--shepot); margin: .9rem 0 .35rem;
}
.nahodka__priznaki { margin: 0 0 .3rem; padding-left: 1.1rem; font-size: .93rem; }
.nahodka__otlichie { font-size: .9rem; color: var(--shepot); margin: .5rem 0 0; }
.nahodka__yad { background: var(--kirpich-pyl); color: var(--kirpich); border-radius: 9px; padding: .55rem .7rem; font-size: .88rem; margin: .7rem 0 0; }
.nahodka__perehod { display: inline-block; margin-top: .7rem; font-weight: 600; font-size: .92rem; }
.nahodka__dozapros { background: var(--med-pyl); border-radius: var(--skruglenie); padding: .9rem 1rem; margin-bottom: 1rem; }
.nahodka__ryad { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.nahodka__sboj { background: var(--kirpich-pyl); color: var(--kirpich); border-radius: var(--skruglenie); padding: .9rem 1rem; }

/* ── Не получилось: честный ответ вместо тихой строчки ───────────────────────
   Свой вид, а НЕ плашка `nahodka__dozapros`: до правки «на снимке не растение»
   выглядело как подсказка «уверенности мало», и человек не понимал, что вышло
   (жалоба владельца 10.08.2026). Медовый тон = «нечего определять»: кирпичный
   читался бы как поломка сайта, оливковый — как успех. */
.nesovpalo {
  background: var(--med-pyl);
  border: 1px solid var(--med);
  border-left: 5px solid var(--med);
  border-radius: var(--skruglenie);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.2rem;
}
.nesovpalo__zagolovok {
  font: 600 1.16rem/1.25 var(--shrift-znak);
  color: #7a5206;              /* медовый, затемнённый до 6,1:1 к подложке #fbeecd */
  margin: 0 0 .5rem;
}
.nesovpalo__chto    { margin: 0 0 .6rem; }
.nesovpalo__pochemu { margin: 0 0 .6rem; color: var(--shepot); font-size: .93rem; }
.nesovpalo__podzagolovok {
  font: 600 .74rem/1 var(--shrift-znak);
  text-transform: uppercase; letter-spacing: .08em; color: var(--shepot);
  margin: .9rem 0 .45rem;
}
.nesovpalo__shagi { margin: 0; padding-left: 1.3rem; font-size: .95rem; }
.nesovpalo__shagi li { margin-bottom: .35rem; }
.nesovpalo__shagi li::marker { font-family: var(--shrift-znak); font-weight: 600; color: var(--med); }
/* Стоит рядом с кнопкой — значит обязана выглядеть кнопкой. */
.nesovpalo__spisok {
  display: inline-flex; align-items: center; text-decoration: none;
  background: transparent; color: var(--terrakota); border: 1px solid var(--gran);
}
.nesovpalo__spisok:hover { background: var(--terrakota-pyl); color: var(--terrakota-temnaya); }

/* ── Полка видов ─────────────────────────────────────────────────────────── */
.polka { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; padding: 0; margin: 1.2rem 0; list-style: none; }
.polka__vid { margin: 0; }
.polka__ssylka {
  display: block; height: 100%; text-decoration: none; color: inherit;
  background: var(--bumaga); border: 1px solid var(--gran); border-radius: var(--skruglenie);
  padding: .85rem 1rem; box-shadow: var(--ten-nizkaya);
}
.polka__ssylka:hover { border-color: var(--terrakota); }
.polka__imya { font: 600 1.02rem/1.2 var(--shrift-znak); color: var(--terrakota); }
.polka__latin { font-style: italic; font-size: .84rem; color: var(--shepot); }
.polka__stroka { font-size: .88rem; margin: .45rem 0 0; }
.polka__metka {
  display: inline-block; margin-top: .5rem; font-size: .74rem; padding: .18rem .5rem; border-radius: 999px;
  font-family: var(--shrift-znak);
}
.polka__metka--yad { background: var(--kirpich-pyl); color: var(--kirpich); }
.polka__metka--ostorozhno { background: var(--med-pyl); color: #8a5c07; }
.polka__metka--net { background: var(--oliva-pyl); color: var(--oliva); }

/* ── Гербарий: карточка вида ─────────────────────────────────────────────── */
.gerbarij__kratko { font-size: 1.06rem; color: var(--shepot); margin-bottom: 1.2rem; }
.gerbarij__blok {
  background: var(--bumaga); border: 1px solid var(--gran); border-radius: var(--skruglenie);
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--ten-nizkaya);
}
.gerbarij__blok--yad { background: var(--kirpich-pyl); border-color: var(--kirpich); }
.gerbarij__blok--yad h2 { color: var(--kirpich); }
.gerbarij__blok--bezopasno { background: var(--oliva-pyl); border-color: var(--oliva); }
.gerbarij__blok--bezopasno h2 { color: var(--oliva); }
.gerbarij__blok h2 { margin-top: 0; }
.gerbarij__uhod { margin: 0; }
.gerbarij__uhod dt {
  font: 600 .76rem/1 var(--shrift-znak);
  text-transform: uppercase; letter-spacing: .08em; color: var(--shepot); margin-top: .8rem;
}
.gerbarij__uhod dd { margin: .25rem 0 0; }

.pozyv {
  background: var(--terrakota-pyl); border: 1px solid var(--terrakota); border-radius: var(--skruglenie);
  padding: 1rem 1.1rem; margin: 1.4rem 0;
}
.pozyv h2 { margin-top: 0; }
.pozyv__knopka {
  display: inline-block; background: var(--terrakota); color: #fffaf1; text-decoration: none;
  font: 600 1rem/1.2 var(--shrift-znak);
  padding: .85rem 1.3rem; border-radius: 11px; min-height: 46px;
}
.pozyv__knopka:hover { background: var(--terrakota-temnaya); color: #fffaf1; }

/* ── Наставление и расспрос ──────────────────────────────────────────────── */
.nastavlenie { list-style: none; padding: 0; margin: 1.2rem 0; counter-reset: punkt; }
.nastavlenie__punkt {
  background: var(--bumaga); border: 1px solid var(--gran); border-radius: var(--skruglenie);
  padding: .85rem 1rem .85rem 3rem; margin-bottom: .7rem; position: relative;
}
.nastavlenie__punkt::before {
  counter-increment: punkt; content: counter(punkt);
  position: absolute; left: 1rem; top: .85rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--oliva); color: #fffaf1;
  font: 600 .82rem/1.5rem var(--shrift-znak);
  text-align: center;
}
.nastavlenie__punkt b { font-family: var(--shrift-znak); }

.rasspros { margin: 1.4rem 0; }
.rasspros__vopros {
  background: var(--bumaga); border: 1px solid var(--gran); border-radius: var(--skruglenie);
  padding: .8rem 1rem; margin-bottom: .6rem;
}
.rasspros__vopros summary {
  cursor: pointer;
  font: 600 .98rem/1.35 var(--shrift-znak);
}
.rasspros__otvet { margin: .7rem 0 0; }

/* ── Записка: форма связи ────────────────────────────────────────────────── */
.vestochka { background: var(--bumaga); border: 1px solid var(--gran); border-radius: var(--skruglenie); padding: 1.1rem; max-width: 34rem; }
.vestochka__pole { display: block; width: 100%; font: inherit; padding: .6rem .7rem; margin: .3rem 0 .9rem;
  border: 1px solid var(--gran); border-radius: 9px; background: var(--pesok); color: var(--chernila); }
.vestochka__podpis { font: 600 .78rem/1 var(--shrift-znak);
  text-transform: uppercase; letter-spacing: .07em; color: var(--shepot); }

/* ── Тропинка: страница без адреса ───────────────────────────────────────── */
.tropinka { text-align: center; padding: 2rem 0; }
.tropinka__vyhod { margin-top: 1.4rem; }

/* ── Подвал ──────────────────────────────────────────────────────────────────
   🔴 Дефект, а не вкусовщина: все прочие места сайта снимали подчёркивание ЯВНО
   (`.venchik__imya`, `.venchik__hod a`, `.stebel__uzel`, `.polka__ssylka`,
   `.pozyv__knopka`), а у подвала правила не было ВООБЩЕ — он один жил по
   умолчанию браузера. Владелец увидел именно это.
   ⛔ Глушить подчёркивание везде нельзя: в прозе оно полезно и остаётся (правило
   `a` выше не тронуто). Снимается только в СПИСКАХ подвала — там навигация.
   Взамен — внятное наведение: до правки не было ни того, ни другого. */
.kornevishche {
  background: var(--bumaga);
  border-top: 2px solid var(--oliva);   /* оливковый черешок вместо безликой серой линии */
  padding: 2.2rem 1rem 1.4rem;
  margin-top: 2.6rem;
}
.kornevishche__stolbcy {
  max-width: 62rem; margin: 0 auto;
  display: grid; gap: 1.5rem 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* Иерархия: до правки заголовок столбца весил столько же, сколько пункты, и
   четыре столбца читались одной лентой. Теперь заголовок другой гарнитурой,
   темнее и с оливковой засечкой слева; пункты светлее и мельче. */
.kornevishche__shapochka {
  font-family: var(--shrift-znak);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--chernila);
  margin: 0 0 .7rem; padding-left: .6rem;
  border-left: 3px solid var(--oliva);
  line-height: 1.1;
}
.kornevishche__stroka { font-size: .86rem; color: var(--shepot); margin-bottom: .7rem; }
.kornevishche__perechen { list-style: none; padding: 0; margin: 0; font-size: .89rem; }
.kornevishche__perechen li { margin-bottom: .1rem; }

/* Без подчёркивания, но с настоящим наведением. Цель нажатия во всю ширину
   столбца и 34 px высотой: на телефоне по подвалу промахиваются чаще всего. */
.kornevishche a {
  display: block;
  text-decoration: none;
  color: var(--chernila);
  padding: .32rem .5rem;
  margin-left: -.5rem;
  border-radius: 8px;
  transition: background .13s, color .13s, transform .13s;
}
.kornevishche a:hover,
.kornevishche a:focus-visible {
  background: var(--oliva-pyl);
  color: var(--terrakota-temnaya);
  transform: translateX(2px);
}
/* Ссылка в абзаце подвала — проза: остаётся строчной и подчёркнутой. */
.kornevishche__stroka a { display: inline; padding: 0; margin: 0; text-decoration: underline; color: var(--terrakota); }
.kornevishche__stroka a:hover { background: none; transform: none; }

/* Нижняя строка отделена, но не обрубком: оговорка про ботаника читается
   отдельной мыслью, а не хвостом списка. */
.kornevishche__nizok {
  max-width: 62rem; margin: 1.8rem auto 0; padding-top: 1rem;
  border-top: 1px solid var(--gran);
  font-size: .78rem; line-height: 1.55; color: var(--shepot);
}
.kornevishche__nizok b { font-family: var(--shrift-znak); color: var(--chernila); font-weight: 600; }

@media (max-width: 560px) {
  /* На 390 четыре столбца иначе сложились бы лентой одинаковых ссылок: здесь
     два столбца, рубрики разделены линией. Проверено снимком, не расчётом. */
  .kornevishche { padding-top: 1.7rem; }
  .kornevishche__stolbcy { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
  .kornevishche__stolbec:first-child { grid-column: 1 / -1; }
  .kornevishche__stolbec + .kornevishche__stolbec { border-top: 1px solid var(--gran); padding-top: .9rem; }
  .kornevishche__stolbec:nth-child(2) { border-top: 1px solid var(--gran); }
  .kornevishche__perechen { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kornevishche a { transition: none; }
  .kornevishche a:hover, .kornevishche a:focus-visible { transform: none; }
}

/* ── Плашка про счёт заходов ─────────────────────────────────────────────── */
.pylca {
  position: fixed; left: .6rem; right: .6rem; bottom: .6rem; z-index: 40;
  background: var(--bumaga); border: 1px solid var(--gran); border-radius: 12px;
  box-shadow: var(--ten);
  padding: .55rem .7rem;
  display: flex; align-items: center; gap: .7rem;
}
.pylca[hidden] { display: none; }
.pylca__tekst { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--shepot); }
.pylca__da {
  flex: none; font: 600 .82rem/1 var(--shrift-znak);
  background: var(--terrakota); color: #fffaf1; border: 0; border-radius: 8px; padding: .5rem .8rem; cursor: pointer;
}

.tablica-obertka { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--gran); }
th { font-family: var(--shrift-znak); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--shepot); }

@media (max-width: 480px) {
  .venchik__hod { width: 100%; }
  .venchik__hod a { padding: .38rem .45rem; font-size: .82rem; }
}