/* Moscow Free Tour — оформление.
 *
 * Откуда взялся вид. Сайт про ежедневные экскурсии, которые уходят в
 * фиксированное время от фиксированных точек — то есть про расписание.
 * Поэтому главный экран сделан табло отправлений, а не «большая картинка с
 * заголовком»: расписание и есть самое характерное, что тут есть.
 *
 * Палитра снята с московского метро: лаковый красный буквы «М», бронза
 * люстр, темнота перегона, мрамор станционных стен. Шрифт заголовков —
 * узкий гротеск, каким набирают указатели на транспорте.
 */

:root{
  --stone:#E8E5DF;        /* мрамор станции */
  --surface:#F5F3EF;
  --ink:#17191D;          /* темнота перегона */
  --ink-soft:#3E4249;
  --muted:#6E7178;
  --line:#D4CFC6;
  /* Фирменный малиновый снят пипеткой с логотипа 2011 года — #C82867.
     На заливках он даёт 5.3 контраста с белым текстом, а вот в роли текста
     на светлом фоне не дотягивает до нормы (4.22 при нужных 4.5), поэтому
     для ссылок берём тот же тон на пару шагов темнее. */
  --red:#C82867;          /* малиновый с логотипа — заливки, линии, акценты */
  --red-text:#B02255;     /* он же для текста ссылок: контраст 5.21 */
  --red-dim:#9E1E4C;      /* наведение */
  --brass:#8A6E36;        /* бронза люстр */
  --board:#FBFAF8;        /* поле табло: светлое, как станционный указатель */
  --board-line:#DCD7CE;
  --measure:66ch;
  --display:"Oswald",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font:400 18px/1.66 var(--body);
  font-variant-numeric:oldstyle-nums;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ─── шапка ─────────────────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top__in{max-width:1140px;margin:0 auto;padding:0 22px;display:flex;align-items:stretch;
  gap:26px;min-height:62px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.mark__m{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--red);
  color:#fff;display:grid;place-items:center;font-size:16px;line-height:1}
.menu{display:flex;align-items:stretch;gap:2px;margin-left:auto;flex-wrap:wrap}
.menu a{display:flex;align-items:center;padding:0 13px;text-decoration:none;color:var(--ink-soft);
  font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;border-bottom:3px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a[aria-current=page]{border-bottom-color:var(--red);color:var(--ink)}
.lang{align-self:center;margin-left:10px;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.08em;text-decoration:none;color:var(--red);
  border:1px solid var(--line);padding:5px 10px}

/* ─── табло отправлений: то, ради чего сюда заходят ──────────────────── */
.hero{background:var(--surface);color:var(--ink);border-bottom:4px solid var(--red)}
.hero__in{max-width:1140px;margin:0 auto;padding:52px 22px 46px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:46px;align-items:start}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,5.6vw,66px);
  line-height:.98;letter-spacing:-.005em;text-transform:uppercase;margin:0 0 18px;
  text-wrap:balance}
.hero p{font-size:19px;line-height:1.6;color:var(--muted);margin:0 0 22px;max-width:46ch}
.hero__note{font-family:var(--display);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red-text);margin:0 0 14px;font-weight:500}

.board{border:1px solid var(--line);background:var(--stone)}
.board__hd{display:grid;grid-template-columns:88px 1fr auto;gap:14px;padding:9px 16px;
  border-bottom:1px solid var(--board-line);font-family:var(--display);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#6E7178}
.row{display:grid;grid-template-columns:88px 1fr auto;gap:14px;padding:13px 16px;
  align-items:baseline;border-bottom:1px solid var(--board-line);text-decoration:none;color:inherit}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface)}
