/* ==========================================================================
   Порто Миконос — дизайн-система.
   Токены — в tokens.css, и это единственное место, где допустимы
   литеральные значения. Здесь их нет: цвет, размер и отступ берутся
   оттуда. Проверяет check_prototype.py по этому файлу.
   ========================================================================== */

/* --- шрифты ---------------------------------------------------------------
   Self-hosted woff2, по одному файлу на начертание. Нарезка —
   scripts/build_fonts.py. Google Fonts не подключаются: запрет 8.

   ⚠️ У Prata одно начертание. font-weight:700 на засечном заголовке даёт
   синтетический жир браузера — весовой контраст делаем размером и цветом.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Prata';
  src:url('/assets/fonts/prata-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
/* Рукописный — REDESIGN-v2 §2. Без preload: файл качается только там,
   где на странице есть текст этим шрифтом, и не спорит с первым экраном
   за LCP. swap — пока файл не пришёл, подпись видна запасным шрифтом. */
@font-face{
  font-family:'Caveat';
  src:url('/assets/fonts/caveat-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* REDESIGN-v2.27 L5: греческий и турецкий. В Prata нет греческого и ş ğ İ, в наших
   подмножествах Manrope и Caveat — турецких букв. Добавочные файлы — под тем же
   именем семейства с unicode-range: браузер качает их, только когда на странице
   есть такие знаки, — то есть на страницах EL и TR. Засечный для них —
   Noto Serif Display (OFL, resources/fonts/OFL-noto-serif-display.txt). */
@font-face{
  font-family:'Prata';
  src:url('/assets/fonts/serif-ext-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0370-03FF,U+1F00-1FFF,U+00C7,U+00D6,U+00DC,U+00E7,U+00F6,U+00FC,U+011E-011F,U+0130-0131,U+015E-015F;
}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-tr-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+00C7,U+00D6,U+00DC,U+00E7,U+00F6,U+00FC,U+011E-011F,U+0130-0131,U+015E-015F}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-tr-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+00C7,U+00D6,U+00DC,U+00E7,U+00F6,U+00FC,U+011E-011F,U+0130-0131,U+015E-015F}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-tr-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+00C7,U+00D6,U+00DC,U+00E7,U+00F6,U+00FC,U+011E-011F,U+0130-0131,U+015E-015F}
@font-face{font-family:'Caveat';src:url('/assets/fonts/caveat-tr-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+00C7,U+00D6,U+00DC,U+00E7,U+00F6,U+00FC,U+011E-011F,U+0130-0131,U+015E-015F}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  padding-top:var(--hdr);
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:var(--t-h1);line-height:1.08}
h2{font-size:var(--t-h2);line-height:1.15}
h3{font-size:var(--t-h3);line-height:1.25}
p{margin:0 0 var(--s4)}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-h)}
img{display:block;max-width:100%}

/* Кольцо фокуса — DESIGN 2.3.5. На тёмном кобальт по кобальту не виден,
   там латунь. */
:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:2px}
/* ⚠️ Шапки здесь больше нет: она на бумаге, и латунное кольцо на белом
   даёт 1,9:1 — фокус было бы не видно. Там работает кольцо по умолчанию. */
.footer :focus-visible,
.sec-deep :focus-visible,.hero :focus-visible{outline-color:var(--brass)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* --- раскладка -----------------------------------------------------------
   Секции чередуют paper и wash. Тёмная секция — одна на страницу плюс
   подвал: DESIGN 2.3.1. Полосатость считает линтер.
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:var(--measure)}

/* ⚠️ FIXES F16. `class="wrap narrow"` ставило узкую колонку по центру
   страницы: max-width приходил от .narrow, а margin:0 auto оставался
   от .wrap. Соседние секции при этом шли от левого края контейнера,
   и страница читалась по двум разным вертикалям.
   Теперь коробка остаётся шириной контейнера, а узкой становится
   строка внутри — прижатая влево, как всё остальное. */
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow>*{max-width:var(--measure)}
.section{padding:var(--sec-y) 0}
/* Узкая секция: полоса-разделитель, а не самостоятельный блок. */
.section--tight{padding:var(--s5) 0}
.sec-wash{background:var(--wash)}
/* Две подложки подряд — один отступ между ними, а не двойной. */
.sec-wash+.sec-wash{padding-top:0}
.sec-deep{background:var(--deep);color:var(--ink-inv-2)}
.sec-deep h1,.sec-deep h2,.sec-deep h3{color:var(--ink-inv)}
.lede{font-size:var(--t-lede);color:var(--ink-2);max-width:var(--measure);line-height:1.5}
.sec-deep .lede{color:var(--ink-inv-2)}
.note{font-size:var(--t-sm);color:var(--ink-2)}
.sec-deep .note{color:var(--ink-inv-2)}
/* Зона нажатия 44 px набирается отступами: видимый размер текста
   при этом не меняется — TZ 5.3 разрешает такое расхождение. */
/* ⚠️ FIXES F13: только padding-top. Сокращённый `padding: X 0 0` на
   элементе, у которого рядом стоит .wrap, обнулял боковые отступы
   контейнера — вес селекторов одинаковый, а объявлены эти правила
   ниже. На 360 px крошки, H1 и подзаголовок прилипали к краю экрана. */
/* Хлебные крошки — REDESIGN-v2.5 X3: рукописным, шестое место Caveat.
   Ссылка с отступами 8 px — вместе со строкой зона нажатия 44 px. */
.crumbs{font-family:var(--hand);font-size:var(--t-hand);line-height:1.2;color:var(--blue);padding-top:var(--s1)}
.crumbs a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  display:inline-block;padding:8px 0;min-height:var(--tap)}
.crumbs [aria-current="page"]{color:var(--ink-2)}
.crumbs .sep{margin:0 .35em;color:var(--orn)}
.page-head{padding-top:var(--s5)}
.page-head .lede{margin:var(--s3) 0 0}

/* Длинный юридический текст — единственное место на сайте, где абзацы
   идут подряд десятками. Ширину строки задаёт .narrow, здесь только
   ритм между абзацами. */
.doc p{margin:0 0 var(--s4)}
.doc p:last-child{margin-bottom:0}
/* Полоса тестового наполнения. Нарочно вне палитры: её видно сразу
   и её нельзя принять за элемент дизайна. На бой не попадает — см.
   Porto\Fixtures и гейт в scripts/deploy.sh. */
.fixbar{margin:0;padding:var(--s2) var(--s4);background:var(--ink);
  color:var(--ink-inv);font-size:var(--t-sm);text-align:center}
@media(max-width:760px){
  .fixbar{padding:var(--s1) var(--s4);font-size:var(--t-xs)}
  .fixbar-more{display:none}
}

/* Полоса правки для вошедшего управляющего — Porto\EditLink. Гость
   её не видит никогда. Синим — это действие, а не предупреждение. */
.edbar{margin:0;padding:0 var(--s4);background:var(--blue);color:var(--ink-inv);
  font-size:var(--t-sm);text-align:center}
.edbar a{color:var(--ink-inv);font-weight:600;display:inline-flex;align-items:center;
  min-height:var(--tap)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:200;background:var(--paper);
  padding:var(--s3) var(--s4);border-radius:var(--r-s)}

/* --- кнопки --------------------------------------------------------------
   Одна первичная кнопка в экране — DESIGN 2.7. Без тени, без градиента,
   без стрелки. Кнопка называет результат, а не действие.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:inherit;font-size:var(--t-body);font-weight:600;
  padding:0 var(--s5);border:1px solid transparent;border-radius:var(--r-s);
  cursor:pointer;text-decoration:none;min-height:52px;line-height:1.2;text-align:center;
}
.btn--p{background:var(--blue);color:var(--ink-inv)}
.btn--p:hover{background:var(--blue-h);color:var(--ink-inv)}
/* На тёмном кобальт по кобальту не работает: действие красится латунью. */
.sec-deep .btn--p,.hero .btn--p{background:var(--brass);color:var(--ink)}
.sec-deep .btn--p:hover,.hero .btn--p:hover{background:var(--brass-h);color:var(--ink)}
.btn--s{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--s:hover{border-color:var(--ink);color:var(--ink)}
.sec-deep .btn--s,.hero .btn--s{border-color:var(--line-inv);color:var(--ink-inv)}
.btn--sm{padding:0 var(--s4);min-height:var(--tap)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

@media(min-width:761px){
  .btn{min-height:48px}
}

/* --- шапка ---------------------------------------------------------------- */
/* ⚠️ Шапка на бумаге — FIXES F01 и F10, DESIGN 4.6.
   Тёмная шапка стоила двух дефектов сразу. Кнопка брони на ней была
   `.btn--s`: тёмные буквы по тёмно-синему, 1,3:1 — главное действие
   сайта на всех страницах десктопа гость просто не видел. И она же
   давала «бутерброд»: тёмная шапка → белая полоса крошек → тёмный
   герой, три полосы до первого слова содержания.
   Теперь шапка белая, крошки на том же белом, тёмная полоса
   на странице одна — герой. */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--hdr);z-index:100;
  background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);
}
.header-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5);height:100%;
  display:flex;align-items:center;gap:var(--s5)}
.logo{display:flex;align-items:center;gap:var(--s2);text-decoration:none;
  color:var(--ink);flex-shrink:0;min-height:var(--tap)}
.logo-wm{display:flex;flex-direction:column;line-height:1.1}
/* Загруженный логотип: по высоте строки шапки, ширина — своя.
   Предел ширины — чтобы вытянутый знак не выдавил меню. */
.logo-img{display:block;height:var(--logo-h,40px);width:auto;max-width:240px;object-fit:contain}
.logo-wm b{font-family:var(--serif);font-size:var(--t-body);font-weight:400;letter-spacing:.06em}
.logo-wm i{font-style:normal;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:var(--s1) 0 0}
.nav{display:flex;gap:var(--s5);margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);
  color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);font-weight:600}
.nav a:hover{color:var(--ink)}
/* Латунь на белом текстом — только --brass-ink: сама --brass даёт 2,2:1. */
.nav a[aria-current="page"]{color:var(--brass-ink)}
/* ⚠️ .tel раньше .hdr-tel, не после: веса равны, и стоявшее ниже
   `.tel{display:inline-block}` перебивало inline-flex — номер
   прижимался к верху своей зоны нажатия, выше пунктов меню. */
.tel{display:inline-block}
.hdr-tel{display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:var(--t-sm);color:var(--ink);text-decoration:none;
  font-weight:700;white-space:nowrap}
.hdr-call{display:none;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-s);flex-shrink:0}
.hdr-call svg{width:19px;height:19px}

/* Место, где скрипт Манго меняет номер. Ширина зафиксирована заранее:
   подменённый номер приходит после отрисовки, и без этого шапка
   дёргалась бы на каждой загрузке — CLS штрафует именно за это.
   Только там, где номер стоит текстом: у кнопки «Позвонить» и иконки
   в шапке свой текст, им подменяют лишь адрес ссылки.

   ⚠️ .tel{display} стоит выше .hdr-tel и не в конце файла: веса
   одинаковые, и стоявший ниже перебил бы .hdr-tel{display:none}
   из медиазапроса — номер вылезал бы в мобильную шапку поверх логотипа. */
[data-mango="text"]{min-width:11.5em;white-space:nowrap}
/* У кнопки внутренние отступы входят в ширину (border-box), и 11,5em
   на текст уже не хватает: номер раздвигал бы её. */
.btn[data-mango="text"]{min-width:13em}
/* ⚠️ REDESIGN-v2 D8. Номер-кнопка в блоке «Как нас найти» — `.tel.btn`:
   .tel{display:inline-block} стоит ниже .btn и перебивал его inline-flex,
   и номер прижимался к верху кнопки высотой 52 px. Два класса весят
   больше одного — кнопка остаётся кнопкой. */
.tel.btn{display:inline-flex}

.burger{display:none;background:none;border:0;padding:var(--s2);cursor:pointer;
  width:var(--tap);height:var(--tap);color:var(--ink)}
.burger svg{width:22px;height:22px}
/* Меню раскрывается прямо из-под шапки и на той же бумаге: тёмный слой
   поверх белой шапки читался бы как другая страница. */
.mobmenu{position:fixed;inset:var(--hdr) 0 0;background:var(--paper);z-index:99;
  padding:var(--s5);display:none;overflow:auto}
.mobmenu[data-open="true"]{display:block}
/* D10: разделы крупно, служебные — основным кеглем, ниже бронь
   и всё, ради чего бургер открывают на телефоне: номер, адрес, часы. */
.mm-main a{display:block;font-family:var(--serif);font-size:var(--t-h2);
  color:var(--ink);text-decoration:none;padding:var(--s2) 0;min-height:var(--tap)}
.mm-more{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.mm-more a{display:flex;align-items:center;min-height:var(--tap);
  color:var(--ink);text-decoration:none;font-size:var(--t-body)}
/* REDESIGN-v2.25 N1: текущая страница — как в шапке. */
.mm-main a[aria-current="page"],.mm-more a[aria-current="page"]{color:var(--brass-ink)}
.mm-contact{margin-top:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line);
  color:var(--ink-2);font-size:var(--t-sm)}
.mm-contact p{margin:var(--s2) 0 0}
.mm-book{display:flex;width:100%}
.mm-tel{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--s3);
  font-size:var(--t-body);font-weight:700;color:var(--ink);text-decoration:none}
.mm-soc{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.mm-soc a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink)}
/* Открытое меню: прокрутка страницы под ним стоит, бургер — крестик. */
body.mm-open{overflow:hidden}
.burger[aria-expanded="true"] .b-open,.burger[aria-expanded="false"] .b-close{display:none}

/* --- подвал --------------------------------------------------------------- */
.footer{
  background:var(--deep);color:var(--ink-inv-2);font-size:var(--t-sm);
  padding:var(--s7) 0 calc(var(--s9) + env(safe-area-inset-bottom,0px));
}
.footer-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6)}
.footer a{color:var(--ink-inv-2);text-decoration:none;display:block;
  padding:var(--s3) 0;min-height:var(--tap)}
.footer a:hover{color:var(--ink-inv)}
.footer h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-inv-2);margin:0 0 var(--s2)}
.footer .note{color:var(--ink-inv-2)}
/* Соцсети строкой: шесть отдельных ссылок столбиком заняли бы колонку
   целиком и перевесили бы разделы сайта. */
