/* ============================================================
   SMELOST.CSS — переиспользуемые компоненты дизайн-системы "Смелость".
   Подключается вместе с tokens.css (там уже есть .grain и .tilt-* из
   присланной texture.css — здесь их заново НЕ объявляем).
   Состав (ТЗ-редизайн-главной.md, разделы 2.2 и 13.2):
   1-4 · присланный tokens/recipes.css + система стикеров (идея из
         assets/css/site.css) + кнопки + анимации vf-pop/vf-drop/marquee,
         которых готовыми в присланных файлах не было;
   5   · ОБВЯЗКА САЙТА — база документа, шапка, бегущая строка, FAQ, зеленый
         CTA и футер: то, что одинаково на каждой странице. Разметку страницы
         держат свою (шаблонизатора нет), а стили берут отсюда — поэтому правка
         шапки автоматически доезжает и до главной, и до циклов.
   ============================================================ */

/* ============================================================
   1 · ГОТОВЫЕ РЕЦЕПТЫ (tokens/recipes.css, дословно)
   ============================================================ */

/* ============================================================
   СМЕЛОСТЬ — RECIPE UTILITIES
   Executable techniques from docs/recipes.md (46 client references).
   The recipe book said WHAT to do; this file is HOW — drop-in classes
   so the moves are reproducible, not redrawn by hand each time.
   Pairs with texture.css (grain · candy gradient · tilt).
   ============================================================ */

/* ============================================================
   1 · БАБЛЫ И ПЛАШКИ  (recipes §1)
   ============================================================ */

/* Full-pill capsule — radius = half height, solid fill, on a contrasty
   field. The brand's default chip/tag shape. Set bg + color yourself. */
.capsule {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1.1em;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  line-height: 1.12;
}

/* Tilted plate — a rounded rectangle that never sits straight. Combine
   with .tilt-sm/.tilt-md (texture.css) and a contrasty text color. */
.plate {
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--sh-2);
}

/* Hand-cut bubble — a slightly irregular, NON-perfect rounded edge
   (alternating border-radius), optionally with a little tail. */
.bubble {
  border-radius: 46% 54% 58% 42% / 56% 44% 56% 44%;
}
.bubble--tail { position: relative; }
.bubble--tail::after {
  content: "";
  position: absolute; left: 26px; bottom: -12px;
  width: 22px; height: 22px;
  background: inherit;
  border-radius: 0 0 0 60%;
  transform: rotate(8deg);
}

/* Stack of overlapping capsules — each child its own color, overlapping
   on Y and alternately tilted, for movement + a hand-made feel.
   <div class="cap-stack"><span class="capsule" style="background:…">…</span>…</div> */
.cap-stack { display: flex; flex-direction: column; align-items: flex-start; }
.cap-stack > * { position: relative; box-shadow: var(--sh-2); }
.cap-stack > * + * { margin-top: -14px; }
.cap-stack > *:nth-child(odd)  { transform: rotate(-3deg); }
.cap-stack > *:nth-child(even) { transform: rotate(4deg); align-self: flex-end; }

/* ============================================================
   2 · ТИПОГРАФИКА — контраст и микс  (recipes §2)
   ============================================================ */

/* Mixed-font headline: keep the base display, swap a word to the hand or
   the narrow accent face. <h2 class="headline-mix">Быть <span class="hand">смело</span></h2> */