.row__t{font-family:var(--display);font-weight:500;font-size:23px;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.row__n{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink)}
.row__n small{display:block;font-family:var(--body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-top:2px}
.row__p{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.05em;
  color:var(--brass);white-space:nowrap}
.row__p.free{color:#6FBF8E}

/* Табло «набирается» построчно один раз при загрузке — как настоящее.
   Единственная анимация на сайте, поэтому она и запоминается. */
@media (prefers-reduced-motion:no-preference){
  .row{animation:flip .34s ease-out backwards}
  .row:nth-child(2){animation-delay:.05s}
  .row:nth-child(3){animation-delay:.10s}
  .row:nth-child(4){animation-delay:.15s}
  .row:nth-child(5){animation-delay:.20s}
  .row:nth-child(6){animation-delay:.25s}
  @keyframes flip{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ─── общий каркас ──────────────────────────────────────────────────── */
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.band{padding:56px 0}
.band--soft{background:var(--surface);border-block:1px solid var(--line)}
.band h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);
  text-transform:uppercase;letter-spacing:.01em;margin:0 0 8px;line-height:1.06}
.band__lead{color:var(--muted);font-size:17px;margin:0 0 30px;max-width:56ch}

/* ─── карточки экскурсий ────────────────────────────────────────────── */
.tours{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px}
.tour{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line)}
.tour:hover{border-color:var(--red)}
.tour__img{aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.tour__img img{width:100%;height:100%;object-fit:cover}
.tour__b{padding:15px 17px 19px;display:flex;flex-direction:column;gap:7px;flex:1}
.tour__n{font-family:var(--display);font-weight:500;font-size:19px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.14}
.tour__d{font-size:15px;color:var(--muted);line-height:1.5;flex:1}
.tour__m{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass)}

/* ─── как это работает: настоящая последовательность, потому и нумеровано ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;
  counter-reset:s}
.step{counter-increment:s;position:relative;padding-top:16px;border-top:3px solid var(--red)}
.step::before{content:counter(s);position:absolute;top:-4px;right:0;font-family:var(--display);
  font-weight:600;font-size:40px;line-height:1;color:var(--line)}
.step h3{font-family:var(--display);font-weight:500;font-size:17px;text-transform:uppercase;
  letter-spacing:.03em;margin:0 0 6px}
.step p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.55}

/* ─── страница-статья ───────────────────────────────────────────────── */
.article{max-width:var(--measure);margin:0 auto;padding:34px 22px 60px}
.article h1{font-family:var(--display);font-weight:600;font-size:clamp(29px,4.4vw,44px);
  line-height:1.04;text-transform:uppercase;letter-spacing:-.005em;margin:0 0 20px;
  text-wrap:balance}
.article h2{font-family:var(--display);font-weight:500;font-size:25px;text-transform:uppercase;
  letter-spacing:.02em;margin:38px 0 10px;line-height:1.12}
.article h3{font-family:var(--display);font-weight:500;font-size:19px;text-transform:uppercase;
  letter-spacing:.03em;margin:28px 0 8px}
.article p{margin:0 0 17px}
.article ul,.article ol{margin:0 0 17px;padding-left:24px}
.article li{margin:0 0 7px}
.article img{margin:26px 0;border:1px solid var(--line)}
.article table{border-collapse:collapse;width:100%;font-size:16px;margin:0 0 22px;
  font-family:var(--body)}
.article td,.article th{border:1px solid var(--line);padding:9px 11px;text-align:left}
.article tr:first-child td{font-family:var(--display);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.article a{text-underline-offset:3px}
.crumbs{font-family:var(--display);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--red-text)}
.masthead{background:var(--surface);color:var(--ink);border-bottom:4px solid var(--red)}
.masthead__in{max-width:var(--measure);margin:0 auto;padding:34px 22px 30px}
.masthead h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,44px);
  line-height:1.04;text-transform:uppercase;margin:0;text-wrap:balance}
.masthead .crumbs{color:var(--muted);margin-bottom:12px}
.masthead .crumbs a{color:var(--muted)}
.masthead .crumbs a:hover{color:var(--red-text)}
.masthead__img{max-width:1140px;margin:0 auto;padding:0 22px}
.masthead__img img{width:100%;max-height:300px;object-fit:cover}

/* ─── запись на экскурсию ───────────────────────────────────────────── */
.book{border:1px solid var(--line);border-left:4px solid var(--red);background:var(--surface);
  padding:22px 24px;margin:38px 0 0}
.book h2{font-family:var(--display);font-weight:500;font-size:21px;text-transform:uppercase;
  letter-spacing:.03em;margin:0 0 7px}