.soc{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s4) 0 0}
/* REDESIGN-v2.19 П7: иконка в круге 44 px, при наведении — латунь. */
.footer .soc-i{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
  border:1px solid var(--line-inv);color:var(--ink-inv);transition:background .2s,color .2s,border-color .2s}
.soc-i svg{width:20px;height:20px;fill:currentColor;opacity:.9}
/* REDESIGN-v2.25 N2: своя иконка — маска по форме картинки, цвет как у встроенных. */
.soc-own{display:block;width:20px;height:20px;background:currentColor;opacity:.9;
  -webkit-mask:var(--soc-m) center/contain no-repeat;mask:var(--soc-m) center/contain no-repeat}
.footer .soc-i:hover,.footer .soc-i:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--deep)}
.ft-links{display:contents}

/* --- прилипшая панель ------------------------------------------------------
   Уезжает, пока на экране виден призыв к брони: две одинаковые кнопки
   в одном вьюпорте — это нарушение правила «одна первичная».
   -------------------------------------------------------------------------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;gap:var(--s2);
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:var(--elev);
  padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom,0px));
  transition:transform .25s ease;
}
/* REDESIGN-v2 §5: «Позвонить» — треть, главное действие — две трети,
   подпись в одну строку. «Стол на вечер с танцами» в половине ширины
   360 px переносился на две строки. */
.actionbar .btn{flex:1;padding:0 var(--s2);white-space:nowrap}
.actionbar .btn--p{flex:2}
@media(max-width:374px){
  .actionbar .btn{font-size:var(--t-sm)}
}
.actionbar[data-hidden="true"]{transform:translateY(110%)}

/* --- адаптив --------------------------------------------------------------- */
@media(max-width:1000px){
  .nav{gap:var(--s3)}
}
@media(max-width:760px){
  .wrap{padding:0 var(--s4)}
  /* ⚠️ FIXES F15. Таблица «ключ — значение» на узком экране прижимала
     длинное значение вправо в узкую колонку, и «Программа с 21:00, стол
     лучше брать на 20:00–20:30» ломалось на три строки. Ключ встаёт над
     значением, оба по левому краю.
     .plain сюда не попадает: там пара «название — цена», и цена
     обязана стоять справа — иначе строка меню перестанет читаться. */
  .kv:not(.plain){display:block}
  .kv:not(.plain)>b{display:block;text-align:left;margin-top:var(--s1)}
  /* ⚠️ FIXES F19. Кнопки в ряду переносятся столбиком и стоят разной
     длины — «Всё меню с ценами» шире «Заказать домой». Во всю ширину
     колонки: одинаковая цель нажатия и одна вертикаль. */
  .row>.btn{width:100%}
  .page-head{padding-top:var(--s4)}
  /* Хвост пояснения уходит ниже сгиба: на первом экране одна строка. */
  .lede-long{display:none}
  .crumbs{padding-top:var(--s2)}
  .header-in{gap:var(--s3);padding:0 var(--s4)}
  .header .btn--sm{display:none}
  .nav{display:none}
  .hdr-tel{display:none}
  .logo-wm i{display:none}
  .hdr-call{display:flex;margin-left:auto}
  .burger{display:flex;align-items:center;justify-content:center}
  .actionbar{display:flex}
  .footer-in{grid-template-columns:1fr 1fr;gap:var(--s5)}
}
@media(max-width:420px){
  .footer-in{grid-template-columns:1fr}
}
/* REDESIGN-v2.19 П8: подвал на телефоне — контакты плотнее, иконки рядом,
   тонкая линия, ссылки в две колонки: «Меню» и «Гостям» слева, «Ещё» справа. */
@media(max-width:760px){
  .footer{padding-top:var(--s6)}
  .footer-in{grid-template-columns:1fr;gap:0}
  .footer-in>div:first-child p{margin:0 0 6px}
  .footer-in>div:first-child>p>a,.footer-in>div:first-child>a:not(.soc-i){display:flex;align-items:center;padding:0;min-height:var(--tap)}
  .footer-in>div:first-child .soc{margin:18px 0 26px}
  .ft-links{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"m e" "g e";align-items:start;
    column-gap:var(--s4);border-top:1px solid var(--line-inv);padding-top:22px}
  .ft-menu{grid-area:m}.ft-guests{grid-area:g}.ft-more{grid-area:e}
  .ft-links>div{margin-bottom:18px}
  /* Строка ссылки — не меньше 36 px (П8); берём 44 — зона нажатия сайта. */
  .ft-links a{display:flex;align-items:center;padding:4px 0;min-height:var(--tap);font-size:15px;line-height:1.35;color:var(--ink-inv)}
}
h1 + .lede, h2 + .lede, h3 + .lede{margin:var(--s4) 0 0}
/* REDESIGN-v2.4 W4: от заголовка секции до содержимого — 24 px, не больше. */
.lede + *{margin-top:var(--s5)}
/* Последний элемент секции отступа снизу не несёт: его даёт секция. */
.section>.wrap>:last-child{margin-bottom:0}
/* Лента — последней в секции: её нижний отступ под тени полароидов
   ложится в отступ секции, а не прибавляется к нему (W4). */
.section>.wrap>.rail:last-child{margin-bottom:calc(-1 * var(--s5))}
.section>.wrap>.hill:last-child{margin-bottom:calc(-1 * var(--sec-y))}
/* Первый элемент секции сверху отступа не несёт: «Читайте также» в своей
   секции добавлял 48 px к её отступу (W4). */
.section>.wrap>:first-child{margin-top:0}
.note{margin:var(--s2) 0 0}
p:last-child{margin-bottom:0}

/* Отступ сверху и снизу шагами шкалы. ⚠️ Утилиты названы по шагам,
   а не по величине: значение живёт в токене, и поменять шаг можно
   в одном месте. Значений вне шкалы в разметке нет — это и было
   причиной 27 разных отступов в прежней сборке. */
.mt-s2{margin-top:var(--s2)}
.mt-s3{margin-top:var(--s3)}
.mt-s4{margin-top:var(--s4)}
.mt-s5{margin-top:var(--s5)}
.mt-s6{margin-top:var(--s6)}
.mt-s7{margin-top:var(--s7)}
.mb-s2{margin-bottom:var(--s2)}
.mb-s3{margin-bottom:var(--s3)}
.mb-s4{margin-bottom:var(--s4)}
.nomargin{margin:0}
.center{text-align:center}
.right{text-align:right}
.plain{border:0;margin:0;padding:0}
.wide{grid-column:1/-1}

.rel{position:relative}

/* Поле-ловушка: людям не видно, скринридерам скрыто. Компонент, а не
   стиль у двух полей — их станет больше с каждой новой формой. */
.trap{position:absolute;left:-9999px}

/* Убрано с экрана, но осталось для скринридера и для клавиатуры.
   ⚠️ Не display:none и не left:-9999px: первое выносит элемент
   из дерева доступности, второе уводит фокус за край и страница
   прыгает при табуляции. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Ряд кнопок или ссылок под блоком. */
.row{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s5) 0 0}
.row--tight{margin-top:var(--s3)}

/* Якорь со смещением под прилипшую шапку. ⚠️ На #greek-dance ведёт
   реклама Яндекс.Бизнеса, и переносить его редиректом нельзя. */
.anchor{position:absolute;top:calc(0px - var(--hdr) - var(--s5))}

/* --- атомы ------------------------------------------------------------------ */
.grid{display:grid;gap:var(--s4)}
.grid-mt{margin:var(--s5) 0 0}
/* ⚠️ У трека 1fr минимальная ширина по умолчанию равна min-content
   содержимого, и колонка перестаёт сжиматься, если внутри лежит что-то
   широкое с горизонтальной прокруткой — например лента вкладок дней.
   Без этого страница получает горизонтальную прокрутку на телефоне,
   и виноват при этом выглядит не тот элемент. */
.grid>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* Фотосетка по числу кадров — FIXES F12. Пустая ячейка не допускается,
   поэтому раскладка не фиксированная, а выбирается количеством.
   Модификатор ставит шаблон: он один знает, сколько кадров нашлось. */
.photos{display:grid;gap:var(--s4)}
.photos--1{grid-template-columns:1fr}
.photos--2{grid-template-columns:1fr 1fr}
.photos--4{grid-template-columns:1fr 1fr}
/* Три кадра: один большой слева во всю высоту, два столбиком справа. */
.photos--3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.photos--3>:first-child{grid-row:1 / span 2;height:100%}
.photos--3>:first-child img,.photos--3>img:first-child{height:100%}
@media(max-width:480px){
  /* На самом узком экране два кадра в ряд становятся почтовыми марками. */
  .photos--2,.photos--3,.photos--4{grid-template-columns:1fr;grid-template-rows:none}
  .photos--3>:first-child{grid-row:auto;height:auto}
  .photos--3>:first-child img{height:auto}
}

/* Карточка: рамка и радиус, без тени. Тень — только у того,
   что всплывает над содержимым: DESIGN 2.7. */
.card{border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s5);background:var(--paper)}
.card.hl{border-color:var(--blue);border-width:2px}
/* Подпись на карточке — не надзаголовок секции: она называет саму
   карточку, и STRUCTURE 8.3 требует её прямо («подпись сверху»).
   Запрет DESIGN 2.4 касается caps-строки НАД секцией, а не бейджа
   внутри карточки, поэтому класс отдельный и считается отдельно. */
/* Уровень программы — остров, а не тариф: STRUCTURE 9. Иллюстрация
   сверху, греческое имя, русское имя, процент. Карточка без картинки
   собирается текстом: остров украшает, но не отгружает блок. */
/* Три уровня «Порто Фэмили» — FIXES F32. Это сравнение: три числа
   рядом. Столбиком на телефоне сравнивать нечего — надо прокручивать
   и держать в голове, поэтому в одну строку на любой ширине. */
/* ⚠️ .grid.islands, а не .islands: утилита .g3 переопределяется
   в мобильном медиазапросе ниже по файлу, и при равном весе побеждала
   бы она — острова снова встали бы столбиком. Та же ловушка каскада,
   что с .tel/.hdr-tel и .steps/.g1. */
.grid.islands{grid-template-columns:repeat(3,1fr);gap:var(--s2)}
@media(max-width:760px){
  .grid.islands{gap:var(--s2)}
  .islands .card{padding:var(--s3) var(--s2)}
  .islands .island-img{width:100%;max-width:var(--island)}
  .islands h3{font-size:var(--t-body)}
  .islands .price{font-size:var(--t-lede)}
  .islands .note{font-size:var(--t-xs)}
}

.island{display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.island-img{width:var(--island);height:auto;aspect-ratio:1/1;object-fit:contain;
  display:block;margin:0 0 var(--s2)}
.island .price{margin:var(--s2) 0 0}
.card--tint{background:var(--sky);border-color:transparent;
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center}
/* Карточка со снимком слева и текстом справа. */
.card--row{display:flex;gap:var(--s4);align-items:center}

/* Таблица «ключ — значение»: без точечного пунктира между ними,
   иначе блок читается как прайс-лист — DESIGN 2.7. */
.kv{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;
  border-bottom:1px solid var(--line-s);font-size:var(--t-body)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--ink-2)}
.kv b{text-align:right;font-weight:600}
.sec-deep .kv{border-color:var(--line-inv)}
.sec-deep .kv span{color:var(--ink-inv-2)}

/* D9: «780» и «₽» разрывались на две строки у длинных названий. */
.price{font-family:var(--serif);font-size:var(--t-h3);white-space:nowrap}

/* Ряд «значение — подпись». ⚠️ Класса .stat в CSS не было вовсе, и блок
   на странице лояльности всё это время шёл без стилей: <b> и <span>
   оставались строчными и слипались — «0 ₽стоимость участия». Это D12
   из DESIGN, и это не пропущенный пробел, а пропущенный компонент. */
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.stat>div{border-top:2px solid var(--brass);padding:var(--s3) 0 0}
.stat b{display:block;font-family:var(--serif);font-size:var(--t-h2);
  font-weight:400;line-height:1.1}
.stat span{display:block;font-size:var(--t-sm);color:var(--ink-2);margin:var(--s1) 0 0}
@media(max-width:760px){
  .stat{grid-template-columns:1fr 1fr;gap:var(--s4)}
}

.tags{display:flex;gap:var(--s1);flex-wrap:wrap;margin:var(--s2) 0 0}
.tg{font-size:var(--t-xs);font-weight:700;padding:var(--s1) var(--s2);
  border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-2)}
.tg--hit{border-color:var(--brass);color:var(--brass-ink)}

.kind{display:inline-block;font-size:var(--t-xs);font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:var(--s1) var(--s3);border-radius:var(--r-pill);
  margin:0 0 var(--s2);background:var(--sky);color:var(--blue)}
.kind--show{background:var(--deep);color:var(--ink-inv)}

/* Чипы и табы стоят НАД содержимым, которым управляют — DESIGN 2.7.
   ⚠️ FIXES F14. Лента всегда прокручивалась, и на десктопе последний
   чип обрезался на «Десе…», хотя места хватало с запасом. Выше 760 —
   перенос на вторую строку; ниже — прокрутка, но с запасом справа
   и затуханием, чтобы последний чип было и видно, и чем достать. */
.tabs{display:flex;gap:var(--s1);overflow-x:auto;padding:0 0 var(--s1)}
@media(min-width:761px){
  .tabs{flex-wrap:wrap;overflow-x:visible;row-gap:var(--s2)}
}
@media(max-width:760px){
  .tabs{
    scroll-padding-inline:var(--s4);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--s6)),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - var(--s6)),transparent);
  }
  /* Запас справа, чтобы последний чип доезжал из-под затухания. */
  .tabs>:last-child{margin-right:var(--s6)}
  /* ⚠️ Полосы прокрутки под лентами убраны — замечание заказчика 26.09:
     на Android под каждой лентой шла серая линия и читалась как ошибка
     вёрстки. Что ленту листают, говорят затухание справа и обрезанный
     крайний чип; палец листает и без полосы. */
  .tabs{scrollbar-width:none;padding-bottom:0}
  .tabs::-webkit-scrollbar{display:none}
}
.tabs button,.tabs .tab{font:inherit;font-size:var(--t-sm);font-weight:600;
  display:inline-flex;align-items:center;padding:0 var(--s4);min-height:var(--tap);
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;
  white-space:nowrap;text-decoration:none}
