/* ============================================================
   Находка · app.css — ОБЪЕДИНЁННЫЙ общий CSS (31.05.2026)
   Слит из 4 файлов ради устранения render-blocking-запросов
   (PageSpeed: 4 блокирующих CSS → 1). Порядок НЕ менять:
   design-tokens → tokens-extras → footer → topbar.
   Источники-эталоны остаются отдельными файлами в css/ для
   правок; app.css пересобирается из них (см. AGENTS.md).
   ============================================================ */

/* ╔══════════════════════════════════════════════════════════╗
   ║ 1/4 · design-tokens.css                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
/* ============================================================
   Находка · Design Tokens
   Источник: фирменный стиль «Находка» (PDF гайдлайн, 14 стр.).
   Дисциплина: 1 акцентный синий + чёрный + белый + крафтовая
   палитра. Никаких градиентов, золотых акцентов и «премиум»-
   декораций — айдентика лаконичная и промысловая.
   ============================================================ */

:root {
  /* =========================================================
     1. БРЕНДОВЫЕ ЦВЕТА
     ========================================================= */

  /* Основной акцент — пыльно-морской синий из гайдлайна.
     Снят пипеткой с фона стр. 4 и круглой печати-эмблемы.
     Шкала построена сдвигом яркости в HSL (240, 25%). */
  --brand-blue-50:   #EEF4F7;   /* самые светлые подложки */
  --brand-blue-100:  #D7E4EA;   /* hover-фоны, неактивные кнопки */
  --brand-blue-200:  #B9D2DC;
  --brand-blue-300:  #8AB4C4;
  --brand-blue-400:  #6FA1B6;
  --brand-blue-500:  #5191AA;   /* ← основной фирменный */
  --brand-blue-600:  #437A91;
  --brand-blue-700:  #355F71;
  --brand-blue-800:  #284752;
  --brand-blue-900:  #1A2E36;

  /* Алиасы для удобного использования */
  --brand-blue: var(--brand-blue-500);
  --brand-blue-hover: var(--brand-blue-600);
  --brand-blue-active: var(--brand-blue-700);

  /* Чёрный и белый — в айдентике используются чистые,
     не приглушённые. Не подменяем на тёплый off-black. */
  --brand-black: #000000;
  --brand-white: #FFFFFF;

  /* «Крафтовый» нейтрал — для блоков, где хочется тёплой
     бумажной фактуры (как пакеты на стр. 8). Используем
     умеренно, не как основной фон. */
  --brand-kraft-50:  #FAF5EC;
  --brand-kraft-100: #F1E7D2;
  --brand-kraft-200: #E2D2AE;
  --brand-kraft-700: #8C7349;   /* для текста на крафте */

  /* Нейтральная серая шкала — для текста, разделителей,
     состояний disabled. Слегка холодная, чтобы дружила с blue. */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8F9;
  --neutral-100: #ECEEF0;
  --neutral-200: #DCDFE2;
  --neutral-300: #BFC4C9;
  --neutral-400: #8A9097;
  --neutral-500: #5D6B73;
  --neutral-600: #3E4A52;
  --neutral-700: #2A343A;
  --neutral-800: #182428;       /* «морской» тёмный из гайдлайна */
  --neutral-900: #0C1418;       /* почти чёрный для текста */

  /* =========================================================
     2. СЕМАНТИЧЕСКИЕ ЦВЕТА
     ========================================================= */

  /* Поверхности */
  --surface-page:        var(--brand-white);
  --surface-elevated:    var(--brand-white);
  --surface-muted:       var(--brand-blue-50);
  --surface-inverse:     var(--brand-black);
  --surface-brand:       var(--brand-blue-500);
  --surface-kraft:       var(--brand-kraft-50);

  /* Текст */
  --text-primary:        var(--neutral-900);
  --text-secondary:      var(--neutral-500);
  --text-muted:          var(--neutral-400);
  --text-on-dark:        var(--brand-white);
  --text-on-brand:       var(--brand-white);
  --text-accent:         var(--brand-blue-500);

  /* Границы и разделители */
  --border-subtle:       var(--neutral-100);
  --border-default:      var(--neutral-200);
  --border-strong:       var(--neutral-400);
  --border-brand:        var(--brand-blue-500);

  /* Состояния */
  --state-success:       #2F9461;
  --state-warning:       #C8881F;
  --state-danger:        #C0392B;
  --state-info:          var(--brand-blue-500);

  /* Внешние бренды (для иконок мессенджеров) */
  --ext-whatsapp:        #25D366;
  --ext-telegram:        #229ED9;
  --ext-instagram:       #E4405F;
  --ext-vk:              #0077FF;

  /* Декоративные элементы айдентики.
     Эти переменные использовать для SVG-паттернов «сеть»
     и halftone-силуэтов морских животных. */
  --decor-net:           var(--neutral-900);
  --decor-halftone:      var(--neutral-900);
  --decor-net-overlay:   rgba(12, 20, 24, 0.85);
  --decor-paper-shadow:  rgba(140, 115, 73, 0.18);

  /* =========================================================
     3. ТИПОГРАФИКА
     ========================================================= */

  /* Семейства.
     - Display: Oswald — гротеск с тонким трекингом, ближе всего
       к подписям-капителям на визитках/пакетах из гайдлайна.
       Bebas Neue — fallback для широких заголовков.
     - Body: Inter — лучшая читаемость на любых экранах,
       нейтральная и не спорит с скриптом логотипа.
     - Script: ТОЛЬКО как SVG для лого. В CSS оставляем
       алиас для случайных нужд, но к продакшен-тексту
       не применяем — никакой веб-шрифт не повторит
       рукописную каллиграфию точно. */
  --font-display: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-script:  "Caveat", "Brush Script MT", cursive;  /* НЕ для основного текста */

  /* Веса. Body — 400/500/600/700, Display — 300/400/500 (Oswald). */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Базовый размер. На <html> применяется font-size: 100% (16px),
     все размеры — в rem, чтобы пользователь мог масштабировать. */
  --fs-2xs:  0.6875rem;  /* 11 — мелкая подпись на визитке   */
  --fs-xs:   0.75rem;    /* 12 — caption                       */
  --fs-sm:   0.875rem;   /* 14 — вспомогательный текст         */
  --fs-base: 1rem;       /* 16 — body                          */
  --fs-md:   1.125rem;   /* 18 — увеличенный body              */
  --fs-lg:   1.375rem;   /* 22 — лиды, важные параграфы        */
  --fs-xl:   1.75rem;    /* 28 — h4                            */
  --fs-2xl:  2.25rem;    /* 36 — h3                            */
  --fs-3xl:  3rem;       /* 48 — h2                            */
  --fs-4xl:  4rem;       /* 64 — h1                            */
  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5.5rem);

  /* Межстрочные. */
  --lh-tight:    1.05;   /* для display-заголовков              */
  --lh-snug:     1.2;    /* для h3-h4                           */
  --lh-normal:   1.5;    /* для body                            */
  --lh-relaxed:  1.7;    /* для длинных параграфов              */

  /* Трекинг.
     В гайдлайне слоган «МОРЕ.ПИВО.ВИНО» и подписи на визитках
     набраны с заметным letter-spacing — это часть айдентики.
     Применяем ко всем uppercase-блокам. */
  --ls-tight:    -0.01em;  /* для крупных заголовков на display */
  --ls-normal:   0;
  --ls-wide:     0.06em;   /* для caps подзаголовков            */
  --ls-wider:    0.14em;   /* ← слоган и капитель меток         */
  --ls-widest:   0.24em;   /* для очень мелких caps (например,
                              «RAW», «НОВИНКА», «БАНКЕТЫ»)      */

  /* =========================================================
     4. ОТСТУПЫ (8-pt grid)
     ========================================================= */

  --space-0:   0;
  --space-1:   0.25rem;   /* 4   */
  --space-2:   0.5rem;    /* 8   */
  --space-3:   0.75rem;   /* 12  */
  --space-4:   1rem;      /* 16  */
  --space-5:   1.5rem;    /* 24  */
  --space-6:   2rem;      /* 32  */
  --space-7:   3rem;      /* 48  */
  --space-8:   4rem;      /* 64  */
  --space-9:   6rem;      /* 96  */
  --space-10:  8rem;      /* 128 */

  /* Внутренние отступы блоков-секций по брейкпоинтам */
  --section-py-mobile:  var(--space-7);
  --section-py-tablet:  var(--space-8);
  --section-py-desktop: var(--space-9);

  /* =========================================================
     5. РАЗМЕРЫ И КОНТЕЙНЕРЫ
     ========================================================= */

  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1240px;     /* основной макс. для контента   */
  --container-2xl: 1440px;     /* для hero/full-bleed секций    */

  --header-h-mobile:  64px;
  --header-h-desktop: 84px;

  /* =========================================================
     6. РАДИУСЫ
     Минимальные — айдентика лаконичная, не округлая.
     ========================================================= */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;
  --radius-card:  var(--radius-md);
  --radius-input: var(--radius-sm);
  --radius-btn:   var(--radius-sm);

  /* =========================================================
     7. ТЕНИ
     Мягкие, нейтральные. Никаких «парящих» дроп-шадоу.
     ========================================================= */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(12, 20, 24, 0.05);
  --shadow-sm:      0 2px 4px rgba(12, 20, 24, 0.06),
                    0 1px 2px rgba(12, 20, 24, 0.04);
  --shadow-md:      0 4px 12px rgba(12, 20, 24, 0.08),
                    0 2px 4px rgba(12, 20, 24, 0.05);
  --shadow-lg:      0 12px 32px rgba(12, 20, 24, 0.12),
                    0 4px 8px rgba(12, 20, 24, 0.06);
  --shadow-xl:      0 24px 64px rgba(12, 20, 24, 0.18);

  /* Подсветка фокуса — для доступности.
     Использовать на :focus-visible, не на :focus. */
  --shadow-focus:   0 0 0 3px rgba(81, 145, 170, 0.45);

  /* =========================================================
     8. ДВИЖЕНИЕ И ПЕРЕХОДЫ
     ========================================================= */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:       cubic-bezier(0.55, 0, 0.85, 0.4);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* CTA на hover */

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-slower:  640ms;

  /* Готовые комбинации для transition */
  --transition-color:     color var(--dur-fast) var(--ease-out),
                          background-color var(--dur-fast) var(--ease-out),
                          border-color var(--dur-fast) var(--ease-out);
  --transition-transform: transform var(--dur-base) var(--ease-out);
  --transition-opacity:   opacity var(--dur-base) var(--ease-out);

  /* =========================================================
     9. Z-INDEX SCALE
     ========================================================= */
  --z-base:        0;
  --z-raised:      10;
  --z-sticky:      100;     /* sticky-header                 */
  --z-overlay:     500;     /* overlay/dimmer под модалкой   */
  --z-modal:       600;     /* модалки бронирования          */
  --z-dropdown:    700;     /* выпадающие меню               */
  --z-tooltip:     800;     /* подсказки                     */
  --z-fab:         900;     /* плавающая кнопка брони        */
  --z-toast:       1000;    /* системные уведомления         */

  /* =========================================================
     10. БРЕЙКПОИНТЫ
     CSS-переменные не работают в @media, поэтому это
     справочные значения. В @media использовать те же числа.
     ========================================================= */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1240px;
  --bp-2xl: 1440px;

  /* =========================================================
     11. КОМПОНЕНТНЫЕ ТОКЕНЫ
     Адресуют конкретные компоненты, но строятся из базовых.
     При смене базовых — компоненты пересчитаются автоматически.
     ========================================================= */

  /* Кнопки */
  --btn-px:               1.25rem;
  --btn-py:               0.75rem;
  --btn-px-lg:            1.75rem;
  --btn-py-lg:            1rem;
  --btn-font-size:        var(--fs-sm);
  --btn-font-weight:      var(--fw-semibold);
  --btn-letter-spacing:   var(--ls-wider);
  --btn-text-transform:   uppercase;

  --btn-primary-bg:       var(--brand-black);
  --btn-primary-bg-hover: var(--neutral-800);
  --btn-primary-text:     var(--brand-white);

  --btn-accent-bg:        var(--brand-blue-500);
  --btn-accent-bg-hover:  var(--brand-blue-600);
  --btn-accent-text:      var(--brand-white);

  --btn-ghost-bg:         transparent;
  --btn-ghost-text:       var(--text-primary);
  --btn-ghost-border:     var(--border-strong);

  /* Кнопки мессенджеров (для бронирования) */
  --btn-whatsapp-bg:      var(--ext-whatsapp);
  --btn-whatsapp-text:    var(--brand-white);
  --btn-telegram-bg:      var(--ext-telegram);
  --btn-telegram-text:    var(--brand-white);

  /* Поля ввода */
  --input-bg:             var(--brand-white);
  --input-border:         var(--border-default);
  --input-border-focus:   var(--brand-blue-500);
  --input-text:           var(--text-primary);
  --input-placeholder:    var(--text-muted);
  --input-px:             0.875rem;
  --input-py:             0.75rem;

  /* Карточки (блюдо в меню, банкетный пакет, отзыв) */
  --card-bg:              var(--brand-white);
  --card-border:          var(--border-subtle);
  --card-radius:          var(--radius-card);
  --card-padding:         var(--space-5);
  --card-shadow:          var(--shadow-sm);
  --card-shadow-hover:    var(--shadow-md);

  /* Header */
  --header-bg:            rgba(255, 255, 255, 0.96);
  --header-bg-scrolled:   var(--brand-white);
  --header-border:        var(--border-subtle);
  --header-link-color:    var(--text-primary);
  --header-link-hover:    var(--brand-blue-500);

  /* Footer */
  --footer-bg:            var(--neutral-900);
  --footer-text:          var(--neutral-300);
  --footer-link:          var(--brand-white);
  --footer-link-hover:    var(--brand-blue-300);

  /* =========================================================
     12. ДОСТУПНОСТЬ
     ========================================================= */
  /* Минимальная область клика на тачскринах */
  --touch-target-min:     44px;

  /* Контраст текста на фирменном синем (#5191AA):
     - Белый текст: WCAG AA для размеров от 18pt+ (large)
       и 14pt+ bold. НЕ использовать белый на синем
       для body-текста размером < 16px regular.
     - Чёрный текст: WCAG AAA для любых размеров.
     Рекомендация: на синей подложке — заголовки белые,
     body-текст чёрный. */
}