.book p{color:var(--muted);font-size:16px;margin:0 0 16px}
.btn{display:inline-block;font-family:var(--display);font-weight:500;font-size:15px;
  letter-spacing:.07em;text-transform:uppercase;background:var(--red);color:#fff;
  text-decoration:none;padding:12px 22px}
.btn:hover{background:var(--red-dim)}

/* ─── подвал ────────────────────────────────────────────────────────── */
.foot{background:var(--surface);color:var(--muted);border-top:1px solid var(--line);margin-top:56px}
.foot__in{max-width:1140px;margin:0 auto;padding:34px 22px;display:flex;gap:30px;
  flex-wrap:wrap;font-size:15px}
.foot a{color:var(--ink-soft)}
.foot__c{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:30px;padding-top:38px}
}
@media (max-width:620px){
  body{font-size:17px}
  .top__in{flex-wrap:wrap;gap:8px;padding-block:10px}
  .menu{margin-left:0;order:3;width:100%}
  .menu a{padding:6px 11px 5px;border-bottom-width:2px}
  .lang{margin-left:auto;order:2}
  .row,.board__hd{grid-template-columns:70px 1fr;gap:10px}
  .row__p{grid-column:2;margin-top:3px}
  .board__hd span:last-child{display:none}
}

/* Полный список разделов в подвале — он держит внутреннюю перелинковку,
   как держала боковая колонка на старом сайте. */
.foot__links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:6px 26px;width:100%;margin-top:6px}
.foot__links a{font-size:14.5px;text-decoration:none;color:var(--muted)}
.foot__links a:hover{color:var(--ink);text-decoration:underline}

/* ─── страница тура: текст слева, факты справа ───────────────────────
   Раньше всё шло одним столбцом, и цена с временем тонули в тексте.
   Теперь они вынесены в панель, которая едет вместе со страницей. */
.layout{max-width:1140px;margin:0 auto;padding:34px 22px 60px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:46px;align-items:start}
.layout .article{max-width:none;margin:0;padding:0}
.aside{position:sticky;top:22px;display:flex;flex-direction:column;gap:18px}
.facts{border:1px solid var(--line);background:var(--surface)}
.facts__h{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:9px 16px}
.facts dl{margin:0;padding:6px 16px 14px}
.facts dt{font-family:var(--display);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:11px}
.facts dd{margin:2px 0 0;font-size:16.5px;line-height:1.4}
.facts dd.big{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:.01em}
.aside .btn{display:block;text-align:center}

/* ─── галерея: остальные снимки страницы, а не вперемешку с текстом ── */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
  margin:32px 0 0}
.photos a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stone);
  border:1px solid var(--line)}
.photos img{width:100%;height:100%;object-fit:cover;margin:0}
.photos a:hover img{opacity:.86}

/* Первый абзац крупнее — вход в текст, а не сплошная стена. */
.article > p:first-of-type{font-size:20.5px;line-height:1.55;color:var(--ink)}

/* Внутри текста картинки идут вразрядку и не липнут к абзацам. */
.article img{margin:30px auto;border:1px solid var(--line)}

@media (max-width:940px){
  .layout{grid-template-columns:1fr;gap:30px}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .facts{flex:1;min-width:250px}
}

/* Логотип со старого сайта — он же был на всех визитках и в каталогах. */
.mark__logo{height:34px;width:auto}

/* «О нас писали» — логотипы изданий со старого сайта. Доказательство, а не
   украшение: эти издания действительно про компанию писали. */