.tabs button[aria-pressed="true"],.tabs .tab[aria-current="page"]{
  background:var(--deep);color:var(--ink-inv);border-color:var(--deep)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:var(--s5) 0 0}
/* Шаги в одну колонку — для узкой колонки. ⚠️ Модификатор, а не утилита
   .g1: .steps объявлен ниже утилит и с тем же весом перебивал их,
   и три шага сжимались в колонки по 150 px внутри .narrow. */
.steps--col{grid-template-columns:1fr;gap:var(--s3)}
.step{border-top:2px solid var(--brass);padding:var(--s3) 0 0}
.step b{display:block;font-size:var(--t-xs);letter-spacing:.16em;
  color:var(--brass);margin:0 0 var(--s1)}
.step p{margin:0;font-size:var(--t-sm)}
.sec-deep .step p{color:var(--ink-inv-2)}

details.faq{border-bottom:1px solid var(--line)}
details.faq summary{padding:var(--s4) 0;cursor:pointer;font-weight:600;
  font-size:var(--t-body);list-style:none;min-height:var(--tap);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--ink-2);flex-shrink:0}
details.faq[open] summary::after{content:'–'}
details.faq p{color:var(--ink-2);font-size:var(--t-body);
  margin:0 0 var(--s4);max-width:var(--measure)}

/* --- герой ----------------------------------------------------------------
   ⚠️ Фотография не приглушается прозрачностью — DESIGN 2.6.1. Кадр идёт
   в полную силу, читаемость текста держит скрим от нижнего края.
   Верхние 40% кадра остаются нетронутой фотографией.
   -------------------------------------------------------------------------- */
/* Пропорции кадра заданы — DESIGN 2.6.3: 4:5 на мобильном, 16:7 на
   десктопе. Потолок нужен, иначе на широком мониторе герой вырастает
   в экран целиком и вытесняет всё остальное.

   ⚠️ Текст прижат к низу (margin-top:auto), и только поэтому скрим
   работает: он плотный у нижнего края, а верхние 40% кадра остаются
   чистой фотографией. Текст в середине кадра лежал бы на светлом
   участке — это было видно на скриншоте 1280. */
.hero{position:relative;background:var(--deep);color:var(--ink-inv);overflow:hidden;
  display:flex;flex-direction:column;min-height:calc(100vw * 5 / 4)}
.hero-in{margin-top:auto}
@media(min-width:761px){
  .hero{min-height:min(calc(100vw * 7 / 16), 620px)}
}
/* ⚠️ Ниже медиазапроса, а не выше: .hero и .hero--flat весят одинаково,
   и правило из медиазапроса перебивало бы сброс. На внутренней странице
   кадра нет, и герой в полэкрана — это не воздух, а пустое место
   (DESIGN 2.5). Ровно та же ловушка была с телефоном в шапке. */
.hero--flat{min-height:0}
.slider{position:absolute;inset:0}
/* Кадр показывается и скрывается, а не приглушается: в покое активный
   слайд идёт в полную силу, читаемость держит скрим ниже. */
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.slider img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.slider img{transition:none}}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    var(--scrim-3) 0%, var(--scrim-2) 30%, var(--scrim-1) 62%, var(--scrim-0) 92%)}
.dots{position:absolute;right:var(--s4);bottom:var(--s4);z-index:3;display:flex;gap:0}
/* Видимая точка 9 px, зона нажатия 44×44 — TZ 5.3 это разрешает. */
.dots button{position:relative;width:9px;height:9px;padding:0;margin:0 var(--s3);
  border-radius:50%;border:1px solid var(--line-inv);background:transparent;cursor:pointer}
.dots button::after{content:'';position:absolute;left:50%;top:50%;
  width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
.dots button[aria-selected="true"]{background:var(--ink-inv)}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);width:100%;
  margin:auto auto 0;padding:var(--s9) var(--s5) var(--s7)}
.hero h1{color:var(--ink-inv);max-width:18ch}
.hero .sub{margin:var(--s4) 0 0;font-size:var(--t-lede);color:var(--ink-inv);max-width:46ch}
.trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;
  font-size:var(--t-sm);color:var(--ink-inv-2)}
.trust b{color:var(--ink-inv)}
.trust a{color:inherit;text-decoration:underline;
  display:inline-flex;align-items:center;min-height:var(--tap)}
.trust a:hover{color:var(--ink-inv)}
.award{display:inline-flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);
  padding:var(--s1) var(--s3);border:1px solid var(--line-inv);border-radius:var(--r-s);
  color:var(--ink-inv);text-decoration:none;font-size:var(--t-sm);min-height:var(--tap)}
.award img{height:24px;width:auto}

/* --- полоса доверия ---------------------------------------------------------
   Доказательства собраны в одну тонкую строку на белом сразу под героем:
   на первом экране им не место, но и терять их нельзя — DESIGN 3.
   -------------------------------------------------------------------------- */
.trustbar{background:var(--paper);border-bottom:1px solid var(--line-s)}
.trustbar-in{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s2) var(--s6);min-height:var(--tap);
  padding:var(--s2) var(--s5);font-size:var(--t-sm);color:var(--ink-2)}
/* ⚠️ Не inline-flex: во флекс-контейнере текстовые узлы становятся
   анонимными элементами, и пробелы между ними пропадают — «Яндекс4,6из».
   В разметке пробелы при этом есть, поэтому правило склеек молчит.
   Зона нажатия набирается отступами, как и везде. */
.trustbar a{display:inline-block;padding:var(--s3) 0;
  color:var(--ink-2);text-decoration:underline}
.trustbar a:hover{color:var(--ink)}
.trustbar b{color:var(--ink);font-weight:600}
/* Оценки на картах — значок сервиса и число. Без подчёркивания:
   это значки, а не строка текста; что это ссылки, говорит курсор
   и подсказка. Зона нажатия — отступами, как у соседей. */
.rates{display:flex;gap:var(--s4);margin:0;padding:0;list-style:none}
.trustbar .rate{display:flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:0;text-decoration:none;color:var(--ink)}
.rate img{width:20px;height:20px;flex-shrink:0}
.rate:hover b{text-decoration:underline}
@media(max-width:760px){
  .trustbar-in{gap:0 var(--s4);padding:var(--s2) var(--s4)}
  .rates{width:100%}
}

/* --- строка «Сегодня в таверне» --------------------------------------------- */
.today{position:relative;z-index:2;background:var(--deep);
  border-bottom:1px solid var(--line-inv)}
.today-in{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5);display:flex;
  flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-sm);color:var(--ink-inv-2)}
.today b{color:var(--ink-inv)}
.tit{display:flex;align-items:center;gap:var(--s2)}
/* Точка «сегодня» — одно из мест, где латунь работает заливкой. */
.dot{width:6px;height:6px;border-radius:50%;background:var(--brass);flex-shrink:0}
.dot.off{background:var(--ink-inv-2)}

/* --- блок хозяйки ------------------------------------------------------------
   Эмоциональный пик страницы: секция на побелке, портрет крупно,
   цитата размером H2 — DESIGN 4.1.7.
   -------------------------------------------------------------------------- */
.owner{display:grid;grid-template-columns:minmax(0,2fr) 3fr;gap:var(--s7);align-items:center}
.owner-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-m);display:block}
.owner .q{font-family:var(--serif);font-size:var(--t-h2);line-height:1.3;
  margin:0 0 var(--s4);color:var(--ink);max-width:24ch}
.owner .q::before{content:'«'}
.owner .q::after{content:'»'}
.owner .sig{font-size:var(--t-sm);color:var(--ink-2);margin:0;max-width:52ch}
.owner .sig b{display:block;font-family:var(--serif);font-size:var(--t-h3);
  color:var(--ink);font-weight:400;margin:0 0 var(--s1)}

.dish-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-m);margin:0 0 var(--s3)}

/* Хиты меню строками, а не карточками — STRUCTURE 3, блок 7. Карточка
   на узком экране растягивает четыре позиции на четыре экрана; строка
   с фото 88×88 слева показывает их все разом. Без фотографии строка
   просто идёт без превью: серой заглушки не появляется. */
.dishes{display:grid;gap:var(--s4)}
.dish{display:flex;gap:var(--s4);align-items:flex-start;
  padding:0 0 var(--s4);border-bottom:1px solid var(--line)}
.dish:last-child{border-bottom:0;padding-bottom:0}
.dish-body{flex:1 1 auto;min-width:0}
.dish-thumb{width:var(--thumb);height:var(--thumb);flex:0 0 var(--thumb);
  object-fit:cover;border-radius:var(--r-m);display:block}
.dish-thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media(min-width:761px){
  .dishes{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s7)}
  /* Две колонки: последний ряд — оба блюда без нижнего отступа и черты (W4). */
  .dishes>.dish:nth-last-child(2):nth-child(odd){border-bottom:0;padding-bottom:0}
}

/* Четыре проверяемых факта про ягнёнка — POSITIONING 11. Список,
   а не абзац: каждый факт проверяется по отдельности. */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.facts li{position:relative;padding:0 0 0 var(--s5);font-size:var(--t-body);color:var(--ink)}
.facts li::before{content:'';position:absolute;left:0;top:calc(var(--s3) - 1px);
  width:var(--s3);height:2px;background:var(--brass)}
.rev-t{font-family:var(--serif);font-size:var(--t-h3);line-height:1.35;margin:0}
.rev-t::before{content:'«'}
.rev-t::after{content:'»'}

/* SEO-текст: колонка 68ch, абзацы с дыханием — STRUCTURE 3, блок 12. */
/* Подзаголовок под H2 — не надзаголовок: не капсом и не над заголовком.
   ⚠️ Caps-надзаголовок над каждой секцией запрещён (DESIGN 2.4), но
   строка «таверна „Порто Миконос“» под H2 SEO-блока несёт слой отличия
   и остаётся — обычным начертанием. */
.subhead{font-family:var(--serif);font-size:var(--t-h3);color:var(--ink-2);margin:0}

.prose p{margin:0 0 var(--s4);font-size:var(--t-body);line-height:1.65}
.prose p:last-child{margin-bottom:0}

/* Старая цена в блоке «Цены по карте»: зачёркнута и приглушена,
   чтобы «было» не читалось как «стало». */
.kv b s{color:var(--ink-2);font-weight:400;text-decoration-thickness:1px}
.card-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-m);display:block}
.card-img--sq{aspect-ratio:1/1;width:var(--sq);height:var(--sq);flex:0 0 var(--sq)}
.card-img--dish{aspect-ratio:4/3}
.card-img--avatar{aspect-ratio:1/1;width:var(--av);height:var(--av);
  flex:0 0 var(--av);border-radius:50%}

/* Карта в блоке «Дорога». Высота задаётся пропорцией, а не числом:
   иначе на мобильном карта занимает пол-экрана. */
.map{width:100%;aspect-ratio:4/5;border:0;display:block;
  border-radius:var(--r-m);background:var(--sky)}

/* --- адаптив блоков главной --------------------------------------------------- */
@media(max-width:1000px){
  .g4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .g2,.g3,.g4,.steps{grid-template-columns:1fr}
  /* Строка «Сегодня» поднимается над героем. Порядок задаёт order,
     а не разметка, поэтому у .today нужен свой слой: иначе блок
     уезжает под абсолютно позиционированный слайдер. */
  .hero{display:flex;flex-direction:column}
  .today{order:-1;border-top:0}
  .owner{grid-template-columns:1fr;gap:var(--s5)}
  .hero-in{padding:var(--s7) var(--s4) var(--s5)}
  .hero .sub-long{display:none}
  /* Точки слайдера на телефоне — вверху справа: внизу во всю ширину
     стоит кнопка брони, и точки легли бы на неё. */
  .dots{top:var(--s3);bottom:auto;right:var(--s2)}
  /* ⚠️ FIXES F23. Полоса занимала три строки тёмного над героем.
     На узком экране она одна: название вечера и часы кухни, без дня
     недели и без анонса пятницы — .today-hide. Переноса нет вовсе,
     лишнее уезжает за край, а не отрастает вниз. */
  .today-in{padding:var(--s2) var(--s4);gap:var(--s1) var(--s4);
    flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  .today-hide{display:none}
  /* ⚠️ Сокращается название вечера, а не то, что за ним. Без этого
     на 360 px за край уезжали часы кухни: строка длиннее экрана
     обрезалась справа, а справа стоят именно они. Название — строка
     переменной длины, его и ужимаем; многоточие говорит гостю, что
     текст сокращён, а полностью он стоит ниже, в «Сегодня в таверне». */
  .today-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .trust{margin:var(--s4) 0 0;gap:var(--s2) var(--s4)}
  .trust .trust-extra{display:none}
  .card--tint{grid-template-columns:1fr}
}

/* --- страница банкетов -------------------------------------------------------- */
/* Герой без фотографии: на внутренней странице кадра нет, скрим не нужен. */
.hero--flat{background:var(--deep)}
.hero--flat::after{display:none}
.hero--flat .hero-in{padding-top:var(--s7)}
/* ⚠️ FIXES F11. Плоский герой без кадра — это просто текст на тёмном,
   и строка в нём обязана держать меру: во всю ширину 1160 px читать
   нечем. H1 и подзаголовок свою меру знают, остальное — здесь. */
.hero--flat .hero-in>*{max-width:var(--measure)}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.strip>div{background:var(--wash);padding:var(--s4)}
.strip b{display:block;font-size:var(--t-body)}
.strip span{font-size:var(--t-sm);color:var(--ink-2)}

.calc{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--s5);align-items:end}

.field{margin:0 0 var(--s4)}
.field label,.legend{display:block;font-size:var(--t-xs);font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s1)}
/* ⚠️ Подпись группы полей — не надзаголовок секции. Раньше она брала
   класс .lbl, и линтер честно считал её caps-надзаголовком: запрет
   DESIGN 2.4 касается строки НАД секцией, а не подписи к полю. */
.field select,.field input,.field textarea{width:100%;font:inherit;
  font-size:var(--t-body);color:var(--ink);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--paper);min-height:var(--tap)}
.field textarea{min-height:84px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.quiz-opts{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) 0 0}
.quiz-opt{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;
  font-size:var(--t-body);min-height:var(--tap);background:var(--paper)}
