/* Страница заведения (med, bar, cafe), подключается после lounge.css.
   Акцент всегда с фолбэком var(--b-accent, var(--b-gold)); мелкий текст акцентом — смесь с кремовым. */

/* ---- токены страницы заведения ----
   Своих величин минимум: ритм, поля и радиусы уже названы в lounge.css,
   второго имени тому же понятию не заводить. */

/* Производные акцента и на потомках: иначе карточка соседа берёт акцент страницы. */
.b-venue, .b-venue * {
  /* мелкий текст акцентом — одна формула на весь файл */
  --b-accent-ink: color-mix(in oklab, var(--b-accent, var(--b-gold)) 72%, var(--text-on-dark));
  /* акцент как тихая заливка/линия */
  --b-accent-veil: color-mix(in oklab, var(--b-accent, var(--b-gold)) 16%, transparent);
  --b-accent-rule: color-mix(in oklab, var(--b-accent, var(--b-gold)) 46%, transparent);
}

/* Курсивное слово в заголовке — акцентом заведения, а не общим мёдом:
   кегль дисплейный, поэтому чистый акцент проходит как крупный текст. */
.b-venue .accent-word { color: var(--b-accent, var(--b-gold)); }


/* ---- 0. служебная полоса над шапкой ----
   Стоит НАД липкой шапкой и уезжает со страницей, поэтому --b-head не
   меняется и якоря не сбиваются. */

.utility {
  border-bottom: 1px solid var(--b-rule);
  background: var(--b-ground-2);
}
.utility__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--s2);
  padding-block: 9px;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--b-ink-3);
}
.utility__item { display: flex; align-items: baseline; gap: var(--s1); }
.utility__item::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--b-accent, var(--b-gold));
  transform: translateY(-.15em);
}
.utility__item a { position: relative; color: var(--b-ink-2); text-decoration: none; border-bottom: 1px solid var(--b-accent-rule, transparent); }
.utility__item a::after { content: ""; position: absolute; inset: -12px -6px; }
.utility__item a:active { color: var(--b-ink); }

.utility__phone { margin-inline-start: auto; }
@media (max-width: 720px) {
  .utility__in { gap: 4px var(--s2); }
  .utility__phone { margin-inline-start: 0; }
}

/* Ниже 860px кнопки в шапке нет: она отнимает строку у навигации,
   а телефон и так стоит в полосе выше и в главной кнопке hero. */
.masthead__cta .btn { padding: 13px 20px; font-size: 13px; border-radius: 10px; }
.masthead__cta .btn-off { display: none; }   /* нет ссылки — нет кнопки в шапке */
@media (max-width: 860px) { .masthead__cta { display: none; } }


/* ---- 1. hero заведения ----
   Разворот 7/5 без скролл-механики: знак, заголовок, ряд бейджей и
   вертикальный кадр справа. */

.venue-hero { position: relative; overflow: clip; }
.venue-hero > .glow { z-index: 0; }
.venue-hero > .honeycomb { z-index: 0; }
.venue-hero__in {
  position: relative; z-index: 1;
  display: grid;
  gap: var(--s2x);
  grid-template-columns: 1fr;
  align-items: end;
  padding-block: clamp(44px, 6vw, 92px) clamp(28px, 3.4vw, 48px);
}
@media (min-width: 900px) {
  .venue-hero__in { grid-template-columns: 7fr 5fr; }
}

.venue-hero__mark { display: flex; align-items: center; min-height: 64px; }
.venue-hero__mark img {
  height: clamp(52px, 6vw, 76px); width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.venue-hero__mark img.is-tall { height: clamp(72px, 8.4vw, 108px); }

.venue-hero__title { margin-top: var(--s2); max-width: 14ch; }
.venue-hero__lead { margin-top: var(--s2); }
.venue-hero__cta { margin-top: var(--s2); }
/* Номер, который наберёт кнопка брони: честная подпись вместо формы. */
.venue-hero__dial { margin-top: var(--s1); }

/* Чипы без подписей: строка из данных читается сама, а подписи к ней
   в данных нет. */
.venue-hero__facts { margin-top: var(--s2); }

.venue-hero__media { position: relative; }
.venue-hero__media .slot { aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .venue-hero__media .slot { aspect-ratio: 16 / 10; }
}

/* Колонтитул под разворотом — тот же приём, что на хабе: подпись стоит ПОД
   кадром, а не плашкой над заголовком. */
.venue-hero__runhead {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  padding-bottom: clamp(28px, 3.6vw, 52px);
  font-family: var(--b-display);
  font-size: var(--fs-note); letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-ink-3);
}
.venue-hero__runhead::after { content: ""; flex: 1 1 60px; height: 1px; background: var(--b-rule); }