.headline-mix {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.headline-mix .hand   { font-family: var(--font-hand); font-weight: var(--fw-bold); }
.headline-mix .accent { font-family: var(--font-display-accent); font-weight: 400; }

/* Colored part of a word — paint a few letters bright, rest stays ink. */
.word-pop { color: var(--brand-accent); }

/* Wild size contrast (3×+): a small whisper next to a BIG shout. */
.shout   { font-size: clamp(48px, 9vw, 120px); line-height: .9; font-weight: var(--fw-ultra); }
.whisper { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* ============================================================
   3 · КРУПНЫЕ ФОРМЫ ЗА ТЕКСТОМ + СЛОИ  (recipes §3, §5)
   ============================================================ */

/* Put .deco-host on a positioned container, drop one or more .deco-blob
   inside (sized big, bled off-edge), then wrap content in .layer so it
   sits above. Depth via overlap, not shadow. */
.deco-host { position: relative; isolation: isolate; }
.deco-blob {
  position: absolute;
  z-index: 0;
  border-radius: var(--r-blob);
  pointer-events: none;
}
.deco-blob--2 { border-radius: var(--r-blob-2); }
.deco-blob--3 { border-radius: var(--r-blob-3); }
.deco-blob--soft { opacity: .7; }            /* translucent overlap 60–80% */
.layer { position: relative; z-index: 1; }

/* Overlapping illustration layers — pull a layer up over its neighbour. */
.overlap-up { margin-top: -6%; }
.overlap-lg { margin-top: -12%; }

/* ============================================================
   4 · КОМПОЗИЦИЯ — выход за край, поворот  (recipes §5)
   ============================================================ */

/* Bleed past the container gutter — don't fear the crop. */
.bleed-l { margin-left:  calc(-1 * var(--gutter)); }
.bleed-r { margin-right: calc(-1 * var(--gutter)); }
.bleed-x { margin-inline: calc(-1 * var(--gutter)); }
.bleed-t { margin-top:    calc(-1 * var(--gutter)); }

/* Loose, "accidental" rotation for a single hero element (15–25°). */
.rot-loose  { transform: rotate(16deg); }
.rot-loose- { transform: rotate(-16deg); }

/* ============================================================
   5 · МИНИ-ПАТТЕРНЫ И ЦВЕТОВЫЕ ПОЛОСЫ  (recipes §6)
   Neutral/tonal by default — set your own color via the listed vars.
   ============================================================ */

.pat-dots {
  background-image: radial-gradient(var(--pat-color, var(--c-ink-12)) 1.6px, transparent 1.8px);
  background-size: var(--pat-size, 22px) var(--pat-size, 22px);
}
.pat-grid {
  background-image:
    linear-gradient(var(--pat-color, var(--c-ink-12)) 1px, transparent 1px),
    linear-gradient(90deg, var(--pat-color, var(--c-ink-12)) 1px, transparent 1px);
  background-size: var(--pat-size, 28px) var(--pat-size, 28px);
}
.pat-stripe {
  background-image: repeating-linear-gradient(45deg,
    var(--pat-color, var(--c-ink-12)) 0 8px, transparent 8px 18px);
}
.pat-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18'%3E%3Cpath d='M0 9 q 12 -9 24 0 t 24 0' fill='none' stroke='%23211C2E' stroke-opacity='0.12' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 48px 18px;
}

/* Hard-edged color bands that split a surface — set --band-a/-b/(-c). */
.band-v2 { background: linear-gradient(90deg,
  var(--band-a, var(--c-lime)) 0 50%, var(--band-b, var(--c-paper)) 50% 100%); }
.band-h2 { background: linear-gradient(180deg,
  var(--band-a, var(--c-lime)) 0 50%, var(--band-b, var(--c-paper)) 50% 100%); }
.band-v3 { background: linear-gradient(90deg,
  var(--band-a, var(--c-pink)) 0 33.34%,
  var(--band-b, var(--c-yellow)) 33.34% 66.67%,
  var(--band-c, var(--c-lime)) 66.67% 100%); }

/* ============================================================
   6 · ХОВЕР «УЛЕЧЬСЯ РОВНО»  — a lively settle on interaction.
   Put .settle on a tilted element; it straightens + lifts on hover.
   ============================================================ */
.settle { transition: transform var(--dur-fast, .17s) var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)); }
.settle:hover { transform: rotate(0deg) translateY(-3px); }

/* ============================================================
   2 · СТИКЕРЫ (идея из assets/css/site.css, тот же принцип на новых
   токенах). Базовый класс задает позиционирование и покачивание,
   конкретное место/размер/поворот каждого стикера — модификатор вида
   .vf-stkr--hero-twinkle в файле своей страницы (home.css, cycles-v2.css;
   ТЗ, раздел 3).
   Анимация покачивания переиспользует sm-float из tokens.css —
   отдельный keyframe здесь не заводим, чтобы не дублировать.
   ============================================================ */
.stkr {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  rotate: var(--stkr-r, 0deg);
  animation: sm-float var(--dur-amble) var(--ease-in-out) infinite;
  filter: drop-shadow(0 8px 18px var(--c-ink-12));
}
.stkr--delay-1 { animation-delay: -1.1s; }
.stkr--delay-2 { animation-delay: -2.2s; }