.quiz-opt input{width:19px;height:19px;flex-shrink:0;accent-color:var(--blue)}
.quiz-opt:has(input:checked){border-color:var(--blue);background:var(--sky)}

.consent{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s3) 0 0;
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}
.consent input{width:20px;height:20px;flex-shrink:0;margin:0;accent-color:var(--blue)}

.also{border-top:1px solid var(--line);margin:var(--s7) 0 0;padding:var(--s5) 0 0}
.also-t{font-size:var(--t-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 var(--s3)}
.also-g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
/* Полоса сервисов: пять ссылок в один ряд — STRUCTURE 3, блок 14. */
.also-g--5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Хаб ссылок из профиля соцсети — STRUCTURE 10: одна колонка, крупные
   зоны нажатия. Палец на этой странице попадает только по ссылкам,
   больше на ней ничего нет. */
.also-g--tap{grid-template-columns:1fr;gap:var(--s3)}
.also-g--tap a{padding:var(--s5);min-height:var(--taphub)}
.also-g--tap a b{font-size:var(--t-lede)}
.also-g a{display:block;padding:var(--s4);border:1px solid var(--line);
  border-radius:var(--r-m);text-decoration:none;color:var(--ink);min-height:var(--tap)}
.also-g a b{display:block;font-weight:600;font-size:var(--t-body);margin:0 0 var(--s1)}
.also-g a span{font-size:var(--t-sm);color:var(--ink-2)}

@media(max-width:1000px){
  .strip{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .strip{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr;gap:var(--s3)}
  .row2{grid-template-columns:1fr}
  .also-g{grid-template-columns:1fr}
}

/* Видео по нажатию — FIXES F30. До нажатия это кнопка с обложкой,
   после — плеер в той же рамке: размер кадра не меняется, страница
   не прыгает. Без обложки кнопка остаётся тёмным кадром 16:9. */
.vbox{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;
  background:var(--deep)}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer;display:flex;align-items:flex-end;
  justify-content:flex-start;color:var(--ink-inv)}
.vplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:0;margin:0}
.vplay::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,28,52,.86), rgba(8,28,52,.12) 60%)}
.vplay-t{position:relative;z-index:1;font:inherit;font-size:var(--t-lede);
  font-weight:600;text-align:left;padding:var(--s5)}

/* --- страница меню — REDESIGN-v2.9 ------------------------------------------
   Вкладки меню (ссылки), поиск с фильтрами, разделы: карточками с фото
   и липкой строкой на телефоне, липким оглавлением на десктопе. Ни одной
   видимой полосы прокрутки. --mtabs — высота липкой строки: по ней
   считается отступ заголовка раздела при переходе по ссылке (FIXES F17). */
:root{--mtabs:48px}
@media(min-width:900px){:root{--mtabs:0px}}
.msearch{flex:1;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;min-width:0;
  background:var(--wash);border:1px solid transparent;border-radius:10px;color:var(--ink-2)}
.msearch:focus-within{background:var(--paper);border-color:var(--deep)}
.msearch svg,.mfbtn svg,.msecbar-s svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.msearch input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.9375rem;
  color:var(--ink);outline:none;padding:0;min-height:0;height:100%}
.msearch input::placeholder{color:var(--ink-2);opacity:1}
.msearch input::-webkit-search-cancel-button{cursor:pointer}
/* Боковые поля auto — обязательно: без них строка уходила к краю окна. */
.wrap.mcount{margin:var(--s3) auto 0;font-size:var(--t-sm);color:var(--ink-2)}
.mitem mark{background:#FFE8A8;color:inherit;border-radius:2px}
/* 360: «Традиционные» и «морепродукты» — в строку, без переноса по букве. */

.mitem[hidden]{display:none}
/* Меню по мастер-файлу — MENU-SYSTEM.md M3, M5: состав и аллергены по флагам,
   цены бара по объёмам, иконки меток, легенда внизу. */
.tg-i{display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;flex:none}
.mp{white-space:nowrap}
/* REDESIGN-v2.19 П2: название блюда по левому краю при любой длине,
   цена справа. Общее .kv b{text-align:right} — для таблиц «ключ — значение». */
.dish .kv{align-items:baseline}
.dish .kv>b{text-align:left}
/* П4: вес строкой, КБЖУ плашкой из четырёх ячеек — эталон v2.19-reference.html. */
.wt{margin:var(--s2) 0 0;font-size:13px;line-height:1.3;font-weight:500;color:var(--ink-2)}
.nut{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px;width:100%;max-width:300px;
  border:1px solid var(--line-s);background:var(--wash);border-radius:8px;overflow:hidden}
.nut>div{padding:6px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.nut>div+div{border-left:1px solid var(--line-s)}
.nut b{font:600 14px/1.15 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.nut span{font:500 11px/1.2 var(--sans);color:var(--ink-2)}
/* 360 px: «углеводы» и «23 г» не умещаются с полями по 8 px. */
@media(max-width:374px){.nut>div{padding:6px 5px}.nut span{font-size:10.5px}}
.nut-note{margin:4px 0 0;font-size:11px;line-height:1.3;color:var(--ink-2)}
.dish-dl{margin:var(--s4) 0 0;display:grid;gap:12px}
.dish-dl dt{font:600 12px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.dish-dl dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
/* П3: окно по фото блюда — белый лист: фото, название и цена, описание,
   вес, КБЖУ «на порцию», состав, аллергены. Прокручивается целиком. */
.lb-more:empty{display:none}
.lb--dish .lb-fig{background:var(--paper);border-radius:14px;overflow:auto;gap:0;
  width:min(94vw,560px);max-height:88vh;max-height:88dvh}
.lb--dish .lb-img{width:100%;max-width:100%;max-height:52vh;max-height:52dvh;object-fit:cover;border-radius:0}
.lb--dish .lb-cap{max-width:none;width:100%;text-align:left;color:var(--ink);padding:16px 16px 22px}
.lb--dish .lb-t{justify-content:space-between;flex-wrap:nowrap;align-items:baseline;gap:12px;
  font:400 22px/1.2 var(--serif);color:var(--ink);margin:0}
.lb--dish .lb-text{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.lb--dish .lb-more{display:block}
.lb--dish .nut{margin-top:14px}
.lb--dish .nut b{font-size:16px}
@media(max-width:760px){.lb--dish .lb-fig{margin-bottom:72px}}

/* Раздел каталога: строки на мобильном, три в ряд на десктопе —
   STRUCTURE 4. ⚠️ Было четыре в ряд, и состав блюда рвался на шесть
   строк; на узком экране карточка с фото растягивала 67 позиций
   на два десятка экранов. */
.mgrid{display:grid;gap:var(--s5)}
@media(min-width:761px){
  .mgrid{grid-template-columns:repeat(3,1fr);gap:var(--s6) var(--s7)}
}

body.qr{padding-top:0}
body.qr .page-head{padding-top:var(--s5)}


/* Шоу-день в расписании. */
.kv-show{color:var(--brass-ink)}

/* Карточка-ссылка: цель крупная, попадать проще, чем по заголовку. */
.card--link{display:block;text-decoration:none;color:var(--ink)}
.card--link:hover{border-color:var(--blue)}
.card-t{display:block;font-family:var(--serif);font-size:var(--t-h3);line-height:1.25}

/* --- сообщения формы ----------------------------------------------------------
   Ошибка красная, успех — кобальтовый: зелёного в палитре нет, а зелёная
   плашка успеха тянула бы за собой ровно тот цвет, который мы убрали.
   -------------------------------------------------------------------------- */
.aerr-form{background:var(--err-bg);color:var(--err-ink);border-radius:var(--r-s);
  padding:var(--s3) var(--s4);margin:0 0 var(--s4);font-size:var(--t-body)}
.field-err{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--err-ink)}
.field input[aria-invalid="true"]{border-color:var(--err-ink)}
.okbox{background:var(--sky);border-color:var(--blue)}
.okbox b{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);color:var(--ink)}

/* --- подмена номера и виджет брони --- */

/* Кнопка брони на время загрузки виджета: нажатие принято,
   но ещё ничего не открылось. */
[href="#openReMarkedWidget"][aria-busy="true"]{opacity:.72;cursor:progress}

/* Виджет не загрузился. Полоса поверх нижней панели: гость уже нажал
   кнопку и смотрит вниз экрана. */
.rm-fail{
  position:fixed;left:0;right:0;bottom:0;z-index:99;margin:0;
  background:var(--err-bg);color:var(--err-ink);border-top:1px solid var(--err-line);
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px));
  font-size:var(--t-body);line-height:1.45;text-align:center;
}
.rm-fail a{color:var(--err-ink);font-weight:700}

/* --- статья блога --- */

/* Картинка из статьи может прийти любой ширины: она со старого сайта,
   и её размеры нам не подчиняются. Без max-width одна такая растянула бы
   страницу и дала горизонтальную прокрутку на телефоне. */
.post{max-width:var(--measure)}
.post img{display:block;max-width:100%;height:auto;
  border-radius:var(--r-m);margin:var(--s5) 0}
.post p{margin:0 0 var(--s4)}
.post h2{margin:var(--s6) 0 var(--s3)}
.post ul,.post ol{margin:0 0 var(--s4);padding:0 0 0 var(--s5)}
.post li{margin:0 0 var(--s1)}
.post blockquote{margin:var(--s5) 0;padding:0 0 0 var(--s4);
  border-left:2px solid var(--brass)}
.bq-line{display:flex;gap:var(--s2);align-items:baseline;font-size:var(--t-sm)}
.bq-line .l{flex:0 1 auto}
.bq-line .d{flex:1;border-bottom:1px dotted var(--line);position:relative;top:calc(-1 * var(--s1));min-width:var(--s3)}
.bq-line .v{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Остаток до минимальной суммы — латунью-чернилами: 5,9 на бумаге. */
.bq-line.accent .l,.bq-line.accent .v{color:var(--brass-ink);font-weight:700}

/* Липкая панель и лист — только на телефоне и планшете (X10). */
.bq-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);
  box-shadow:var(--bar-shadow);padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center}
.bq-sheet{border:0;padding:0;margin:0;width:100%;max-width:100%;max-height:86vh;top:auto;bottom:0;
  border-radius:16px 16px 0 0;overflow:auto;background:var(--paper);color:var(--ink);transition:transform .15s}
.bq-sheet::backdrop{background:var(--scrim-sheet)}
.bq-sheet__grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:var(--s2) auto 0}
.bq-sheet__x{float:right;width:var(--tap);height:var(--tap);margin:var(--s1) var(--s2) 0 0;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);font-size:1.25rem;cursor:pointer;color:var(--ink)}
@media(min-width:1000px){
  .bq-bar,.bq-sheet{display:none}
}

/* =============================================================================
   ШАБЛОН v2 — REDESIGN-v2.md. Компоненты C1–C11 один раз, для всего сайта;
   ниже — раскладка главной по §4.

   ⚠️ Файл стилей один, как требует CLAUDE.md, — отдельного components.css
   из REDESIGN-v2 §3 нет: лишний файл — лишний запрос на первом экране.
   Расхождение записано в QUESTIONS.md.
   ============================================================================= */

/* --- §5: шапка, бургер и нижняя панель — мобильный вид до 1000 px -------- */
@media(max-width:1000px){
  .header-in{gap:var(--s3);padding:0 var(--s4)}
  .header .btn--sm{display:none}
  .nav{display:none}
  .hdr-call{display:flex;margin-left:auto}
  .burger{display:flex;align-items:center;justify-content:center}
  .actionbar{display:flex}
  .logo-img{height:var(--logo-m)}
}
/* Подвал: заголовки колонок латунью, строчными — капс-надзаголовки
   запрещены (DESIGN 2.4), а в подвале они держались по инерции. */
.footer h2{font-size:var(--t-sm);font-weight:700;letter-spacing:0;text-transform:none;color:var(--brass)}

/* --- C1. Полоса адреса ------------------------------------------------------ */
.addr{background:var(--deep);color:var(--ink-inv)}
.addr-in{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2);row-gap:var(--s1);
  padding-top:var(--s2);padding-bottom:var(--s2);font-size:var(--t-sm);font-weight:600;line-height:1.35}
.addr a{position:relative;color:var(--ink-inv);text-decoration:none}
/* Видимая строка 19 px, зона нажатия 44 — TZ 5.3 разрешает такое
   расхождение. Полоса остаётся тонкой, палец попадает. */
.addr a::after{content:'';position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%)}
.addr a:hover{text-decoration:underline;color:var(--ink-inv)}
.addr-street{order:1;display:flex;align-items:center;gap:var(--s2);white-space:nowrap}
.addr-street svg{width:14px;height:14px;flex:none;color:var(--brass)}
.addr .addr-tel{order:2;margin-left:auto;white-space:nowrap;min-width:0}
.addr .addr-metro{order:3;flex-basis:100%;padding-left:var(--s5);color:var(--ink-inv-2);
  white-space:nowrap;font-weight:400}
@media(min-width:760px){
  .addr-in{flex-wrap:nowrap;min-height:var(--strip);padding-top:0;padding-bottom:0}
  .addr-street::after{content:',';margin-left:calc(-1 * var(--s2))}
  .addr .addr-metro{order:2;flex-basis:auto;padding-left:0}
  .addr .addr-tel{order:3}
}

/* --- кнопки v2 -------------------------------------------------------------- */
/* Латунная — действие на тёмном: слайд героя, карточка пятницы. */
.btn--brass{background:var(--brass);color:var(--ink)}
.btn--brass:hover{background:var(--brass-h);color:var(--ink)}
/* Вторичная в две линии — C5, та же рамка, что у фото. */
.btn--s2{background:transparent;border-color:var(--deep);color:var(--deep);
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--deep-a35)}
.btn--s2:hover{color:var(--deep);background:var(--sky)}
.btn--block{display:flex;width:100%}

/* --- C5. Рамки и носители фото -------------------------------------------- */
.frame{padding:var(--frame-gap);border:1px solid var(--deep);border-radius:var(--r-m);background:var(--paper)}
.frame img{width:100%;border-radius:var(--frame-gap);object-fit:cover;aspect-ratio:4/5;height:auto}
.arch{padding:var(--frame-gap);border:1px solid var(--deep);background:var(--paper);
  border-radius:200px 200px var(--r-m) var(--r-m);width:62%;max-width:300px}