/* ---- 2. суть + факты ----------------------------------------------------- */

/* Суть — крупное заявление в три строки (не длиннее трёх).
   Переносы авторские: каждая строка данных — своя строка на экране. */
.venue-lede { max-width: 22ch; }
.venue-lede__line { display: block; }
@media (max-width: 720px) { .venue-lede { max-width: none; } }

/* Бейдж = features[].title + features[].text: линия сверху и две строки. */
.badges {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.badge {
  display: grid; gap: var(--s1); align-content: start;
  /* Не карточка: бейдж ничего не открывает, поэтому держится линией. */
  padding-top: var(--s2);
  border-top: 1px solid var(--b-rule);
}
.badge__key {
  display: flex; align-items: baseline; gap: var(--s1);
  font-family: var(--b-display); font-weight: 600;
  font-size: clamp(17px, .8vw + 14px, 20px); line-height: 1.2; letter-spacing: -.01em;
  color: var(--b-ink);
}
.badge__key::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 1px;
  background: var(--b-accent, var(--b-gold));
  transform: translateY(-.4em);
}
.badge__value { font-size: var(--fs-note); line-height: 1.55; color: var(--b-ink-2); }

/* Чипы услуг. Форма одна на весь сайт: она же работает пилюлями-фильтрами
   меню (.chip--filter ниже) — второй формы для того же понятия нет. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s1); }
.badges + .chips { margin-top: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 8px 14px;
  border: 1px solid var(--b-rule);
  border-radius: 999px;
  background: transparent;
  font: 400 var(--fs-note)/1.4 var(--b-text);
  color: var(--b-ink-2);
}
.chip::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--b-accent, var(--b-gold));
}


/* ---- 3. атмосфера ----
   Лента, стрелки и слоты берутся из lounge.css (.strip / .slot). */

.venue-rail .slot { aspect-ratio: 4 / 5; }

/* ---- 4. меню ----
   Грань, а не тень: карточки держатся тонкой линией и сменой поверхности,
   рассеянная тень остаётся только кнопке. Линию и широкое размытие вместе
   на одном элементе не ставить. */

/* Хайлайты: карточка = слот изображения + название + одна строка + цена Сетка 4→2→1. */
.menu-grid, .menu-highlights {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
@media (min-width: 1100px) { .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dish {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--b-rule);
  border-radius: var(--b-radius);
  background: var(--b-ground-2);
  overflow: hidden;
}
.dish__media { position: relative; }
.dish__media .slot {
  aspect-ratio: 4 / 3;
  border: 0; border-radius: 0;
  padding: 14px;
  background: color-mix(in oklab, var(--b-ground) 60%, var(--b-ground-2));
}
.dish__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s1); padding: clamp(14px, 1.6vw, 20px); }
.dish__group {
  font-family: var(--b-display); font-size: var(--fs-note);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-accent-ink, var(--b-gold));
}
.dish__name {
  font-family: var(--b-display); font-weight: 600;
  font-size: clamp(18px, 1.1vw + 14px, 22px); line-height: 1.18; letter-spacing: -.012em;
  color: var(--b-ink);
}
.dish__note { font-size: var(--fs-note); line-height: 1.5; color: var(--b-ink-3); }
.dish__price {
  margin-top: var(--s1); padding-top: 12px;
  border-top: 1px solid var(--b-rule);
  font-family: var(--b-display); font-weight: 600;
  font-size: var(--fs-lead);
  font-variant-numeric: tabular-nums;
  color: var(--b-accent-ink, var(--b-gold));
}
.dish__price.ph { font-family: var(--b-text); font-size: var(--fs-note); font-weight: 400; }

/* Пилюли-фильтры категорий. Та же .chip, но кнопка. */
.menu-filters { margin-bottom: var(--s2); }
.chip--filter {
  min-height: 44px;
  padding-inline: 16px;
  cursor: pointer;
  transition: color .2s var(--b-ease), border-color .2s var(--b-ease),
              background-color .2s var(--b-ease), transform .16s var(--b-ease);
}