/* ============================================================
   3 · КНОПКИ — капсула с "нажимной" цветной тенью (--sh-pop-*
   из tokens.css уже сделаны именно под этот прием).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em 1.6em;
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--line);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-bounce);
}
.btn:active { transform: translateY(3px); box-shadow: none !important; }

/* Крупная кнопка — для главных призывов (хиро, финальный CTA). Размер по
   умолчанию совпадает с "md" дизайн-системы, этот модификатор дает "lg". */
.btn--lg { padding: 17px 32px; font-size: var(--fs-lg); }

.btn--purple { background: var(--c-purple); color: var(--on-purple); box-shadow: var(--sh-pop-purple); }
.btn--pink   { background: var(--c-pink);   color: var(--on-pink);   box-shadow: var(--sh-pop-pink); }
.btn--lime   { background: var(--c-lime);   color: var(--on-lime);   box-shadow: var(--sh-pop-lime); }
.btn--blue   { background: var(--c-blue);   color: var(--on-blue);   box-shadow: var(--sh-pop-blue); }
.btn--white  { background: var(--c-white);  color: var(--text-strong); box-shadow: var(--sh-2); }

/* ============================================================
   4 · АНИМАЦИИ ПОЯВЛЕНИЯ (vf-pop / vf-drop / бегущая строка) —
   готового кода не было ни в одном из присланных файлов, написаны
   по точным тайминагам из README дизайнера.
   ============================================================ */

/* Всплытие: FAQ-ответ, ответ под картой возражений, "третий путь" и т.п. */
@keyframes vf-pop {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vf-pop-in { animation: vf-pop .35s var(--ease-out) both; }

/* Падение с поворотом: блобы интенсивности. Раскладку stagger (70ms
   на элемент) задает :nth-child в home.css, тут только сам keyframe. */
@keyframes vf-drop {
  from { opacity: 0; transform: translateY(-40px) rotate(-12deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.vf-drop-in { animation: vf-drop .55s var(--ease-bounce) both; }

/* Бегущая строка: трек с задублированным текстом уезжает на 50% своей
   ширины — на бесшовный повтор достаточно текста x2 в разметке. */
@keyframes vf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.vf-marquee-track { animation: vf-marquee 26s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .stkr, .vf-pop-in, .vf-drop-in, .vf-marquee-track {
    animation: none !important;
  }
}

/* ============================================================
   5 · ОБВЯЗКА САЙТА — то, что одинаково на каждой странице:
   база документа, шапка, бегущая строка, FAQ, зеленый CTA, футер.
   Живет здесь, а не в home.css, чтобы страницы не разъезжались:
   правка шапки автоматически доезжает до всех (ТЗ, раздел 13.2).
   Разметку каждая страница держит свою — шаблонизатора на сайте нет.
   ============================================================ */

/* ---------- база документа ---------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* без этого фиксированный тост игры (transform уводит его
    за край экрана, когда скрыт) реально дает горизонтальный скролл на мобильных —
    overflow-x:hidden только на body такие position:fixed-элементы не ловит */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  overflow-x: hidden; /* стикеры и повернутые карточки вылезают за край (ТЗ, раздел 8) */
}
main { display: block; }
a { text-decoration: none; }
img { max-width: 100%; }

.vf-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Контейнеры общих секций. Страничные секции объявляют свои контейнеры сами
   (в home.css / cycles-v2.css) — разметка остается семантичной по секциям. */
.vf-header__inner,
.vf-faq__inner,
.vf-cta__inner,
.vf-footer__grid {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.vf-faq__inner { max-width: 880px; }
.vf-cta__inner { max-width: 880px; text-align: center; }

/* ---------- ШАПКА ---------- */
.vf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 241, 230, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--c-ink-12);
}
.vf-header__inner {
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}
.vf-header__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: 20px;
  letter-spacing: -.03em;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.vf-header__mark { color: var(--c-pink); }

.vf-header__nav {
  display: flex;
  gap: 0px;
  align-items: center;
  /* Меню всегда одной строкой: там, где пункты перестают влезать,
     их заменяет бургер (свой брейкпоинт шапки, в конце файла). Видимых
     верхнеуровневых пунктов теперь три: "Для кого", "Форматы и запись"
     и кнопка "Еще", остальное свернуто внутрь нее (см. .vf-more ниже).
     margin-left: auto прижимает нав и то, что после него по DOM
     (переключатель темы), единой группой к правому краю — лого одно
     остается слева, без растянутых через весь хедер расстояний. */
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-left: auto;
}
.vf-navlink {
  font-weight: var(--fw-semi);
  font-size: 15px;
  color: var(--c-ink);
  padding: 12px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .16s ease, transform .16s var(--ease-bounce);
}
.vf-navlink:hover { background: var(--vf-lime); transform: rotate(-2deg); color: var(--c-ink); }
.vf-navlink--accent { font-weight: var(--fw-bold); background: var(--vf-lime); }
.vf-navlink--muted { color: var(--c-ink-70); }

/* ---------- "ЕЩЕ" — свернутая часть меню шапки ----------
   Отдельный компонент по образцу .vf-theme-toggle: живет в шапке, но не
   элемент .vf-header по БЭМ. Раскрытие панели — два независимых пути:
   1) чистый CSS hover/focus-within для устройств с настоящим наведением
      мышью (@media hover:hover and pointer:fine ниже);
   2) JS-тоггл класса is-open по клику/тапу (initMoreMenu в smelost.js) —
      работает всегда, это и есть открытие на тач-экранах, где путь (1)
      в каскаде просто отсутствует и писать отдельный @media(hover:none)
      не нужно. */
.vf-more { position: relative; flex: none; }

.vf-more__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-weight: var(--fw-semi);
  font-size: 15px;
  color: var(--c-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .16s ease, transform .16s var(--ease-bounce);
}
.vf-more__trigger:hover { background: var(--vf-lime); transform: rotate(-2deg); }
.vf-more__trigger--active { font-weight: var(--fw-bold); background: var(--vf-lime); }

.vf-more__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .2s var(--ease-bounce);
}
.vf-more__trigger[aria-expanded="true"] .vf-more__caret { transform: rotate(180deg); }

.vf-more__panel {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 220px;
  padding: 8px;
  overflow: hidden;
  background: var(--c-paper);
  border: 1.5px solid var(--c-ink-12);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s var(--ease-bounce), visibility 0s linear .18s;
}
.vf-more__panel .vf-navlink { display: block; width: 100%; text-align: left; }
.vf-more__panel .vf-navlink:hover { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .vf-more:hover > .vf-more__panel,
  .vf-more:focus-within > .vf-more__panel {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .18s ease, transform .18s var(--ease-bounce), visibility 0s linear;
  }
  .vf-more:hover .vf-more__caret,
  .vf-more:focus-within .vf-more__caret { transform: rotate(180deg); }
}

.vf-more__panel.is-open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .18s ease, transform .18s var(--ease-bounce), visibility 0s linear;
}