.arch img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:194px 194px var(--frame-gap) var(--frame-gap)}
.pol{margin:0;background:var(--paper);padding:var(--pol-pad) var(--pol-pad) 0;
  box-shadow:var(--pol-shadow),0 0 0 1px var(--line-s);transform:rotate(-2deg)}
.pol:nth-child(even){transform:rotate(1.8deg);margin-top:var(--s4)}
.pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pol figcaption{font-family:var(--hand);font-size:var(--t-hand);line-height:1.1;color:var(--deep);
  padding:var(--s2) var(--s1) var(--s3)}
.overlap-card{position:relative;margin:calc(-1 * var(--overlap)) var(--s3) 0;background:var(--sand);
  border:1px solid var(--sand-line);border-radius:var(--r-m);padding:var(--s5);box-shadow:var(--lift)}
.overlap-card::before,.letter::before{content:'';position:absolute;inset:var(--frame-gap);
  border:1px solid var(--sand-line);border-radius:var(--frame-gap);pointer-events:none}
.overlap-card>*{position:relative}
.overlap-card p{margin:var(--s3) 0 0}
.overlap-card .btn{margin-top:var(--s5)}
/* Три печати по 80 px на 360 не встают с шагом 8 px: карточка там 254 px. */

@media(min-width:760px){
  .overlap-card{margin:calc(-1 * var(--overlap-l)) var(--s7) 0}
}
@media(min-width:1000px){
  .overlap-card{grid-column:2;grid-row:1;margin:0 var(--s6) 0 0}
  .overlap--left .overlap-card{grid-column:1;margin:0 0 0 var(--s6);max-width:460px}
}

/* --- C6. Карусель — один механизм на весь сайт ---------------------------- */
.rail{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--s5) var(--s4);margin:0 calc(-1 * var(--s4));scrollbar-width:none;
  scroll-padding:0 var(--s4)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none;width:84%;max-width:420px}
.rail--gal>*{width:62%;max-width:280px}
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.rail-nav{display:none}
@media(min-width:760px){
  .rail{padding:var(--s5) var(--s5);margin:0 calc(-1 * var(--s5));scroll-padding:0 var(--s5)}
  .rail>*{width:calc((100% - var(--s4)) / 2)}
  .rail--gal>*{width:30%}
}
@media(min-width:1000px){
  .rail{margin:0;padding:var(--s5) 0;scroll-padding:0}
  .rail>*{width:calc((100% - 2 * var(--s4)) / 3)}
  .rail--gal>*{width:calc((100% - 3 * var(--s4)) / 4)}
  .rail-nav{display:flex;gap:var(--s2)}
  .rail-nav[hidden]{display:none}
  .rail-nav button{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--deep);
    background:var(--paper);color:var(--deep);cursor:pointer;display:grid;place-items:center}
  .rail-nav svg{width:18px;height:18px}
}

/* --- C11. Штриховые рисунки ----------------------------------------------- */
.orn svg path,.orn svg ellipse,.orn svg circle,.orn svg rect,
.divider svg path,.divider svg ellipse,.divider svg circle,
.hill svg path,.hill svg ellipse,.hill svg circle,.hill svg rect,
.svc-art svg path,.svc-art svg ellipse,.svc-art svg circle,.svc-art svg rect,
.cc-spr svg path,.cc-spr svg ellipse,.cc-spr svg circle,.cc-spr svg rect,
.cc-hill svg path,.cc-hill svg ellipse,.cc-hill svg circle,.cc-hill svg rect,
.cc-br svg path,.cc-br svg ellipse,.cc-br svg circle,.cc-br svg rect{
  fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.orn svg .t,.divider svg .t,.hill svg .t,.svc-art svg .t,.cc-spr svg .t,.cc-hill svg .t,.cc-br svg .t{stroke-width:.8}
.orn{position:absolute;color:var(--orn);pointer-events:none;z-index:0}
.orn svg,.divider svg,.hill svg{display:block;width:100%;height:auto}
.has-orn{position:relative;overflow:hidden}
.has-orn>.wrap{position:relative;z-index:1}
.divider{color:var(--orn);width:180px;margin-top:var(--s2)}
/* Холм — внутри нижнего отступа секции, а не добавкой к нему (W4). */
.hill{color:var(--orn);width:min(340px,86%);margin:var(--s5) 0 calc(-1 * var(--sec-y)) auto}
.hill--foot{color:var(--orn-deep);width:220px;margin:0 0 var(--s5)}
/* REDESIGN-v2.24 R4: своя картинка подвала — высотой как мельницы (220 × 236 / 460). */
.foot-pic{display:block;height:113px;width:auto;max-width:100%;object-fit:contain;object-position:left bottom;margin:0 0 var(--s5)}
/* Краевые места: рисунок срезан краем экрана, видно 40–60 %. */
.orn--r-top{right:-34px;top:var(--s2);width:92px}
.orn--r-top-w{right:-46px;top:var(--s3);width:150px;transform:scaleX(-1) rotate(-12deg)}
.orn--mill-r{right:-40px;top:var(--s4);width:104px}
.orn--mill-r-l{right:-50px;top:var(--s6);width:150px}
.orn--l-tall{left:-56px;top:0;width:88px;transform:rotate(180deg)}
.orn--l-mid{left:-36px;top:var(--s7);width:96px}
.orn--r-bot{right:-40px;bottom:var(--s4);width:140px;transform:rotate(-8deg)}
.orn--r-bot-f{right:-50px;bottom:var(--s2);width:150px;transform:scaleX(-1)}
.orn--r-seo{right:-30px;top:0;width:72px}
.orn>img{display:block;width:100%;height:auto}
.orn--in{right:var(--s2);top:var(--s2);width:96px}
@media(min-width:1000px){
  .orn--r-top{right:0;width:130px}
  .orn--mill-r,.orn--mill-r-l{right:var(--s5)}
  .orn--l-tall,.orn--l-mid{left:0}
  .orn--r-bot,.orn--r-bot-f{right:0}
}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5;
  max-height:calc(100svh - var(--hdr) - var(--s8));min-height:420px;overflow:hidden}
.slide>img,.slide>picture,.slide>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--slide-scrim)}
/* REDESIGN-v2.26 W3: видео слайда — поверх обложки, проявляется, когда заиграло; скрим — над ним. */
.slide-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none}
.slide-v.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.slide-v{display:none}}
.slide-body .btn{margin-top:var(--s5)}
/* Точки и счётчик — на уровне кнопки справа; на узком экране кнопка
   во всю ширину, и они встают над ней. */

/* От 1000 px слайдер — в рамке героя (REDESIGN-v2.5 X4): внутри контейнера,
   1096 px, 2:1, скругление, 24 px от полосы адреса. */
@media(min-width:1000px){
  .slide{aspect-ratio:2/1;max-height:none;min-height:0}
}
/* ⚠️ Угол задан для 390 px. На 1280 тот же −1,6° даёт перепад в 36 px
   по длине ленты, и лента награды закрывала подпись «Яндекс Карты» —
   так и в эталоне. На широком экране угол меньше, перепад тот же на глаз. */
/* Ленты — в пределах контейнера, до 1128 px: края выходят за фото героя
   на 16 px — так задумано (X4). */


/* C4. Письмо Элен. */
.letter{position:relative;background:var(--sand);border:1px solid var(--sand-line);border-radius:var(--r-m);
  padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--lift)}
.letter>*:not(.orn){position:relative;z-index:1}
.letter-grid{display:grid;gap:var(--s5)}
.letter-hello{color:var(--deep);line-height:1.15}
/* Греческое приветствие — --sans: у Prata нет греческих букв. */
.grk-hello{font-family:var(--sans);font-weight:400;letter-spacing:.01em}
.letter-hello-sub{display:block;font-family:var(--sans);font-size:var(--t-sm);font-weight:400;
  color:var(--ink-2);margin-top:var(--s1)}
.letter-text{margin-top:var(--s4);font-size:var(--t-lede);line-height:1.55;max-width:40ch}
.letter-text p{margin:0}
.letter-text p+p{margin-top:var(--s3)}
.sign{margin:var(--s4) 0 0;font-family:var(--hand);font-size:var(--t-hand-xl);line-height:1;color:var(--deep)}
.sign small{display:block;font-family:var(--sans);font-size:var(--t-sm);line-height:1.45;
  color:var(--ink-2);margin-top:var(--s2)}
@media(min-width:1000px){
  .letter{padding:var(--s7)}
  .letter-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--s7)}
  .letter .arch{width:100%}
}

/* C8. Вечера недели. */
.day{position:relative;background:var(--sky);border:1px solid var(--deep);border-radius:var(--r-m);
  padding:var(--s4);box-shadow:inset 0 0 0 5px var(--sky),inset 0 0 0 6px var(--deep-a35)}
.day .frame{margin-top:var(--s4)}
.facts2{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s4)}
.fact{padding:0 var(--s3)}
.fact:first-child{padding-left:0}
.fact+.fact{border-left:1px dashed var(--deep)}
.fact b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.1;color:var(--deep)}
.fact span{display:block;font-size:var(--t-xs);line-height:1.35;color:var(--ink-2);margin-top:var(--s1)}
.day .btn{margin-top:var(--s4)}
.stamp{position:absolute;top:calc(-1 * var(--s3));right:var(--s3);background:var(--brass);color:var(--ink);
  font-size:var(--t-xs);font-weight:700;line-height:1;padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  transform:rotate(4deg);box-shadow:0 0 0 3px var(--paper)}

/* О таверне — холм с мельницами под карточкой. */
.has-orn .hill{position:relative;z-index:1}

/* C9. Галерея — у полароидов свой поворот, ленте нужен запас сверху. */
.rail--gal{padding-top:var(--s6)}

/* Как нас найти. */
.way{display:grid;gap:var(--s5);margin-top:var(--s5)}
.way-map iframe{display:block;width:100%;aspect-ratio:1/1;border:0;border-radius:var(--frame-gap);background:var(--sky)}
/* 08.10: своё изображение карты вместо Яндекса — та же рамка, кадр по центру. */
.way-map--img a{display:block;height:100%}
.way-map--img img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--frame-gap);background:var(--sky)}
.way-kv dd a:not(.way-link){color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.way-card{background:var(--sand);border:1px solid var(--sand-line);border-radius:var(--r-m);padding:var(--s5)}
.way-card .btn{margin-top:var(--s5)}
.way-pics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
.way-pics img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--frame-gap)}
.way-kv{margin:0;display:grid;gap:var(--s3)}
.way-kv div{border-top:1px solid var(--sand-line);padding-top:var(--s3)}
.way-kv div:first-child{border-top:0;padding-top:0}
.way-kv dt{font-size:var(--t-sm);color:var(--ink-2)}
.way-kv dd{margin:0;font-weight:700}
@media(min-width:1000px){
  .way{grid-template-columns:7fr 5fr;align-items:stretch}
  .way-map iframe,.way-map--img img{aspect-ratio:auto;height:100%;min-height:440px}
}

/* SEO-текст: подзаголовок рукописным — одно из пяти мест Caveat. */
.seo-sub{display:block;font-family:var(--hand);font-size:var(--t-hand-l);color:var(--blue);margin-top:var(--s1)}

/* --- «Большой стол» /bankety/ — REDESIGN-v2 §6 ------------------------------- */
.bq-head{padding-bottom:var(--s6)}
/* На узком экране карточка первого экрана во всю ширину колонки:
   с боковыми полями она оставляла пояснению 286 px, и оно шло
   в три строки при допустимых двух. */
@media(max-width:759px){
  .bq-head .overlap-card{margin-left:0;margin-right:0;padding:var(--s5) var(--s4)}
}
.bq-head h1{font-size:var(--t-h1)}
.bq-head .lede{margin:var(--s3) 0 0;font-size:var(--t-body);color:var(--ink-2)}
.bq-head .btn{margin-top:var(--s4)}
.bq-steps{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s4)}
@media(min-width:760px){
  .bq-steps{grid-template-columns:repeat(2,1fr)}
}
/* Колонок столько, сколько шагов показано: дегустация и договор
   выводятся только с данными, и в сетке на четыре оставалась дыра. */
@media(min-width:1000px){
  .bq-steps{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column}
  .bq-head .overlap-card{align-self:center}
}

/* --- Герой в рамке «Большого стола» — REDESIGN-v2.5 X4, X7, X8 -------------
   Один компонент на внутренние страницы; главная — тот же формат у слайдера
   (.hero2 ниже). До 760 px фото во всю ширину экрана 3:2 без скругления,
   карточка --sand наезжает снизу. От 1000 px — внутри контейнера, 1096 px,
   2:1, скругление 10 px, карточка справа поверх фото. Шире 1096 кадр
   не растягивается: на экране 1843 px он больше не мылится. */
.hero-frame{--frame-w:calc(var(--wrap) - 2 * var(--s6));position:relative;padding-bottom:var(--s6)}
.hero-frame__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--deep)}
.hero-frame__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-frame__slide.is-on{opacity:1}
.hero-frame__slide img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.hero-frame__slide{transition:none}}
/* Точки — внизу слева, чтобы не спорить с карточкой. Видимая 9 px, зона 44. */
.hero-frame__dots{position:absolute;left:var(--s4);bottom:calc(var(--overlap) + var(--s3));z-index:2;display:flex}
.hero-frame__dots button{position:relative;width:9px;height:9px;padding:0;margin:0 var(--s2) 0 0;border-radius:50%;
  border:1px solid var(--ink-inv);background:var(--scrim-2);cursor:pointer}
.hero-frame__dots button::after{content:'';position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);
  transform:translate(-50%,-50%)}