/* ============================================================
   Reduced motion — отключаем декоративные переходы для
   пользователей, попросивших уменьшить движение.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-slower:  0ms;
  }
}

/* ============================================================
   Подключение шрифтов — SELF-HOST (Этап 3, 30.05.2026).
   Шрифты лежат локально в assets/fonts/ и раздаются с того же
   origin, что и сайт. Google Fonts (fonts.googleapis.com) и
   preconnect к gstatic.com УБРАНЫ из всех страниц — минус один
   render-blocking запрос, быстрее first paint, нет зависимости
   от Google CDN (важно в РФ).

   Файлы скачаны разовым скриптом tools/download-fonts.sh.
   Oswald (v57) и Inter (v20) у Google — ВАРИАТИВНЫЕ: один woff2
   на subset покрывает все веса (ось wght), поэтому на семейство
   всего 4 файла (cyrillic, cyrillic-ext, latin, latin-ext) и в
   @font-face задаётся ДИАПАЗОН font-weight, а не один вес.
   greek/vietnamese не качаем — на сайте не используются.

   font-display: swap — текст рисуется системным шрифтом сразу,
   затем подменяется веб-шрифтом (нет «невидимого текста»).
   unicode-range сохранён от Google — браузер качает только тот
   subset, чьи символы реально встречаются (кириллица в РФ).

   Критичные веса (Inter cyrillic + Oswald cyrillic) дополнительно
   <link rel="preload" as="font" crossorigin> в <head> страниц.

   Логотип «Находка» — НЕ подменять веб-шрифтом (отдельный PNG).
   ============================================================ */