.vf-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: none;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  border-radius: var(--r-pill);
  flex: none;
}
.vf-header__burger:hover { background: var(--c-ink-12); }

.vf-theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--c-paper-2);
  border: 1.5px solid var(--c-ink-12);
  border-radius: var(--r-pill);
  padding: 3px;
  flex: none;
  transform: rotate(-1deg);
}
.vf-theme-btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  background: transparent;
  color: var(--c-ink-70);
  transition: background .16s ease, color .16s ease;
}
.vf-theme-btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); }

/* ---------- БЕГУЩАЯ СТРОКА ---------- */
.vf-ticker {
  background: var(--vf-pink-plate);
  color: var(--c-ink);
  overflow: hidden;
  padding: 14px 0;
  border-top: 1.5px solid var(--c-ink-12);
  border-bottom: 1.5px solid var(--c-ink-12);
  transition: var(--vf-theme-transition);
}
.vf-ticker__track { display: flex; gap: 0; width: max-content; white-space: nowrap; }
.vf-ticker__item {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 19px;
  letter-spacing: .01em;
  padding-right: 56px;
}

/* ---------- FAQ ----------
   Отступ секции страницы задают сами (на главной FAQ идет после светлой
   секции, на циклах — вплотную к карточкам циклов). */
.vf-faq { background: var(--bg); padding: 88px 32px 88px; }
.vf-faq__eyebrow { font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
.vf-faq__heading { font-family: var(--font-display); font-weight: var(--fw-ultra); font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 34px; }
.vf-faq-list { display: flex; flex-direction: column; gap: 14px; }
.vf-faq-row { background: var(--c-white); border-radius: 22px; overflow: hidden; box-shadow: var(--sh-1); }
.vf-faq-row:has(.vf-faq-row__q[aria-expanded="true"]) { box-shadow: var(--sh-2); }
.vf-faq-row__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-body);
  color: var(--c-ink);
}
.vf-faq-row__q span:first-child { font-weight: var(--fw-bold); font-size: 17px; line-height: 1.35; }
.vf-faq-row__icon { font-size: 24px; color: var(--c-blue); flex: none; }
.vf-faq-row__a { display: none; padding: 0 24px 22px; }
.vf-faq-row:has(.vf-faq-row__q[aria-expanded="true"]) .vf-faq-row__a { display: block; }
.vf-faq-row__a p { font-size: 15.5px; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* ---------- ЗЕЛЕНЫЙ CTA («напиши мне») ---------- */
.vf-cta { background: var(--c-green); color: var(--c-white); padding: 92px 32px; position: relative; overflow: hidden; }
.vf-cta__eyebrow { font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--vf-lime); }
.vf-cta__heading { font-family: var(--font-display); font-weight: var(--fw-ultra); font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; margin: 14px 0 0; }
.vf-cta__text { font-size: 17px; line-height: 1.65; margin: 20px auto 0; max-width: 52ch; color: rgba(255, 255, 255, .85); }
.vf-cta__btn-wrap { margin-top: 32px; display: flex; justify-content: center; }
.vf-cta__contacts { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.vf-cta__contact-link { color: var(--vf-lime); }

/* ---------- ФУТЕР ---------- */
.vf-footer { background: var(--c-purple); color: #fff; padding: 32px 32px 28px; }
.vf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.vf-footer__brand-name { font-family: var(--font-display); font-weight: var(--fw-ultra); font-size: 24px; }
.vf-footer__mark { color: var(--vf-lime); }
.vf-footer__brand-text { color: var(--c-lilac); font-size: 14.5px; margin-top: 8px; line-height: 1.5; }
.vf-footer__hand { font-family: var(--font-hand); font-size: 24px; color: var(--c-pink-soft); margin-top: 16px; transform: rotate(-2deg); }
.vf-footer__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vf-footer__col-title { font-weight: var(--fw-bold); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-lilac); margin-bottom: 6px; }
.vf-footer__link { color: #fff; font-weight: var(--fw-semi); font-size: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); }
.vf-footer__link:hover { color: var(--c-ink); }
.vf-footer__bottom {
  max-width: 1120px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-lilac);
}

/* ---------- АДАПТИВ ОБВЯЗКИ ----------
   У шапки свой брейкпоинт: логотип + пункты меню + переключатель темы
   перестают влезать в строку заметно раньше, чем вся остальная страница
   переходит на мобильную верстку. С меню, свернутым до "Для кого" +
   "Форматы и запись" + кнопки "Еще", запас по ширине стал заметно больше,
   чем при семи пунктах строкой, поэтому брейкпоинт сдвинут ниже (был 1160px).
   Здесь меню прячется в бургер — на самой странице при этом ничего не
   меняется: сетки и прочая верстка страниц живут по брейкпоинту 768px
   в своих файлах. */
@media (max-width: 1040px) {
  .vf-header__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--c-paper);
    border-bottom: 1.5px solid var(--c-ink-12);
    padding: 8px 16px 16px;
    gap: 4px;
  }
  .vf-header__nav.is-open { display: flex; }
  /* .vf-header__nav в этом диапазоне убран из потока (display:none, а
     .is-open — position:absolute), поэтому его margin-left:auto тут не
     действует — группировку бургера с переключателем темы справа берет
     на себя сам бургер. */
  .vf-header__burger { display: inline-flex; margin-left: auto; }

  /* по вертикали в раскрытой бургер-шторке места достаточно — кнопка
     "Еще" там не нужна, разворачиваем ее панель обратно плоским списком
     на том же месте, где пункты и лежат в разметке (см. shtuki.html и т.п.) */
  .vf-more__trigger { display: none; }
  .vf-more__panel {
    position: static;
    display: flex;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    margin: 0; padding: 0; min-width: 0;
    background: none; border: none; box-shadow: none; overflow: visible;
  }
}

@media (max-width: 768px) {
  /* Логотип + бургер + переключатель темы втроем не помещаются в 360px —
     переносим переключатель на вторую строку шапки, а не даем ему вылезать
     за край невидимым и некликабельным (найдено проверкой блока 6, ТЗ). */
  .vf-header__inner {
    flex-wrap: wrap;
    padding: 10px 16px;
  }
  .vf-theme-toggle { margin-left: auto; }

  .vf-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}