.hero-frame__dots button[aria-current="true"]{background:var(--brass);border-color:var(--brass)}
.hero-frame__card{margin:calc(-1 * var(--overlap)) var(--s4) 0}
.hero-frame--bare .hero-frame__card{margin-top:var(--s4)}
.hero-frame h1{font-size:var(--t-h1)}
.hero-frame .lede{margin:var(--s3) 0 0;font-size:var(--t-body);color:var(--ink-2)}
.hero-frame .btn{margin-top:var(--s4)}
@media(min-width:760px){
  .hero-frame{width:calc(100% - 2 * var(--s5));max-width:var(--frame-w);margin:var(--s3) auto 0}
  .hero-frame__media{border-radius:var(--r-m)}
  .hero-frame__card{margin:calc(-1 * var(--overlap-l)) var(--s7) 0}
  .hero-frame__dots{bottom:calc(var(--overlap-l) + var(--s3))}
}
@media(min-width:1000px){
  .hero-frame{margin-top:var(--s5)}
  .hero-frame__media{aspect-ratio:2/1}
  .hero-frame__card{position:absolute;right:var(--s6);top:50%;transform:translateY(-50%);margin:0;
    width:min(440px,42%);max-height:calc(100% - 2 * var(--s5));overflow:auto}
  .hero-frame--bare .hero-frame__card{position:relative;right:auto;top:auto;transform:none;width:auto;max-width:640px}
  .hero-frame__dots{left:var(--s5);bottom:var(--s5)}
}

/* Текст на фото — REDESIGN-v2.6 Y5: тот же размер рамки, но вместо карточки
   --sand заголовок и кнопка прямо на кадре, слева внизу, со скримом
   главного слайдера. На телефоне кадр 4:5 и текст внизу, как на главной. */
.hero-frame--on{padding-bottom:0}
.hero-frame--on .hero-frame__media{aspect-ratio:4/5;max-height:calc(100svh - var(--hdr) - var(--s8));min-height:420px}
.hero-frame--on .hero-frame__media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--slide-scrim)}
.hero-frame--on .hero-frame__slide img{object-fit:cover}
.hero-frame--on .hero-frame__card{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:0 var(--s4) var(--s7);color:var(--ink-inv)}
.hero-frame--on h1{color:var(--ink-inv)}
.hero-frame--on .hero-frame__card p,.hero-frame--on .lede{color:var(--ink-inv-2)}
.hero-frame--on .btn{margin-top:var(--s5)}
.hero-frame--on .btn--s2{border-color:var(--ink-inv);color:var(--ink-inv)}
.hero-frame--on .hero-frame__dots{left:auto;right:var(--s5);top:var(--s4);bottom:auto;z-index:3}
@media(min-width:760px){
  .hero-frame--on .hero-frame__card{margin:0;padding:0 var(--s7) var(--s7)}
  .hero-frame--on .hero-frame__dots{bottom:auto}
}
@media(min-width:1000px){
  .hero-frame--on .hero-frame__media{aspect-ratio:2/1;max-height:none;min-height:0}
  .hero-frame--on .hero-frame__card{left:0;right:auto;top:auto;bottom:0;transform:none;width:auto;
    max-width:calc(560px + 2 * var(--s7));max-height:none;overflow:visible;padding:0 var(--s7) var(--s7)}
  .hero-frame--on .hero-frame__dots{left:auto;right:var(--s7);top:auto;bottom:var(--s7)}
}
.year{position:relative;padding:0 0 var(--s6) var(--s6)}
.year:last-child{padding-bottom:0}
.year::before{content:'';position:absolute;left:0;top:var(--s3);width:12px;height:12px;border-radius:50%;
  background:var(--brass)}
.year p{margin:var(--s2) 0 0;max-width:var(--measure)}
@media(min-width:1000px){
  .year{width:50%;padding:0 var(--s7) var(--s7) 0;text-align:right}
  .year::before{left:auto;right:-6px}
  .year:nth-child(even){margin-left:50%;padding:0 0 var(--s7) var(--s7);text-align:left}
  .year:nth-child(even)::before{right:auto;left:-6px}
}
/* Команда — портреты в арке. */
.team{display:grid;gap:var(--s6);margin-top:var(--s5)}
.team-m .arch{margin-bottom:var(--s4)}
.team-line{margin:var(--s2) 0 0}
@media(min-width:760px){.team{grid-template-columns:repeat(auto-fit,minmax(220px,320px))}.team-m .arch{width:100%}}
/* C13. Цитаты. */
.quotes{display:grid;gap:var(--s6);margin-top:var(--s5)}
.quote{margin:0}
.quote p{margin:0;font-family:var(--serif);font-size:var(--t-h2);line-height:1.25}
.quote footer{margin-top:var(--s3);font-size:var(--t-sm);color:var(--ink-2)}
@media(min-width:1000px){.quotes{grid-template-columns:1fr 1fr}}
/* Печати зала — три в ряд. */
.seals--hall{margin:var(--s4) 0 var(--s2)}
/* Кнопка видео в письме: круг и подпись, плеер — по нажатию. */
.play-box{margin-top:var(--s5)}
.play{display:inline-flex;align-items:center;gap:var(--s3);min-height:var(--tap);background:none;border:0;
  padding:0;cursor:pointer;font:inherit;font-weight:700;color:var(--deep)}
.play i{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--deep);color:var(--ink-inv);
  display:grid;place-items:center}
.play svg{width:16px;height:16px;margin-left:3px}
/* .vbox и .vplay — зацепки site.js для плеера по нажатию. В письме
   до нажатия это компактная кнопка, после — обычный кадр 16:9. */
.play-box:not(:has(iframe)){aspect-ratio:auto;overflow:visible;border-radius:0}
.play-box .vplay{position:static;width:auto;height:auto}
.play-box .vplay::before{display:none}
.play-box .vplay-t{font-size:var(--t-body)}

/* --- R6: остальные страницы, REDESIGN-v2 §8 ---------------------------------- */
/* Танцы: полароид над текстом блока. */
.dn-pol{width:70%;max-width:300px;margin-bottom:var(--s5)}
.dn-blocks>div:nth-child(even) .dn-pol{margin-top:0}
/* Карта «Свои»: острова — карточки C8 на --sky в двойной рамке, лентой. */
.isle{background:var(--sky);border:1px solid var(--deep);border-radius:var(--r-m);padding:var(--s5) var(--s4);
  text-align:center;box-shadow:inset 0 0 0 5px var(--sky),inset 0 0 0 6px var(--deep-a35)}
.isle .price{font-size:var(--t-h2);color:var(--deep)}
@media(max-width:999px){.rail.isles>*{max-width:320px}}
/* Сертификаты: номиналы в рамке, выбранный — 2 px --blue. */
.nom{padding:var(--s5) var(--s4)}
.nom--on{border:2px solid var(--blue)}
/* Окно видео. */
/* Документ из формы — REDESIGN-v2.19 П10: окно поверх формы, текст
   прокручивается внутри, шапка с крестиком всегда видна. На телефоне —
   на весь экран. */
.docm{width:min(760px,calc(100vw - 2 * var(--s4)));max-width:none;height:min(86vh,900px);height:min(86dvh,900px);
  max-height:none;padding:0;border:0;border-radius:var(--r-m);background:var(--paper);color:var(--ink);overflow:hidden}
.docm[open]{display:flex;flex-direction:column}
.docm::backdrop{background:var(--scrim-3)}
.docm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s3) var(--s5);border-bottom:1px solid var(--line-s);flex:none}
.docm-h{margin:0;font-family:var(--serif);font-size:22px;line-height:1.25;color:var(--ink)}
.docm-ed{margin:4px 0 0;font-size:var(--t-sm);color:var(--ink-2)}
.docm-x{flex:none;width:var(--tap);height:var(--tap);border:1px solid var(--line-s);border-radius:50%;
  background:var(--paper);color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
.docm-x:hover{background:var(--wash)}
.docm-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--s4) var(--s5) var(--s6)}
.docm-body h2{font-size:22px;margin-top:var(--s5)}
.docm-body h2:first-child{margin-top:0}
.docm-body h3{font-size:17px}
.docm.is-loading .docm-body{min-height:120px;background:linear-gradient(90deg,var(--wash),var(--paper),var(--wash)) 0 0/200% 100%}
@media(max-width:760px){
  .docm{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;margin:0}
  .docm-head{padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--s3) var(--s3) var(--s4)}
  .docm-h{font-size:19px}
  .docm-body{padding:var(--s4) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom,0px))}
}
.vmodal{width:min(960px,calc(100vw - 2 * var(--s4)));padding:0;border:0;border-radius:var(--r-m);
  background:var(--deep);overflow:visible}
.vmodal::backdrop{background:var(--scrim-3)}
.vmodal-box{aspect-ratio:16/9}
.vmodal-box iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--r-m)}
.vmodal-x{position:absolute;right:0;top:calc(-1 * var(--tap) - var(--s2));width:var(--tap);height:var(--tap);
  border:0;border-radius:50%;background:var(--paper);color:var(--ink);font-size:var(--t-h3);cursor:pointer}
.letter .play{margin-top:var(--s5)}
/* Видео в галерее: кадр — обложка, круглая кнопка ▶ поверх. */
.pol-play{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.pol-play .pv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;
  border-radius:50%;background:var(--deep-a90);color:var(--ink-inv);display:grid;place-items:center}
.pol-play .pv svg{width:20px;height:20px;margin-left:var(--s1)}

/* --- увеличение фото — REDESIGN-v2.2 U9 --------------------------------- */
/* Превью — кнопка с лупой в углу: видно, что фото нажимается. */
.zoom{position:relative;display:block;padding:0;border:0;background:none;
  color:inherit;cursor:zoom-in;overflow:hidden}
.zoom img{display:block}
.pol .zoom{width:100%}
.zi{position:absolute;right:var(--s1);bottom:var(--s1);width:22px;height:22px;border-radius:50%;
  background:var(--scrim-zi);color:var(--ink-inv);display:grid;place-items:center;pointer-events:none}
.zi svg{width:14px;height:14px}
.lb{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;
  margin:0;padding:0;border:0;background:transparent;color:var(--ink-inv)}
.lb::backdrop{background:var(--scrim-lb)}
.lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s7) var(--s4)}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.lb-img{display:block;max-width:min(94vw,1100px);max-height:70vh;max-height:70dvh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-s)}
/* Видео в лайтбоксе — U7: файл в своих пропорциях, 9:16 тоже; ссылка 16:9. */
.lb-play video{display:block;max-width:min(94vw,1100px);max-height:70vh;max-height:70dvh;width:auto;height:auto;
  border-radius:var(--r-s);background:var(--ink)}
.lb-play iframe{display:block;width:min(94vw,1100px,calc(70vh * 16 / 9));aspect-ratio:16/9;border:0;
  border-radius:var(--r-s);background:var(--ink)}
.lb-play[hidden],.lb-img[hidden]{display:none}
.lb-cap{max-width:var(--measure);text-align:center;font-size:var(--t-sm);color:var(--ink-inv-2)}
.lb-t{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s3);margin-bottom:var(--s1);
  font-family:var(--serif);font-weight:400;font-size:var(--t-h3);color:var(--ink-inv)}
.lb-t:empty,.lb-text:empty{display:none}
.lb-price{white-space:nowrap}
.lb-x{position:fixed;top:calc(var(--s3) + env(safe-area-inset-top,0px));right:var(--s3);
  width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--ink-inv-2);
  background:var(--scrim-2);color:var(--ink-inv);font-size:var(--t-h3);line-height:1;cursor:pointer}
.lb-nav{position:fixed;left:0;right:0;bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;gap:var(--s4)}
.lb-nav[hidden]{display:none}
.lb-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--ink-inv-2);
  background:transparent;color:var(--ink-inv);font-size:var(--t-h3);cursor:pointer}
.lb :focus-visible{outline-color:var(--brass)}
/* Страница под окном не прокручивается. */
.lb-open{overflow:hidden}
.ticket{position:relative;background:var(--sand);border:1px solid var(--deep);border-radius:var(--r-m);
  padding:var(--s6) var(--s5) var(--s5);text-align:center;
  box-shadow:inset 0 0 0 5px var(--sand),inset 0 0 0 6px var(--deep-a45)}
.ticket-photo{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  border-radius:var(--r-s);margin:0 0 var(--s5)}
.ticket-gr,.season-gr{font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  font-size:var(--t-sm);color:var(--brass-ink);margin:0}
.ticket-h{font-size:var(--t-h2);line-height:1.15;color:var(--deep);margin:var(--s1) 0 0}
.ticket-when,.season-when{font-family:var(--hand);font-size:var(--t-hand);line-height:1.2;
  color:var(--blue);margin:var(--s1) 0 0}
.ticket-div,.season-div{width:170px;margin:var(--s2) auto 0}
.ticket-text{margin:var(--s3) auto 0;max-width:var(--measure)}
.ticket-rows{list-style:none;margin:var(--s4) 0 0;padding:var(--s2) 0;text-align:left;
  border-top:1px dashed var(--deep-a35);border-bottom:1px dashed var(--deep-a35)}
.trow{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:var(--s2) 0;min-height:var(--tap)}
.trow+.trow{border-top:1px dashed var(--deep-a35)}
.trow-name{font-weight:600;color:var(--ink)}
a.trow-name{color:var(--deep);text-decoration:underline;text-underline-offset:3px}
/* Нажимается вся строка скидки — с процентом и стрелкой: зона не ниже 44 px. */
a.trow-name::after{content:'';position:absolute;inset:0}
.trow-name small{display:block;font-weight:400;font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s1)}
.trow-price{display:flex;align-items:baseline;gap:var(--s2);white-space:nowrap}
.trow-price s{font-size:var(--t-sm);color:var(--ink-2)}
.trow-price b{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);color:var(--deep)}
/* Латунная плашка с процентом — единственное место на сайте, где она
   разрешена (A3). */
.pct{background:var(--brass);color:var(--ink);font-weight:700;font-size:var(--t-sm);
  padding:var(--s1) var(--s2);border-radius:var(--r-s)}
.trow-go{color:var(--deep)}
.ticket-terms{margin:var(--s3) 0 0;font-size:var(--t-xs);color:var(--ink-2)}
.ticket-act{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin:var(--s4) 0 0}
.ticket-act .zoom{cursor:zoom-in}
.season{position:relative;background:var(--sand);border:1px solid var(--deep);
  border-radius:170px 170px var(--r-m) var(--r-m);padding:var(--s7) var(--s5) var(--s5);
  box-shadow:inset 0 0 0 6px var(--sand),inset 0 0 0 7px var(--deep-a45),var(--lift);text-align:center}
.season h2{font-size:var(--t-h1);line-height:1.1;color:var(--deep);margin:var(--s1) 0 0}
/* Чип временного в ленте разделов — латунная рамка и точка (U6). */
.tabs .tab--temp{border-color:var(--brass-ink);color:var(--brass-ink);font-weight:600;background:var(--brass-wash);
  display:inline-flex;align-items:center;gap:var(--s2)}