.chip--filter:active { transform: scale(.97); transition-duration: var(--b-press); }
.chip--filter[aria-pressed="true"] {
  color: var(--b-ink);
  border-color: var(--b-accent, var(--b-gold));
  background: var(--b-accent-veil, transparent);
}
.chip--filter[aria-pressed="true"]::before { box-shadow: 0 0 0 4px var(--b-accent-veil, transparent); }
/* Число позиций в пилюле — ориентир до нажатия. */
.chip__n { font-variant-numeric: tabular-nums; color: var(--b-ink-3); }
.chip--filter[aria-pressed="true"] .chip__n { color: var(--b-accent-ink, var(--b-gold)); }
.menu-filters:has(+ .menu-filters__shown) { margin-bottom: var(--s1); }
.menu-filters__shown { margin-bottom: var(--s2); }

/* Раскрытие полного меню: одна складка на категорию. Внутри — строки
   «название · линия · цена», как в печатной карте. */
.menu-full { margin-top: var(--s2x); border-top: 1px solid var(--b-rule); }
.menu-cat { border-bottom: 1px solid var(--b-rule); }
.menu-cat__summary {
  display: flex; align-items: center; gap: var(--s2);
  padding: clamp(18px, 2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--b-ease);
}
.menu-cat__summary::-webkit-details-marker { display: none; }
.menu-cat__summary:active .menu-cat__sign { transform: scale(.9); }

.menu-cat__label {
  flex: 1 1 auto;
  font-family: var(--b-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.012em;
}
.menu-cat__label.ph { font-family: var(--b-text); font-size: var(--fs-lead); font-weight: 400; }
.menu-cat__count {
  font-family: var(--b-display); font-size: var(--fs-note);
  font-variant-numeric: tabular-nums;
  color: var(--b-accent-ink, var(--b-gold));
}
/* Значок складки — рисованный, не глиф: две черты, вторая гаснет на открытой. */
.menu-cat__sign {
  position: relative; flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid var(--b-rule);
  border-radius: 50%;
  transition: transform var(--b-press) var(--b-ease), border-color .2s var(--b-ease);
}
.menu-cat__sign::before, .menu-cat__sign::after {
  content: ""; position: absolute; inset: 50% 7px auto;
  height: 1px; margin-top: -.5px;
  background: var(--b-accent, var(--b-gold));
  transition: transform .3s var(--b-ease), opacity .3s var(--b-ease);
}
.menu-cat__sign::after { transform: rotate(90deg); }
.menu-cat[open] .menu-cat__sign::after { transform: rotate(0); opacity: 0; }

.menu-lines { display: grid; gap: 0; padding-bottom: clamp(14px, 2vw, 24px); }
.menu-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "note note";
  column-gap: var(--s2);
  padding: 14px 0;
  border-top: 1px solid var(--b-rule);
}
.menu-line__name {
  grid-area: name;
  display: flex; align-items: baseline; gap: var(--s1);
  font-size: var(--fs-body); color: var(--b-ink);
}
.menu-line__name::after { content: ""; flex: 1 1 20px; height: 1px; background: var(--b-rule); transform: translateY(-.3em); }
.menu-line__price {
  grid-area: price;
  font-variant-numeric: tabular-nums;
  color: var(--b-accent-ink, var(--b-gold));
}
.menu-line__price.ph { font-size: var(--fs-note); }
.menu-line__note { grid-area: note; margin-top: 4px; }


/* ---- 5. особое ----
   Без .section__head: заголовок живёт внутри разворота. */

.special {
  display: grid;
  gap: var(--s2x);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .special { grid-template-columns: 5fr 7fr; }
  .special__art { order: 1; }
  .special__body { order: 2; }
}
.special__art {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(220px, 28vw, 340px);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;   /* рисунок на свету, без рамки: это не карточка */
}
.special__art > svg { position: relative; z-index: 1; width: min(100%, 320px); height: auto; color: var(--b-accent, var(--b-gold)); }
.special__body { display: grid; gap: var(--s2); justify-items: start; }
.special__title { max-width: 18ch; }
.special__details { max-width: 48ch; }


/* ---- 6. бронь и контакты ----
   Сетка, факты, таблица часов и слот карты — из lounge.css. Здесь только
   строка часов «дни → время», которой на хабе нет. */