.press{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.press img{height:36px;width:auto;opacity:.62;filter:grayscale(1)}
.press img:hover{opacity:1;filter:none}

/* Галерея старого сайта: список ссылок, картинки к которым подставлял скрипт.
   Скрипта больше нет, поэтому показываем её обычным списком подписей. */
ul.gallery{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 22px;padding:0;margin:22px 0}
ul.gallery li{margin:0;padding-left:14px;border-left:2px solid var(--red);font-size:16px}
ul.gallery .galleryCopyrights{display:none}
ul.gallery .galleryText p{margin:2px 0 0;font-size:14.5px;color:var(--muted)}
ul.gallery.invisible{visibility:visible}

/* ─── три колонки, как было на старом сайте ─────────────────────────────
   Слева полный список экскурсий, в центре текст, справа факты и запись.
   Так человек всегда видит, куда ещё можно сходить, и не ищет это в меню. */
.layout3{max-width:1320px;margin:0 auto;padding:30px 22px 60px;
  display:grid;grid-template-columns:236px minmax(0,1fr) 290px;gap:38px;align-items:start}
.layout3 .article{max-width:none;margin:0;padding:0}
.side{position:sticky;top:20px;font-family:var(--display)}
.side__box{border-top:2px solid var(--red);padding:10px 0 14px;margin-bottom:14px}
.side__h{display:block;font-weight:600;font-size:13.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:7px;text-decoration:none}
a.side__h:hover{color:var(--red-text)}
.side__l{display:block;font-family:var(--body);font-size:15px;line-height:1.35;
  padding:4px 0 4px 11px;border-left:2px solid transparent;color:var(--ink-soft);
  text-decoration:none}
.side__l:hover{color:var(--red-text)}
.side__l[aria-current=page]{border-left-color:var(--red);color:var(--ink);font-weight:600}

@media (max-width:1180px){
  .layout3{grid-template-columns:minmax(0,1fr) 280px;gap:32px}
  .side{grid-column:1/-1;position:static;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 26px}
}
@media (max-width:820px){
  .layout3{grid-template-columns:1fr;gap:26px}
}

/* ─── контакты: номер один, способов связи три ───────────────────────── */
.contact__b{padding:14px 16px 16px}
.contact__ph{display:block;font-family:var(--display);font-weight:600;font-size:25px;
  letter-spacing:.01em;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.contact__ph:hover{color:var(--red-text)}
.contact__n{margin:4px 0 12px;font-size:13.5px;color:var(--muted);line-height:1.4}
.contact__m{display:block;font-family:var(--display);font-weight:500;font-size:14px;
  letter-spacing:.04em;text-decoration:none;padding:9px 12px;margin-bottom:7px;
  border:1px solid var(--line);color:var(--ink)}
.contact__m:hover{border-color:var(--red);color:var(--red-text)}
.contact__m.wa::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#25D366;margin-right:9px;vertical-align:1px}
.contact__m.tg::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#2AABEE;margin-right:9px;vertical-align:1px}
.contact__mail{display:block;font-size:14.5px;margin-top:10px;word-break:break-all}
.hero .contact{margin-top:26px;max-width:330px;border:1px solid var(--line);background:var(--surface)}

/* ─── форма заявки ───────────────────────────────────────────────────── */
.bookform{padding:12px 16px 14px;display:flex;flex-direction:column;gap:7px}
.bookform label{font-family:var(--display);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:-4px}
.bookform input,.bookform select,.bookform textarea{font:inherit;font-size:15px;
  padding:8px 10px;border:1px solid var(--line);background:var(--stone);color:var(--ink);
  border-radius:0;width:100%}
.bookform textarea{min-height:52px;resize:vertical}
.bookform input:focus,.bookform select:focus,.bookform textarea:focus{
  outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.bookform .field-bad{border-color:#B3261E;background:#FBEEEC}
.bookform .row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bookform button{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.07em;
  text-transform:uppercase;background:var(--red);color:#fff;border:none;padding:13px;
  cursor:pointer;margin-top:3px}
.bookform button:hover{background:var(--red-dim)}
.bookform button[disabled]{opacity:.6;cursor:default}
.bookform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bf-note{font-size:13px;color:var(--muted);line-height:1.45;margin:0}
.bf-status{font-size:14px;line-height:1.45;margin:0;padding:9px 11px;display:none}
.bf-status.on{display:block}
.bf-status.ok{background:#E4F2E8;color:#1B6B3A;border-left:3px solid #1B6B3A}
.bf-status.err{background:#FBEEEC;color:#8E2018;border-left:3px solid #B3261E}

/* ═══ мобильная версия ═══════════════════════════════════════════════════
   Три беды узкого экрана и что с ними сделано:
   1. меню из шести пунктов занимало 137 px и переносилось на две строки —
      прячем за кнопку;
   2. список всех экскурсий (28 ссылок, 999 px) стоял между шапкой и текстом,
      и до статьи приходилось скроллить два экрана — схлопываем и уводим вниз;
   3. форма заявки оказывалась в самом низу — поднимаем сразу под текст. */

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  width:42px;height:38px;padding:0 9px;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:4px}
.burger span{display:block;width:22px;height:2px;background:var(--ink)}

.side__sum{display:none}
.side__in{display:contents}

@media (max-width:820px){
  .burger{display:flex}
  .menu{display:none;order:4;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
  .menu.open{display:flex}
  .menu a{padding:12px 2px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
  .menu a[aria-current=page]{border-bottom-color:var(--line);border-left-color:var(--red)}
  .top__in{flex-wrap:wrap;align-items:center;gap:10px;padding-block:10px;min-height:0}
  .lang{margin-left:0;order:3}

  /* Порядок на телефоне: текст → запись → всё остальное. */
  .layout3{display:flex;flex-direction:column;gap:22px;padding-top:22px}
  .layout3 .article{order:1}
  .layout3 .aside{order:2;position:static;flex-direction:column}
  .layout3 .side{order:3}

  /* Список экскурсий — сворачиваемый, чтобы не занимать экран. */
  details.side{border:1px solid var(--line);background:var(--surface);position:static}
  details.side .side__sum{display:block;font-family:var(--display);font-weight:500;
    font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:13px 16px;
    cursor:pointer;list-style:none}
  details.side .side__sum::-webkit-details-marker{display:none}
  details.side .side__sum::after{content:"+";float:right;font-size:17px;line-height:1}
  details.side[open] .side__sum::after{content:"–"}
  details.side .side__in{display:block;padding:0 16px 12px}
  details.side .side__box{border-top:1px solid var(--line);border-top-color:var(--line)}

  /* Крупнее шрифт и просторнее нажатия. */
  body{font-size:17.5px}
  .article p,.article li{font-size:17.5px}
  .side__l{padding:9px 0 9px 11px;font-size:16px}
  .foot__links a{padding:5px 0;display:inline-block}
  .row{padding:15px 14px}
  .bookform input,.bookform select,.bookform textarea{font-size:16px;padding:11px 10px}
  .bookform button{padding:15px}
  .contact__m{padding:12px}
  .hero__in{padding-top:28px;padding-bottom:32px}
  .hero .contact{max-width:none}
  .masthead__in{padding-top:24px}
  .masthead__img img{max-height:230px}
  .band{padding:38px 0}
}

/* Совсем узкие экраны: таблицы старых страниц не должны рвать вёрстку. */
@media (max-width:520px){
  .article table{display:block;overflow-x:auto;white-space:nowrap;font-size:14.5px}
  .row2{grid-template-columns:1fr}
  h1,.masthead h1{font-size:29px}
}

/* ─── правая колонка: не приклеиваем то, что выше экрана ─────────────────
   Панель с формой, фактами и контактами выходит за 1300 px, а экран
   ноутбука — 900. Приклеенная, она прятала кнопку отправки до самого низа
   страницы. Форму подняли наверх колонки, а само приклеивание включаем
   только когда содержимое заведомо помещается. */
.aside{position:static}
@media (min-height:1500px) and (min-width:1181px){
  .aside{position:sticky;top:22px}
}

/* ─── закреплённая полоса действий на телефоне ──────────────────────────
   Кнопка записи не должна теряться в длинной странице: держим её на виду
   всегда. На широких экранах она не нужна — там форма и так справа. */
.dock{display:none}
@media (max-width:820px){
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:1px;
    background:var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.13)}
  .dock__b{flex:1;text-align:center;padding:15px 10px;text-decoration:none;
    background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:500;
    font-size:15px;letter-spacing:.06em;text-transform:uppercase}
  .dock__b--main{background:var(--red);color:#fff;flex:1.4}
  .dock__b:active{opacity:.85}
  /* чтобы полоса не накрывала подвал и последние строки текста */
  body{padding-bottom:58px}
  .foot{margin-bottom:0}
}