/* ---------- Inter (body) — вариативный, веса 400–700 ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/inter-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Oswald (display) — вариативный, веса 300–600 ---------- */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 2/4 · tokens-extras.css (reset + базовый .btn)           ║
   ╚══════════════════════════════════════════════════════════╝ */
/* =========================================================
   TOKENS-EXTRAS v2 — общий reset + базовая типографика + .btn.
   Вынесено из inline-<style> 8 собранных страниц 30.05.2026
   (Этап 5 «Вынос общих стилей», часть A).

   Подключается через <link rel="stylesheet" href="css/tokens-extras.css">
   ПОСЛЕ css/design-tokens.css (использует его переменные) и
   ПОСЛЕ css/footer.css. <link> работает и на file:// (в отличие
   от fetch) — самодостаточность страниц не нарушается.

   Что НЕ здесь (остаётся inline в страницах, т.к. секционное):
   - scoped-кнопки лендинга: .efaq .btn--*, .efinal .btn--primary
     (events.html);
   - .btn--ghost-light / .btn--ghost-dark (gallery.html — поверх
     тёмных подложек);
   - .btn--ghost svg { color } (contacts.html);
   - .btn svg { color } внутри секций (index.html: .loyalty/.reviews/
     .route/.final-cta .btn svg).
   ========================================================= */

/* =========================================================
   СБРОС — единый для всех страниц.
   В превью дублировался в каждой секции и вырезался при сборке.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Страховка от горизонтального скролла на мобилке: длинные
   неразрывные строки (с &nbsp;), декоративные подсветки секций
   за -10..-15% и transform-сдвинутая drawer-панель в сумме могли
   пробивать ширину viewport на узких экранах (iOS Safari).
   overflow-x: clip — современный стандарт без побочных эффектов
   на sticky/position; hidden оставлен fallback'ом для старых
   WebKit. overflow-wrap: break-word рвёт длинные цепочки только
   когда слово реально не влазит — обычные слова не трогает. */
html { overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  /* Большинство страниц на cream-фоне. events.html (лендинг
     банкета) переопределяет на --brand-white inline в своём
     <style> ПОСЛЕ этого файла. */
  background: #F7F4EE;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
img, svg, video, iframe { display: block; max-width: 100%; }

/* Запрет прокрутки body при открытом drawer/лайтбоксе. */
body.is-locked { overflow: hidden; }

/* =========================================================
   КНОПКИ — единый базовый .btn.
   Сведён из inline-копий 6 страниц (index/menu/gallery/contacts/
   loyalty + минимальной events). База включает transform-hover
   (унифицировано 30.05.2026: events ранее был без него).
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--btn-py-lg) var(--btn-px-lg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: var(--transition-color), transform var(--dur-fast) var(--ease-out);
  text-align: center;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Размеры SVG в кнопке задаём явно — без width/height SVG на
   мобиле растягивается до дефолтных 300×150. */
.btn svg { width: 14px; height: 14px; flex: none; stroke-width: 2; }

.btn--primary { background: var(--brand-blue-500); color: var(--brand-white); }
.btn--primary:hover { background: var(--brand-blue-600); color: var(--brand-white); }

/* Ghost на светлой подложке. Hover унифицирован 30.05.2026 к
   белой подложке + синей рамке (index/menu ранее были neutral-50,
   contacts добавлял color:blue-700 — расхождения сведены к одному).
   Тёмные ghost-варианты (gallery) и ghost svg (contacts) остаются
   inline в своих страницах. */
.btn--ghost {
  background: transparent;
  color: var(--neutral-900);
  border-color: var(--neutral-300);
}
.btn--ghost:hover {
  background: var(--brand-white);
  border-color: var(--brand-blue-500);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 3/4 · footer.css (.sfooter*)                             ║
   ╚══════════════════════════════════════════════════════════╝ */
/* =========================================================
   SITE FOOTER v2 — общий стиль подвала (.sfooter*).
   Источник правды: footer-preview-light-v1.html (эталон — privacy.html).
   Вынесено из inline-<style> 8 собранных страниц 29.05.2026.
   Подключается через <link rel="stylesheet" href="css/footer.css">
   ПОСЛЕ css/design-tokens.css (использует его переменные).
   <link> работает и на file:// (в отличие от fetch).
   ========================================================= */
.sfooter {
  background: var(--brand-blue-900);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.sfooter__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-6);
}
.sfooter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .sfooter__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
  }
}
@media (min-width: 1024px) {
  .sfooter__grid {
    grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr;
    gap: var(--space-6);
  }
}
.sfooter__brand-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-4);
}
.sfooter__brand-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}
.sfooter__brand-since {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.sfooter__tagline {
  margin: 0 0 var(--space-5);
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.7);
}
.sfooter__ratings { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.sfooter__rating {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
}
.sfooter__rating-star { color: #FAB005; font-size: 11px; line-height: 1; }
.sfooter__rating-name { color: rgba(255, 255, 255, 0.7); }
.sfooter__rating-value { font-weight: var(--fw-semibold); }
.sfooter__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  background: var(--brand-blue-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-out);
}
.sfooter__cta:hover { background: var(--brand-blue-400); color: #fff; }
.sfooter__col-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sfooter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sfooter__list a, .sfooter__list span {
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur-fast) var(--ease-out);
}
.sfooter__list a:hover { color: #fff; }
.sfooter__list a[aria-current="page"] { color: #fff; }
.sfooter__list-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.sfooter__ext { display: inline-flex; align-items: center; gap: 6px; }
.sfooter__ext::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M9 7h8v8'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M9 7h8v8'/></svg>") center/contain no-repeat;
  opacity: 0.5;
}
.sfooter__ext:hover::after { opacity: 1; }
.sfooter__addr { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sfooter__addr-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.sfooter__addr-item svg { width: 16px; height: 16px; margin-top: 3px; color: rgba(255, 255, 255, 0.45); stroke-width: 1.7; }
.sfooter__addr-text { color: rgba(255, 255, 255, 0.82); line-height: var(--lh-snug); }
.sfooter__addr-text strong { display: block; font-weight: var(--fw-regular); color: #fff; }
.sfooter__addr-text small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); }
.sfooter__addr-link { color: #fff; }
.sfooter__addr-link:hover { color: var(--brand-blue-300); }
.sfooter__socials-title {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.sfooter__socials { display: inline-flex; gap: var(--space-2); }
.sfooter__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.sfooter__social:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.sfooter__social svg { width: 18px; height: 18px; }
.sfooter__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
  .sfooter__bottom { grid-template-columns: 1fr auto; align-items: center; }
}
.sfooter__bottom-left { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); align-items: center; }
.sfooter__bottom-sep { color: rgba(255, 255, 255, 0.25); }
.sfooter__bottom-right { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); align-items: center; }
.sfooter__bottom-right a { color: rgba(255, 255, 255, 0.55); }
.sfooter__bottom-right a:hover { color: #fff; }


/* ╔══════════════════════════════════════════════════════════╗
   ║ 4/4 · topbar.css (.topbar + drawer)                      ║
   ╚══════════════════════════════════════════════════════════╝ */
/* =========================================================
   TOPBAR + DRAWER v2 — общий стиль шапки и мобильного меню.
   Источник эталона — events.html / hero-preview-light-v4.html.
   Вынесено из inline-<style> 8 собранных страниц 30.05.2026
   (Этап 5 «Вынос общих стилей», часть B).

   Подключается через <link rel="stylesheet" href="css/topbar.css">
   ПОСЛЕ css/design-tokens.css, css/tokens-extras.css и css/footer.css.
   <link> работает и на file:// (в отличие от fetch).

   ДВА ВАРИАНТА в одном файле:
   1) База (.topbar) — прозрачная над СВЕТЛЫМ (cream) хедером:
      тёмный текст, цветной лого. Используют index, menu, privacy,
      contacts, loyalty, booking.
   2) Модификатор .topbar--over-dark — прозрачная над ТЁМНЫМ hero:
      белый текст, лого инвертирован в белый (filter), полупрозрачные
      бордеры иконок. Используют events (лендинг) и gallery.
      При .is-scrolled оба варианта сходятся к светлой подложке.

   Унифицировано 30.05.2026: цвет активного пункта сведён к
   --brand-blue-600 (раньше статика 700 / index-menu 600).
   ========================================================= */

/* =========================================================
   TOPBAR — каркас (общий для обоих вариантов)
   ========================================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 0 var(--space-5);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              backdrop-filter var(--dur-fast) var(--ease-out);
}
.topbar.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow:
    0 1px 0 rgba(12, 20, 24, 0.06),
    0 8px 24px -16px rgba(12, 20, 24, 0.18);
}

/* Внутренний контейнер ровняет края шапки с краями контента. */
.topbar__inner {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  height: var(--header-h-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  color: var(--neutral-900);
  transition: height var(--dur-fast) var(--ease-out);
}
.topbar.is-scrolled .topbar__inner {
  height: calc(var(--header-h-desktop) - 12px);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.topbar__brand img {
  height: 32px;
  width: auto;
  display: block;
  transition: height var(--dur-fast) var(--ease-out);
}
.topbar.is-scrolled .topbar__brand img { height: 28px; }

/* ---------- Навигация (десктоп) ---------- */
.topbar__nav {
  display: none;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--neutral-700);
}
@media (min-width: 768px) { .topbar__nav { display: inline-flex; } }
@media (min-width: 1240px) { .topbar__nav { gap: var(--space-5); } }
.topbar__nav a {
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-blue-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.topbar__nav a:hover { color: var(--brand-blue-600); }
.topbar__nav a:hover::after { transform: scaleX(1); }
/* Активный пункт страницы */
.topbar__nav a[aria-current="page"] { color: var(--brand-blue-600); }
.topbar__nav a[aria-current="page"]::after { transform: scaleX(1); }

.topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Телефон в шапке: с иконкой, скрывается ниже 1024px */
.topbar__phone {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--neutral-900);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.topbar__phone:hover { color: var(--brand-blue-600); }
.topbar__phone svg { width: 16px; height: 16px; color: var(--brand-blue-600); }
@media (min-width: 1024px) { .topbar__phone { display: inline-flex; } }

/* Кнопка-иконка телефона — на всех размерах до 1024px. */
.topbar__phone--icon {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--neutral-300);
  border-radius: 50%;
  background: var(--brand-white);
  color: var(--neutral-900);
  transition: var(--transition-color);
}
.topbar__phone--icon svg { width: 18px; height: 18px; }
.topbar__phone--icon:hover {
  background: var(--neutral-50);
  border-color: var(--brand-blue-500);
  color: var(--brand-blue-600);
}
@media (max-width: 1023.98px) {
  .topbar__phone--icon { display: inline-flex; }
}

.topbar__book {
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background: var(--brand-blue-500);
  color: var(--brand-white);
  border-radius: var(--radius-btn);
  transition: background var(--dur-fast) var(--ease-out);
  flex: none;
  white-space: nowrap;
}
.topbar__book:hover { background: var(--brand-blue-600); }

/* ---------- Бургер (мобайл) ---------- */
.topbar__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--neutral-300);
  border-radius: 50%;
  background: var(--brand-white);
  color: var(--neutral-900);
  cursor: pointer;
  padding: 0;
  transition: var(--transition-color);
}
.topbar__burger:hover {
  border-color: var(--brand-blue-500);
  color: var(--brand-blue-600);
}
.topbar__burger svg { width: 20px; height: 20px; }
@media (min-width: 768px) { .topbar__burger { display: none; } }

@media (max-width: 767.98px) {
  .topbar { padding: 0 var(--space-4); }
  .topbar__inner { height: var(--header-h-mobile); }
  .topbar.is-scrolled .topbar__inner { height: calc(var(--header-h-mobile) - 8px); }
  .topbar__brand img { height: 26px; }
  .topbar.is-scrolled .topbar__brand img { height: 24px; }
  /* На мобиле в шапке оставляем только бургер и иконку телефона. */
  .topbar__book { display: none; }
}
@media (max-width: 480px) {
  .topbar__book { padding: 8px 12px; font-size: 11px; }
}

/* =========================================================
   .topbar--over-dark — прозрачная шапка над ТЁМНЫМ hero.
   Только переопределения transparent-состояния (белый текст,
   инверсия лого, полупрозрачные бордеры). При .is-scrolled всё
   возвращается к светлой базе. Эталон — events.html.
   Используют: events.html, gallery.html.
   ========================================================= */
.topbar--over-dark .topbar__inner {
  color: var(--brand-white);
  transition: height var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar--over-dark.is-scrolled .topbar__inner { color: var(--neutral-900); }

/* На тёмном фоне инвертируем цветной wordmark в белый.
   На is-scrolled (белая шапка) фильтр снимается. */
.topbar--over-dark .topbar__brand img {
  filter: brightness(0) invert(1);
  transition: height var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.topbar--over-dark.is-scrolled .topbar__brand img { filter: none; }

.topbar--over-dark .topbar__nav { color: inherit; }
.topbar--over-dark .topbar__nav a { color: inherit; }
.topbar--over-dark .topbar__nav a::after { background: var(--brand-blue-300); }
.topbar--over-dark.is-scrolled .topbar__nav a::after { background: var(--brand-blue-500); }
.topbar--over-dark .topbar__nav a:hover { color: var(--brand-blue-200); }
.topbar--over-dark.is-scrolled .topbar__nav a:hover { color: var(--brand-blue-600); }
.topbar--over-dark .topbar__nav a[aria-current="page"] { color: var(--brand-blue-200); }
.topbar--over-dark.is-scrolled .topbar__nav a[aria-current="page"] { color: var(--brand-blue-600); }

.topbar--over-dark .topbar__phone { color: inherit; }
.topbar--over-dark .topbar__phone:hover { color: var(--brand-blue-300); }
.topbar--over-dark.is-scrolled .topbar__phone:hover { color: var(--brand-blue-600); }
.topbar--over-dark .topbar__phone svg { color: var(--brand-blue-300); }
.topbar--over-dark.is-scrolled .topbar__phone svg { color: var(--brand-blue-600); }

.topbar--over-dark .topbar__phone--icon {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-white);
}
.topbar--over-dark .topbar__phone--icon:hover {
  background: var(--brand-white);
  border-color: var(--brand-white);
  color: var(--brand-blue-700);
}
.topbar--over-dark.is-scrolled .topbar__phone--icon {
  border-color: var(--neutral-300);
  background: var(--brand-white);
  color: var(--neutral-900);
}
.topbar--over-dark.is-scrolled .topbar__phone--icon:hover {
  background: var(--neutral-50);
  border-color: var(--brand-blue-500);
  color: var(--brand-blue-600);
}

.topbar--over-dark .topbar__burger {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-white);
}
.topbar--over-dark .topbar__burger:hover {
  background: var(--brand-white);
  border-color: var(--brand-white);
  color: var(--brand-blue-700);
}
.topbar--over-dark.is-scrolled .topbar__burger {
  border-color: var(--neutral-300);
  background: var(--brand-white);
  color: var(--neutral-900);
}
.topbar--over-dark.is-scrolled .topbar__burger:hover {
  border-color: var(--brand-blue-500);
  color: var(--brand-blue-600);
}

/* =========================================================
   MOBILE DRAWER — общий для обоих вариантов
   (панель всегда белая, поэтому over-dark переопределений нет).
   ========================================================= */
.drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) + 10);
  background: rgba(12, 20, 24, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  background: var(--brand-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: 0 0 64px rgba(12, 20, 24, 0.24);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
}
.drawer__brand img { height: 28px; width: auto; }
.drawer__close {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--neutral-200);
  background: var(--brand-white);
  border-radius: 50%;
  color: var(--neutral-700);
  cursor: pointer;
  padding: 0;
  transition: var(--transition-color);
}
.drawer__close:hover { color: var(--brand-blue-600); border-color: var(--brand-blue-500); }
.drawer__close svg { width: 20px; height: 20px; }

.drawer__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-50);
  transition: color var(--dur-fast) var(--ease-out);
}
.drawer__nav a:hover { color: var(--brand-blue-600); }
.drawer__nav a[aria-current="page"] { color: var(--brand-blue-600); }
.drawer__nav a::after {
  content: "→";
  color: var(--neutral-300);
  font-size: 14px;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drawer__nav a:hover::after {
  transform: translateX(3px);
  color: var(--brand-blue-500);
}

.drawer__foot {
  padding: var(--space-4);
  border-top: 1px solid var(--neutral-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.drawer__phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
}
.drawer__phone-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand-blue-700);
}
.drawer__phone-value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--neutral-900);
  letter-spacing: 0;
}
.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--btn-py-lg) var(--btn-px-lg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background: var(--brand-blue-500);
  color: var(--brand-white);
  border-radius: var(--radius-btn);
  transition: background var(--dur-fast) var(--ease-out);
}
.drawer__cta:hover { background: var(--brand-blue-600); }