.tab--temp i{width:8px;height:8px;border-radius:50%;background:var(--brass)}
@media(min-width:760px){
  .ticket,.season{max-width:760px;margin-left:auto;margin-right:auto;width:100%}
  .ticket{padding:var(--s7) var(--s7) var(--s6)}
  .season{border-radius:260px 260px var(--r-m) var(--r-m);padding:80px var(--s7) var(--s6)}
}

/* «Друзья таверны» — REDESIGN-v2.11, эталон redesign-v2/taplink-reference.html. */
.sec-sky{background:var(--sky)}
.ly-stores{grid-template-columns:repeat(2,auto);justify-content:start;margin-top:var(--s4)}
/* Задача по /taplink/, п. 3: до 760 px — карточка уже, видно полторы. */


/* --- приложение — REDESIGN-v2.2 U3 ---------------------------------------- */
/* ⚠️ Фон --sky на целую секцию — по U2, в обход правила токенов
   «--sky — только плашки»: v2.2 новее и прав при расхождении. */
.app{background:var(--sky)}
.app-grid{display:grid;gap:var(--s5);grid-template-areas:"head" "phone" "body"}
.app-head{grid-area:head}
.app-head .lede{margin:var(--s2) 0 0}
.phone{grid-area:phone;justify-self:center;width:58%;max-width:250px;padding:var(--s2);background:var(--ink);
  border-radius:34px;box-shadow:var(--lift);transform:rotate(-3deg)}
.phone img{display:block;width:100%;height:auto;border-radius:26px}
/* Экраны приложения — REDESIGN-v2.5 X1: стопкой, видимый — .on, смена
   проявлением. Пропорция — экрана телефона, 1080 × 2113. */
.phone__screens{position:relative;aspect-ratio:1080/2113;border-radius:26px;overflow:hidden;background:var(--wash)}
.phone__screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.phone__screens img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.phone__screens img{transition:none}}
.phone__dots{grid-area:phone;align-self:end;justify-self:center;display:flex;margin-bottom:calc(-1 * var(--s6))}
.phone__dots button{position:relative;width:10px;height:10px;border-radius:50%;border:1px solid var(--deep);
  background:transparent;padding:0;margin:0 var(--s2);cursor:pointer}
.phone__dots button::after{content:'';position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);
  transform:translate(-50%,-50%)}
.phone__dots button[aria-current="true"]{background:var(--deep)}
.app-body{grid-area:body}
.app-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.app-list li{position:relative;padding-left:var(--s5)}
.app-list li::before{content:'';position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--deep);box-shadow:inset 0 0 0 2px var(--sky),inset 0 0 0 6px var(--brass)}
.app-list b{display:block;font-weight:600}
.app-list span{display:block;color:var(--ink-2)}
.stores{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s5)}
.store{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:0 var(--s4);
  border-radius:var(--r-m);background:var(--ink);color:var(--ink-inv);text-decoration:none;
  font-weight:600;font-size:var(--t-body);line-height:1.1}
.store:hover{color:var(--ink-inv)}
.store small{font-weight:500;font-size:var(--t-xs);line-height:1.2;color:var(--ink-inv-2)}
.store--badge{background:none;padding:0;min-height:48px}
/* REDESIGN-v2.24 R3: цвет кнопок магазинов. */
.stores--blue .store{background:var(--blue);color:var(--ink-inv)}
.stores--deep .store{background:var(--deep);color:var(--ink-inv)}
.stores--blue .store small{color:var(--ink-inv)}
.stores--deep .store small{color:var(--ink-inv-2)}
.stores--line .store{background:var(--paper);color:var(--deep);box-shadow:inset 0 0 0 1px var(--deep)}
.stores--line .store small{color:var(--ink-2)}
.stores--blue .store:hover,.stores--deep .store:hover{color:var(--ink-inv)}
.stores--line .store:hover{color:var(--deep)}
.store--badge img{height:48px;width:auto}
.app-qr{display:none}
@media(min-width:1000px){
  .app-grid{grid-template-columns:7fr 5fr;grid-template-areas:"head phone" "body phone";column-gap:var(--s7);align-items:start}
  .phone{width:260px;max-width:none}
  .stores{max-width:420px}
  .app-qr{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s5);max-width:420px}
  .app-qr img{width:112px;height:112px;flex:none;border-radius:var(--r-s);background:var(--paper)}
  .app-qr p{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
}

/* --- «Таверна не только в зале» — U4 ---------------------------------------- */
.svc{background:var(--paper);border:1px solid var(--deep);border-radius:var(--r-m);padding:var(--s4);
  box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px var(--deep-a45);display:flex;flex-direction:column}
.svc h3{font-size:var(--t-h3);margin:var(--s4) 0 0}
.svc p{margin:var(--s2) 0 0;color:var(--ink-2);font-size:var(--t-sm);flex:1}
.svc .btn{margin-top:var(--s4)}
/* Сертификат — --sand и двойная линия; вырезов нет — REDESIGN-v2.4 W3. */
/* «Как это было» — REDESIGN-v2.5 X11: карточка той же рамки, фото сверху. */
.case .frame{margin:0}
.case h3{margin-top:var(--s4)}

/* --- частые вопросы — REDESIGN-v2.2 U5 ----------------------------------- */
/* Образец — evvia.net: вопрос засечным, слева тёмный квадрат 24 px
   с «+», у открытого «+» поворачивается в «−». Без скрипта. */
.qa-wrap{max-width:calc(760px + 2 * var(--s4))}
.qa-list{margin-top:var(--s4);border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) 0;
  cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa-q{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.3;color:var(--ink)}
.qa-i{position:relative;flex:none;width:24px;height:24px;border-radius:3px;background:var(--deep)}
.qa-i::before,.qa-i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;
  margin:-1px 0 0 -6px;background:var(--ink-inv);transition:transform .2s}
.qa-i::after{transform:rotate(90deg)}
.qa[open] .qa-i::after{transform:rotate(0deg)}
.qa p{margin:0 0 var(--s4);padding-left:calc(24px + var(--s4));max-width:60ch;font-size:var(--t-body);color:var(--ink-2)}
/* REDESIGN-v2.27 L1: ссылки в ответе — подчёркнутые, --blue. */
.qa-a a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.qa-a ul,.qa-a ol{margin:0 0 var(--s4);padding-left:calc(24px + var(--s4) + 1.2em);color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.qa-i::before,.qa-i::after{transition:none}}

/* --- сезонное меню кнопкой и блоком под каталогом — REDESIGN-v2.4 W1 ------- */
/* Латунная рамка и точка: отличается от соседей, но не перетягивает. */
.tabs .tab--season{border-color:var(--brass-ink);color:var(--brass-ink);background:var(--brass-wash);gap:var(--s2)}
.tab--season i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brass)}
.temp-bottom{margin-top:var(--s6);margin-bottom:var(--s6)}
/* Якорь под липкой шапкой и лентой разделов: заголовок не уезжает под них. */
.season,.season-anchor{scroll-margin-top:calc(var(--hdr) + var(--mtabs) + var(--s4))}


/* --- Видео-обложка — REDESIGN-v2.5 X5 ---------------------------------------
   Понятно, что это видео: круглая ▶ по центру, длительность справа внизу,
   подпись с ▶ слева внизу на лёгком скриме. Плеер встаёт на место обложки
   того же размера. */
.vcover{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:var(--deep)}
.vcover__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;
  color:var(--ink-inv);font:inherit;text-align:left}
.vcover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcover__btn::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to top,var(--scrim-3),var(--scrim-0))}
.vcover__play{position:absolute;left:50%;top:50%;z-index:1;width:60px;height:60px;border-radius:50%;
  transform:translate(-50%,-50%);display:grid;place-items:center;background:var(--play-bg);
  border:2px solid var(--ink-inv);transition:transform .2s ease}
.vcover__play svg{width:26px;height:26px;fill:var(--ink-inv);margin-left:var(--s1)}
.vcover__btn:hover .vcover__play,.vcover__btn:focus-visible .vcover__play{transform:translate(-50%,-50%) scale(1.06)}
.vcover__btn:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.vcover__cap{position:absolute;left:var(--s4);bottom:var(--s4);z-index:1;display:flex;align-items:center;gap:var(--s2);
  font-weight:600;font-size:var(--t-sm);color:var(--ink-inv);max-width:calc(100% - 96px)}
.vcover__cap svg{width:16px;height:16px;fill:currentColor;flex:none}
.vcover__dur{position:absolute;right:var(--s4);bottom:var(--s4);z-index:1;padding:var(--s1) var(--s2);border-radius:var(--r-s);
  background:var(--dur-bg);color:var(--ink-inv);font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums}
.vcover__player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
@media(min-width:760px){
  .vcover__play{width:72px;height:72px}
  .vcover__play svg{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){.vcover__play{transition:none}}

/* Текст из редактора админки — REDESIGN-v2.7 Z1, Z2 (Porto\Rich):
   колонка до 720 px, Prata в заголовках, Manrope 17 px, 1,65. */
.rich{font-size:1.0625rem;line-height:1.65}
.rich--col{max-width:720px}
.rich h2{margin:0 0 var(--s4)}
.rich h3{font-family:var(--serif);font-weight:400;margin:var(--s5) 0 var(--s3)}
.rich p,.rich ul,.rich ol{margin:0 0 var(--s4)}
.rich ul,.rich ol{padding-left:1.4em}
.rich li{margin:0 0 var(--s2)}
.rich a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.rich>:last-child{margin-bottom:0}
/* Якорь блока открывается ниже липкой шапки — Z2, #nagrady. */
.anchor-gap{scroll-margin-top:calc(var(--hdr) + var(--s4))}
/* Награды — REDESIGN-v2.17, эталон redesign-v2/awards-reference.html.
   Тёмная «табличка»: внутренняя рамка как у тёмной карточки дня, меандр
   латунью сверху и снизу. Картинки без рамки и обрезки, тень по контуру. */
.awards{position:relative;background:var(--deep);border-radius:var(--r-m);box-shadow:var(--elev);color:var(--ink-inv);
  padding:22px 18px 26px;overflow:hidden;isolation:isolate}
.awards::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-inv);border-radius:6px;pointer-events:none;z-index:2}
.awards h2{font-family:var(--serif);font-weight:400;font-size:1.625rem;line-height:1.2;margin:0;color:var(--ink-inv)}
/* Сцена: до 340 px на телефоне, до 380 на десктопе, свечение латунью. */
.awards__art{position:relative;width:100%;max-width:340px;margin:4px auto 8px}
/* 3 — главное по центру, медали у нижних углов поверх него (N2). */
.awards__art--trio{aspect-ratio:1/1.02}
.awards__art--trio .zoom{position:absolute}
.awards__art--trio .awards__medal--l{left:0;transform:rotate(-6deg)}
.awards__art--trio .awards__medal--r{right:0;transform:rotate(6deg)}
@media (hover:hover){.awards__art--trio .awards__medal--l:hover{transform:rotate(-6deg) translateY(-4px)}
  .awards__art--trio .awards__medal--r:hover{transform:rotate(6deg) translateY(-4px)}}
/* 2 или больше 3 — главное по центру, остальные рядом ниже, по 30 %. */
.awards__art--row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 5%}
@media (min-width:760px){
  .awards{padding:40px}
  .awards h2{font-size:2rem}
  .awards__art{max-width:380px;margin:0 auto;align-self:center}
  /* Одна картинка — обычно вся композиция одним файлом: на десктопе
     занимает правую колонку целиком (заказчик, 01.10). */
  .awards__art--one{max-width:460px}
}
@keyframes bqDateHint{0%,100%{box-shadow:0 0 0 0 rgba(29,79,145,0)}50%{box-shadow:0 0 0 5px rgba(29,79,145,.2)}}
.seat .wall{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:square}
.seat .bar{fill:var(--sand);stroke:#B9AC93;stroke-width:1.5}
.seat .t{transition:transform .7s cubic-bezier(.4,.1,.2,1),opacity .5s;transform-box:fill-box;transform-origin:center}
.seat .t .top{fill:var(--paper);stroke:var(--deep);stroke-width:1.6;transition:fill .5s,stroke-width .5s}
.seat .t .ch{fill:var(--paper);stroke:var(--orn);stroke-width:1.4;transition:opacity .4s}
.seat .t .sofa{fill:var(--sky);stroke:var(--orn);stroke-width:1.4}
.seat .t text{font:700 17px 'Manrope',system-ui,sans-serif;fill:var(--deep);text-anchor:middle;
  dominant-baseline:central;transition:transform .7s;transform-box:fill-box;transform-origin:center}
.seat .t.on .top{fill:#FFE8A8;stroke-width:2.6}
.seat .t.on .ch,.seat .t.on .sofa{stroke:var(--deep)}
.seat .t.off{opacity:.28}
.seat .t.gone{opacity:0;pointer-events:none}
.seat .t .ch.hide{opacity:0}
.seat .floor{opacity:0;transition:opacity .6s}
.seat .floor.is-on{opacity:1}
.seat .floor rect{fill:rgba(224,165,38,.08);stroke:var(--brass);stroke-width:2;stroke-dasharray:8 6}
@media (prefers-reduced-motion:reduce){.seat .t,.seat .t text,.seat .floor,.seat .t .ch{transition:none}}
/* v2.9: рядом с оглавлением колонка уже — блюда в две колонки, не в три. */


/* --- кнопка «Наверх» — REDESIGN-v2.10 K1 ------------------------------------
   Над нижней панелью и липкой панелью калькулятора: отступ снизу — высота
   видимой панели + 12 px — ставит site.js; панелей нет — 16 px. */
.totop{position:fixed;right:var(--s4);bottom:var(--s4);z-index:97;
  width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--paper);
  box-shadow:var(--lift);color:var(--deep);display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.totop:hover{border-color:var(--deep)}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.totop.is-on{opacity:1;visibility:visible;transform:none}
html.lb-open .totop{visibility:hidden;opacity:0}
@media(prefers-reduced-motion:reduce){.totop{transform:none;transition:opacity .2s,visibility .2s}}
/* REDESIGN-v2.27 F2: на телефоне меньше и легче — не закрывает край карточек. */
/* Видимый круг 40 px, зона нажатия — сама кнопка 44 px (TZ 5.3). */
@media(max-width:759.98px){
  .totop{width:44px;height:44px;right:10px;background:none;border:0;box-shadow:none;isolation:isolate}
  .totop::after{content:'';position:absolute;inset:2px;z-index:-1;border-radius:50%;background:var(--paper);
    border:1px solid var(--line);box-shadow:0 2px 8px rgba(14,47,94,.16)}
  .totop svg{width:18px;height:18px}
}
.pm-date{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-2)}
.page-head .pm-date+.lede{margin-top:var(--s2)}

/* Истории «Порто Видео» — MIGRATION.md §2, MG4. Кружки 72 px: латунная
   обводка — не смотрели, серая — смотрели (stories.js). На телефоне лента
   листается пальцем, на десктопе — стрелками. */
.stories{padding:var(--s2) 0 var(--s4)}
.story{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:84px;color:var(--ink);text-decoration:none}
.story:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}

/* Просмотр: на телефоне — весь экран, на десктопе — окно 9:16 по высоте
   экрана на тёмном фоне. */
.sv{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#07121F;touch-action:none}
.sv[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.sv{transition:none}}
.dilos .rich--col h2{margin-top:0}
/* Фото кейтеринга — 4:3, как в MIGRATION §4: стол и подача целиком. */
.dilos .pol img{aspect-ratio:4/3}
.dilos .rail--gal>*{width:78%;max-width:360px}
@media(min-width:761px){.dilos .rail--gal>*{width:calc((100% - 2 * var(--s4)) / 3);max-width:none}}
.season h1{font-size:var(--t-h1);line-height:1.1;color:var(--deep);margin:var(--s1) 0 0}

/* Документы — REDESIGN-v2.16 D1: редакция под H1, таблицы и плашка. */
.doc-ed{margin:var(--s2) 0 0;color:var(--ink-2);font-size:var(--t-sm)}
.doc h2{scroll-margin-top:calc(var(--hdr) + var(--s4));margin-top:var(--s6)}
.doc h2:first-child{margin-top:0}
.doc h3{scroll-margin-top:calc(var(--hdr) + var(--s4))}
.doc-table{max-width:100%;overflow-x:auto;margin:0 0 var(--s4);border:1px solid var(--line);border-radius:var(--r-s);
  -webkit-overflow-scrolling:touch}
.doc-table:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.doc table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-sm)}
.doc th,.doc td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{background:var(--sand);font-weight:600}
.doc tr:last-child td{border-bottom:0}
.doc blockquote{margin:0 0 var(--s4);padding:var(--s4);border-left:3px solid var(--blue);border-radius:var(--r-s);background:var(--sky)}
.doc blockquote p:last-child{margin-bottom:0}
/* Строка под галочкой согласия — REDESIGN-v2.16 D2: мелко, без галочки. */
.consent-note{margin:var(--s1) 0 0 calc(20px + var(--s2));font-size:var(--t-xs);color:var(--ink-2)}
.consent-note a,.consent a{color:var(--blue)}

/* Уведомление о cookie — REDESIGN-v2.16 D3: не блокирует и не затемняет.
   Десктоп — до 720 px слева внизу; телефон — во всю ширину с полями 12 px,
   над нижней панелью (отступ ставит site.js). */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:99;display:flex;gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s4);background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--elev);transition:transform .2s ease}
.ck[hidden]{display:none}
.ck__t{margin:0;flex:1 1 auto;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink)}
.ck__t a{color:var(--blue)}
.ck__btn{flex:none}
@media(min-width:760px){.ck{left:var(--s5);right:auto;bottom:var(--s5);max-width:720px}}
/* Правки после запуска, п. 6: на телефоне — компактно, текст и «Понятно» в одну
   строку. Над нижней панелью «Позвонить / Забронировать» её ставит site.js. */
@media(max-width:759px){
  .ck{left:8px;right:8px;gap:var(--s2);padding:8px 8px 8px 12px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .ck__t{font-size:13px;line-height:1.35}
  .ck__btn{min-height:var(--tap);padding:0 var(--s3)}
}

/* REDESIGN-v2.21 O2: вакансия — название, зарплата, строка, текст из редактора. */
.job .kv{align-items:baseline}
.job__t{margin:0;font-family:var(--sans);font-size:var(--t-body);font-weight:700;line-height:1.3;text-align:left}
.job__x{font-size:var(--t-sm)}
.job__x h3{font-size:var(--t-body);margin:var(--s3) 0 var(--s1)}
.job__x ul{margin:var(--s2) 0;padding-left:1.2em}

/* REDESIGN-v2.21 O6: меню обедов — комплекты «состав … цена», разделы
   без цен и меток, дополнения, строка о скидке. */
.lu-days{margin-top:var(--s4);font-weight:700;color:var(--deep)}
.lu-sets{list-style:none;margin:var(--s4) 0 0;padding:0}
.lu-sets li{display:flex;align-items:baseline;gap:var(--s2);padding:10px 0;border-bottom:1px dashed var(--line)}
.lu-sets__t{font-size:var(--t-body);line-height:1.35;min-width:0}
.lu-sets__dots{flex:1 1 var(--s4);border-bottom:1px dotted var(--ink-2);transform:translateY(-4px);min-width:var(--s4)}
.lu-sets b{flex:none;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1;color:var(--ink);white-space:nowrap}
.lu-sec+.lu-sec{margin-top:var(--s7)}
.lu-sec__h{scroll-margin-top:96px}
.lu-daily{flex:none;font-size:var(--t-xs);font-weight:700;color:var(--deep);background:var(--sky);
  border-radius:var(--r-pill);padding:2px 10px}
.lu-disc{margin:var(--s5) 0 var(--s6);padding:var(--s3) var(--s4);border-left:3px solid var(--brass);background:var(--wash);
  font-weight:700}
.lu-tabs{display:flex;gap:var(--s2);overflow-x:auto;margin:0 0 var(--s5);padding-bottom:2px;scrollbar-width:none}
.lu-tabs::-webkit-scrollbar{display:none}
.lu-tabs a{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s4);border:1px solid var(--deep);
  border-radius:var(--r-pill);color:var(--deep);text-decoration:none;font-weight:700}
.lu-tabs a[aria-current="true"]{background:var(--deep);color:var(--ink-inv)}
.lu-tabs-js [data-lu-pane][hidden]{display:none}

/* REDESIGN-v2.23 T2: ссылка в строке «Как нас найти» — после значения, подчёркнутая;
   фото — с фотоаппаратом, открывается в общем просмотрщике. */
.way-link{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s2);min-height:var(--tap);padding:0;border:0;
  background:none;font:inherit;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* 08.10: в строке с текстом ссылка не раздвигает строку — площадь нажатия та же (44 px), отрицательные поля. */
.way-kv dd .way-link{min-height:0;padding:12px 0;margin-block:-12px;vertical-align:baseline}
.way-cam{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex:none}

/* REDESIGN-v2.23 T4: декор по краям — расставляет site.js (одно правило на все
   страницы). Полоса — свой слой (isolation), рисунок в нём на z-index:-1:
   над фоном полосы и под всем её содержимым, без правки чужих z-index. */
.orn-host{position:relative;isolation:isolate}
.orn--auto{z-index:-1}
main{position:relative}
.orn-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orn-layer>.orn--auto{z-index:0}
.orn--auto img{display:block;width:100%;height:auto}
@supports (overflow-x:clip){.orn-host{overflow-x:clip}}

/* Правки после запуска, п. 7: текстовый блок «карточкой в рамке» — как «Большой стол». */
.tblock__card{background:var(--paper);border:1px solid var(--deep);border-radius:var(--r-m);
  padding:var(--s5);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px var(--deep-a35)}
@media(max-width:760px){.tblock__card{padding:var(--s4)}}

/* REDESIGN-v2.24 R8: слайдер картинок и баннеров. Лента со «щелчком» —
   листается пальцем; стрелки и точки — как у первого экрана главной. */
.xs{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--sand)}
.xs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.xs-track::-webkit-scrollbar{display:none}
.xs-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.xs-slide picture,.xs-a{display:block}
.xs-slide img{display:block;width:100%;height:100%;object-fit:cover}
.xs--banner .xs-slide{aspect-ratio:3/1}
.xs--photo .xs-slide{aspect-ratio:16/9}
@media(max-width:759px){
  /* Баннер 3:1 на телефоне узок: со своими картинками для телефона — квадрат. */
  .xs--banner.xs--m .xs-slide{aspect-ratio:1/1}
}
.xs-ui{position:absolute;right:var(--s4);bottom:var(--s4);z-index:2;display:flex;align-items:center;gap:var(--s2)}
.xs-dots{display:flex;gap:var(--s1);padding:6px 8px;border-radius:999px;background:var(--scrim-2)}
.xs-dots button{position:relative;width:9px;height:9px;border-radius:50%;border:1px solid var(--ink-inv);background:transparent;padding:0;cursor:pointer}
.xs-dots button::after{content:'';position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
.xs-dots button[aria-current="true"]{background:var(--brass);border-color:var(--brass)}
.xs-arrow{display:none}
@media(min-width:1000px){
  .xs-ui{right:var(--s5);bottom:var(--s5)}
  .xs-arrow{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;
    border:1px solid var(--inv-a60);background:var(--scrim-2);color:var(--ink-inv);cursor:pointer}
  .xs-arrow svg{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){.xs-track{scroll-behavior:auto}}

/* REDESIGN-v2.27 F6: переход по якорю блока — заголовок не под шапкой.
   :where — нулевая специфичность: свои отступы меню и документов главнее. */
:where(main [id]){scroll-margin-top:calc(var(--hdr) + var(--hstrip, 0px) + var(--s4))}

/* REDESIGN-v2.28 H1–H3: расписание вместо статуса.
   Телефон — две строки под шапкой одной ссылкой к «Как нас найти»: белая с метро,
   синяя с адресом и расписанием; каждая в одну строку. Десктоп — расписание
   в полосе адреса после метро, цветом метро. */
.mstrip{display:block;text-decoration:none;color:inherit}
.mstrip-metro{display:block;height:28px;line-height:28px;padding:0 var(--s4);background:var(--paper);
  border-bottom:1px solid var(--line);color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstrip-main{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:36px;padding:0 var(--s4);
  background:var(--deep);color:var(--ink-inv);font-size:13px;white-space:nowrap}
.mstrip-street{display:flex;align-items:center;gap:var(--s2);font-weight:700;flex:none}
.mstrip-street svg{width:14px;height:14px;flex:none;color:var(--brass)}
.mstrip-hrs{min-width:0;overflow:hidden;color:var(--ink-inv-2)}
.mstrip-hrs .hrs-short{display:none}
.mstrip-hrs.is-short .hrs-full{display:none}
.mstrip-hrs.is-short .hrs-short{display:inline}
.addr .addr-hrs{display:none}
@media(max-width:759.98px){.addr{display:none}}
@media(min-width:760px){
  .mstrip{display:none}
  .addr .addr-hrs{display:block;order:2;white-space:nowrap;color:var(--ink-inv-2);font-weight:400}
  .addr .addr-hrs::before{content:'·';margin-right:var(--s2)}
}
/* Гамбургер: «● Сейчас открыто» — только в часы работы. */
.oc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:#2E7D32;margin-right:var(--s2)}
.mm-now{display:flex;align-items:center;font-weight:600;color:#1E6B24}
.mm-now[hidden]{display:none}

/* REDESIGN-v2.28 H5: до 760 px строка разделов — сразу под поиском и прилипает
   под шапкой (sticky, тот же элемент); плиток нет. Каталог кончился — прячется. */


/* REDESIGN-v2.27 L4: «Заказать домой» — ссылка, не кнопка. */
.dl-link{margin:var(--s1) 0 0;font-size:var(--t-sm)}
.dl-link--dish_popup{margin-top:var(--s3);font-size:var(--t-body)}
@media(min-width:760px){.dl-link--dish_card,.dl-link--dish_popup{display:none}}

/* REDESIGN-v2.27 L5: языки. Полоса на компьютере — «RU ▾» рядом с телефоном;
   гамбургер — первая строка; подвал — список; подсказка по языку браузера. */
.lsw{order:2;position:relative;font-size:var(--t-sm)}
.lsw summary{display:flex;align-items:center;gap:4px;min-height:var(--tap);padding:0 var(--s2);cursor:pointer;
  list-style:none;color:var(--ink-inv);font-weight:600}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary span{font-size:.75em;color:var(--ink-inv-2)}
.lsw-list{position:absolute;right:0;top:100%;z-index:60;display:flex;flex-direction:column;min-width:140px;
  background:var(--deep);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.25);padding:var(--s1) 0}
.addr .lsw-list a{display:flex;align-items:center;min-height:40px;padding:0 var(--s3);color:var(--ink-inv)}
.addr .lsw-list a::after{display:none}
.lsw-list a[aria-current]{color:var(--brass)}
.mm-langs{display:flex;align-items:center;gap:var(--s1);margin:0 0 var(--s3);font-weight:600}
.mm-langs a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);color:var(--ink)}
.mm-langs a[aria-current]{color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px}
.mm-langs span{color:var(--ink-2)}
.foot-langs{display:flex;flex-wrap:wrap;gap:0 var(--s3);margin:var(--s4) 0 0;font-size:var(--t-sm)}
.foot-langs a{display:inline-flex;align-items:center;min-height:var(--tap);color:inherit}
.foot-langs a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.book-note{margin:0 0 var(--s3);font-size:var(--t-sm);color:var(--ink-2)}
.book-note .book-note__tel{font-weight:600;color:var(--ink)}
.doc-tr{margin-top:var(--s2)}
.langhint{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 var(--s3);
  padding:var(--s1) 44px var(--s1) var(--s3);position:relative;background:var(--wash);color:var(--ink);font-size:var(--t-sm)}
.langhint[hidden]{display:none}
.langhint a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--blue)}
.langhint button{position:absolute;right:0;top:50%;transform:translateY(-50%);width:var(--tap);height:var(--tap);
  border:0;background:none;color:var(--ink-2);font-size:20px;cursor:pointer}
/* Расписание: точка между диапазонами — оформление, не текст (DESIGN 2.4). */
.hrs-p+.hrs-p::before{content:'·\00a0'}

/* REDESIGN-v2.29 C2: четыре варианта напитков — на телефоне сеткой 2 × 2;
   у «По меню» вместо цены — подпись «по факту в зале». */