.hours-row--day { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.hours-row__days { font-size: var(--fs-body); color: var(--b-ink-2); }
.hours-row__time {
  font-family: var(--b-display); font-weight: 600;
  font-size: var(--fs-h3); letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
  color: var(--b-ink);
  text-align: right;
}
.book__note { max-width: 52ch; }


/* ---- 7. соседние заведения ---------------------------------------------- */

.neighbours { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 760px) { .neighbours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.neighbour {
  position: relative;
  display: grid; gap: var(--s2); align-content: start;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--b-rule);
  border-radius: var(--b-radius);
  background: var(--b-ground-2);
  color: inherit; text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s var(--b-ease), transform .3s var(--b-ease), background-color .3s var(--b-ease);
}
.neighbour > .glow { z-index: 0; opacity: .8; }
.neighbour > * { position: relative; z-index: 1; }

.neighbour:active { transform: scale(.985); transition-duration: var(--b-press); }
.neighbour__mark { display: flex; align-items: center; min-height: 52px; }
.neighbour__mark img { height: 46px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.neighbour__mark img.is-tall { height: 66px; }
.neighbour__name { font-family: var(--b-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.012em; }
.neighbour__kind {
  display: block; margin-top: 3px;
  font-size: var(--fs-note); letter-spacing: .12em; text-transform: uppercase;
  color: var(--b-accent-ink, var(--b-gold));
}
.neighbour__line { color: var(--b-ink-2); max-width: 38ch; }
.neighbour__hours { font-size: var(--fs-note); color: var(--b-ink-3); }
.neighbour__go {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin-top: 4px;
  font-family: var(--b-display); font-size: var(--fs-note);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-ink-3);
  transition: color .2s var(--b-ease);
}
.neighbour__go svg { width: 16px; height: 10px; transition: transform .25s var(--b-ease); }




/* ---- появления: только то, чего нет в lounge.css ----
   Занавес wipe красится var(--b-curtain, var(--b-ground)); блоки этой
   страницы лежат на основном фоне. Для блока с wipe на --b-ground-2 нужно
   переопределить --b-curtain на нём. */


/* ---- печать ----
   Наблюдатель появлений одноразовый: всё, до чего не дошёл скролл, ушло бы
   на бумагу с opacity 0. Состояния снимаются целиком; складки меню
   раскрывает venue.js на beforeprint. */

@media print {
  .utility, .masthead__cta, .strip__arrows, .menu-filters { display: none; }
  .b-venue { background: none; }

  .motion-on [data-reveal],
  .motion-on [data-reveal] > *,
  .motion-on [data-reveal="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .motion-on [data-reveal="wipe"]::after { display: none !important; }
  .motion-on [data-reveal="draw"] .draw-path { stroke-dashoffset: 0 !important; }
  .motion-on [data-reveal="mask-words"] .word > i { transform: none !important; }

  .menu-cat__sign, .neighbour__go svg { display: none; }
  .menu-cat, .badge, .menu-line, .dish, .neighbour { break-inside: avoid; }
}

/* ---- наведение ----
   Только для мыши: на телефоне :hover после касания залипает. */

@media (hover: hover) and (pointer: fine) {
  .utility__item a:hover { color: var(--b-ink); border-bottom-color: currentColor; }
  .chip--filter:hover { color: var(--b-ink); border-color: var(--b-accent-rule, var(--b-rule)); }
  .menu-cat__summary:hover { color: var(--b-ink); }
  .menu-cat__summary:hover .menu-cat__sign { border-color: var(--b-accent-rule, var(--b-rule)); }
  .neighbour:hover {
    border-color: var(--b-accent-rule, var(--b-rule));
    background: color-mix(in oklab, var(--b-ground-2) 82%, var(--text-on-dark));
    transform: translateY(-3px);
  }
  .neighbour:hover .neighbour__go { color: var(--b-ink); }
  .neighbour:hover .neighbour__go svg { transform: translateX(4px); }
}

/* ---- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .neighbour:hover { transform: none; }
}

/* Поиск в полной карте меню. */
.menu-search { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.menu-search__label { font-family: var(--b-display); font-size: var(--fs-h3); }
.menu-search__field { display: flex; gap: var(--s2); }
.menu-search__input {
  min-width: 0; flex: 1; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--b-rule-strong); border-radius: var(--b-radius-sm);
  background: var(--b-ground-2); color: var(--b-ink); font: 400 16px/1.5 var(--b-text);
}
.menu-search__input::placeholder { color: var(--b-ink-3); }
.menu-search__input:focus-visible { border-color: var(--b-gold); }
.menu-search__status { min-height: 1.5em; }
.menu-search + .menu-full { margin-top: var(--s2); }
.menu-cat[hidden], .menu-line[hidden], .menu-highlights[hidden] { display: none; }
@media (max-width: 560px) {
  .menu-search__field { flex-wrap: wrap; gap: var(--s1); }
  .menu-search__input { flex-basis: 100%; }
}
@media print {
  .menu-search { display: none; }
  .menu-highlights[hidden] { display: grid !important; }
  .menu-cat[hidden] { display: block !important; }
  .menu-line[hidden] { display: grid !important; }
}

.menu-source { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-block: var(--s3); }
.menu-source .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }