/* Мобильные экраны журнала (24.10.2026) — блоки .mx собирает tools/build_mx.py
   из макета _mockups/mobile-editorial.html. На телефоне они заменяют старую
   мобильную вёрстку разворотов 02–10, обложка zh01 остаётся прежней.
   Единицы: --x = ширина/390, --y = высота/786, --u = меньшее из двух. */
.mx { display: none; }

@media (max-width: 1099px) {
  html .spread:not(#zh01) > .sheet { display: none !important; }
  html .spread:not(#zh01) { padding: 0 !important; background: #0E0B0A; }
  .spread > .mx {
    /* телефон боком, планшет: экран — вертикальная колонка по центру */
    --w: min(100vw, calc(var(--app-h, 100svh) * .62));
    --x: calc(var(--w) / 390); --y: calc(var(--app-h, 100svh) / 786); --u: min(var(--x), var(--y));
    width: var(--w); margin: 0 auto;
    --r: #A51C1F; --k: #111; --line: rgba(17,17,17,.14);
    display: block; position: relative; height: var(--app-h, 100svh); overflow: hidden; background: #FFF; color: var(--k);
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  }
  .mx * { box-sizing: border-box; }
  /* ленивые фоны: картинка подставляется, когда экран рядом */
  .mx[data-bg], .mx [data-bg] { background-image: var(--lq, none) !important; }
  .mx.mx-ld[data-bg], .mx.mx-ld [data-bg] { background-image: var(--bg), var(--lq, none) !important; }
  .mx p { margin: 0; }
  .mx a { color: inherit; text-decoration: none; }
  .mx .abs { position: absolute; }
  .mx .img { position: absolute; background: #222 center / cover no-repeat; }
  .mx .hl { position: absolute; left: calc(14 * var(--x)); right: calc(14 * var(--x)); height: 1px; background: var(--line); z-index: 2; }
  .mx.dk .hl { background: rgba(255,255,255,.25); }

  /* типографика */
  .mx .d { font: 300 calc(100 * var(--u))/.82 "Noto Serif Display", serif; font-stretch: 62.5%; letter-spacing: -.03em; text-transform: uppercase; color: var(--k); }
  .mx .d em { font-style: italic; text-transform: none; color: var(--r); }
  .mx .m { font: 400 calc(10.5 * var(--u))/1.5 "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--k); }
  .mx .t { font: 400 calc(16 * var(--u))/1.35 "Cormorant Garamond", serif; color: var(--k); }
  .mx.dk .d, .mx.dk .t { color: #FFF; }
  .mx.dk .m { color: rgba(255,255,255,.85); }
  .mx .mx-ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
  .mx .mx-ln > span { display: block; }

  /* каркас: тихий текст поверх, как Space Mag */
  .mx-top, .mx-bot { position: absolute; z-index: 30; left: calc(24 * var(--x)); right: calc(24 * var(--x)); height: 24px; display: flex; align-items: center; justify-content: space-between;
    font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
  .mx-top { top: 24px; }
  .mx-top b { font-weight: 500; opacity: .55; }
  .mx-top__menu { width: 22px; }
  /* 24.10: бронь — главная кнопка экрана, а не сноска: красная плашка в зоне большого пальца */
  .mx-bot { bottom: max(calc(12 * var(--y)), env(safe-area-inset-bottom)); height: 44px; }
  .mx-bot .bk { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; background: var(--r); color: #FFF !important;
    font-weight: 500; letter-spacing: .1em; text-decoration: none; box-shadow: 0 6px 18px rgba(80,10,12,.22); transition: transform .15s, background .2s; }
  .mx-bot .bk::after { content: "→"; font-size: 14px; }
  .mx-bot .bk:active { transform: scale(.97); background: #8E1619; }
  .mx-bot--fill .bk { flex: 1; justify-content: space-between; }
  .mx-bot--fill .mx-next { display: none; }
  .mx-velvet .mx-bot .bk { background: #FFF; color: var(--r) !important; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  .mx.dk .mx-top, .mx.dk .mx-bot, .mx .mx-top--lt { color: #FFF; }
  .mx.dk::before, .mx.dk::after { content: ""; position: absolute; left: 0; right: 0; z-index: 6; pointer-events: none; }
  .mx.dk::before { top: 0; height: calc(130 * var(--y)); background: linear-gradient(rgba(0,0,0,.55), transparent); }
  .mx.dk::after { bottom: 0; height: calc(110 * var(--y)); background: linear-gradient(transparent, rgba(0,0,0,.55)); }
  .mx .mx-shade { position: absolute; background: linear-gradient(rgba(0,0,0,.55), transparent); }

  /* кнопка меню сайта встаёт в каркас экрана: без стекла, линии в цвет экрана */
  html.mx-on:not(.m-nav-on) .m-burger { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  html.mx-on:not(.m-nav-on) .m-burger i { width: 22px; background: #111 !important; }
  html.mx-on.mx-lt:not(.m-nav-on) .m-burger i { background: #FFF !important; }

  /* 02 · о нас */
  .mx-frame { position: absolute; border: 1.25px solid #111; border-radius: calc(26 * var(--u)); }
  .mx-frame.has-line { border-color: transparent; }
  .mx-frame__line { position: absolute; inset: -1.25px; width: calc(100% + 2.5px); height: calc(100% + 2.5px); overflow: visible; pointer-events: none; }
  .mx-frame__line rect { fill: none; stroke: #111; stroke-width: 1.25; stroke-dasharray: 1.02 1; stroke-dashoffset: 0; }
  .mx-frame__sig { position: absolute; left: 0; right: 0; }
  .mx-duo { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #111; border-bottom: 1px solid #111; }
  .mx-duo > div { position: relative; }
  .mx-duo > div + div { border-left: 1px solid #111; }
  .mx-duo .m { position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u)); color: #FFF; font-size: calc(10 * var(--u)); }

  /* 03 · шеф */
  .mx-panel { background: #FFF; z-index: 7; }
  .mx-kicker { display: flex; align-items: center; gap: calc(12 * var(--u)); }
  .mx-kicker i { width: 1.5px; height: calc(30 * var(--u)); background: var(--r); }
  .mx-num { font-family: "Noto Serif Display", serif; font-weight: 300; font-stretch: 62.5%; line-height: 1; display: flex; align-items: center; gap: .25em; }
  .mx-num i { display: block; width: 1.3em; height: 1px; background: #111; }

  /* 04 · меню */
  .mx-dish__bgs { position: absolute; inset: 0; }
  /* затемнение слева под вертикальным «La Cuisine» — на светлом льду слово терялось */
  .mx-dish__shade { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(14,6,6,.8) 0%, rgba(14,6,6,.66) 28%, rgba(14,6,6,.18) 62%, rgba(14,6,6,0) 100%); }
  .mx-dish__bg { opacity: 0; transition: opacity .8s ease; }
  .mx-dish__bg.is-on { opacity: 1; }
  .mx-vert { margin: 0; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: flex-end; z-index: 3;
    font-family: "Noto Serif Display", serif; font-weight: 300; font-stretch: 62.5%; line-height: 1; letter-spacing: -.02em; color: #FFF; white-space: nowrap; text-shadow: 0 0 calc(18 * var(--u)) rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); }
  .mx-vert em { font-style: italic; }
  .mx-pan { background: #FFF; z-index: 7; }
  /* меню: родную прокрутку браузера на экране выключаем — листание и свайп ведёт скрипт, страница не ёрзает */
  .mx[data-mx="04"] { touch-action: none; }
  .mx-evrow { touch-action: pan-x; }
  .mx-pan .d, .mx-pan .t, .mx-pan .m { color: #111 !important; }
  .mx-pan .d { text-transform: none; }
  .mx-dish__nav { display: flex; align-items: center; gap: 0; }
  .mx-dish__nav button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
  .mx-dish__n { flex: 1; }
  .mx-dish__prev { width: 2em; text-align: left; }
  .mx-dish__name, .mx-dish__desc { transition: opacity .35s ease, transform .35s ease; }
  .mx-dish.is-swap .mx-dish__name, .mx-dish.is-swap .mx-dish__desc { opacity: 0; transform: translateX(calc(var(--dir, 1) * -14px)); }


  /* 05 · бар */
  .mx-vid { overflow: hidden; background: #111; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(165 * var(--y))); }
  .mx-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mx-lebar { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
  .mx-lb--le { fill: #111; } .mx-lb--bar { fill: var(--r); }
  .mx-lb { transform-box: fill-box; transform-origin: 50% 100%; }
  .mx-barbox { display: grid; grid-template-columns: 1fr 1.15fr; z-index: 5; }
  .mx-barbox__k { background: #111; padding: calc(12 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; }
  .mx-barbox__k .d { font-size: calc(26 * var(--u)); line-height: 1; color: #FFF; text-transform: none; }
  .mx-barbox__k .m { font-size: calc(9.5 * var(--u)); color: #FFF; letter-spacing: .06em; }
  .mx-barbox__go { background: var(--r); padding: calc(12 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; color: #FFF; }
  .mx-barbox__go .m { font-size: calc(9.5 * var(--u)); color: #FFF; letter-spacing: .08em; }
  .mx-barbox__t { display: flex; justify-content: space-between; align-items: flex-end; }
  .mx-barbox__t .d { font-size: calc(30 * var(--u)); line-height: .95; color: #FFF; }
  .mx-arr { font: 300 calc(34 * var(--u))/1 "IBM Plex Mono", monospace; color: #FFF; }
  .mx-barbox__go:active { background: #8E1619; }

  /* 05 · бар: красный блок, видео в кадре, плашка */
  .mx-red { background: var(--r); }
  .mx-vframe { overflow: hidden; background: #111; z-index: 2; }
  .mx-vframe video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mx .mx-corner { color: #FFF; font-size: calc(9.5 * var(--u)); font-weight: 500; letter-spacing: .14em; line-height: 1.7; z-index: 3; }
  .mx-bpanel { background: #F2F0EF; z-index: 4; }
  .mx-bpanel__h { display: flex; justify-content: space-between; font-size: calc(9.5 * var(--u)) !important; font-weight: 500; letter-spacing: .14em !important; border-bottom: 1.5px solid #111; }
  .mx-bpanel__t { font-family: "Noto Serif Display", serif; font-weight: 300; font-stretch: 62.5%; line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; color: #111; }
  .mx-bpanel__t b { font-weight: 900; }
  .mx .mx-vtext, .mx .mx-vtext[data-a] { transform: rotate(90deg) !important; color: var(--r); font-size: calc(9.5 * var(--u)); font-weight: 500; letter-spacing: .3em; white-space: nowrap; }
  .mx:not(.mx-in) .mx-vtext { opacity: 0; }
  .mx:not(.mx-in) [data-a="wipe-d"] { clip-path: inset(0 0 100% 0); }
  .mx [data-a="wipe-d"] { clip-path: inset(0 0 0 0); }
  .mx:not(.mx-in) [data-a="pop"] { opacity: 0; transform: scale(.88); }

  /* кнопки второго уровня (меню, карта бара): красная рамка без заливки — бронь остаётся главной */
  .mx .mx-btn2 { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; border: 1.5px solid var(--r);
    color: var(--r) !important; font-size: 11px !important; font-weight: 500; letter-spacing: .12em; text-decoration: none; background: transparent; transition: background .2s, color .2s; }
  .mx .mx-btn2 span:last-child, .mx .mx-btn2 .mx-arr { font: 400 15px/1 "IBM Plex Mono", monospace; color: inherit !important; }
  .mx .mx-btn2:active { background: var(--r); color: #FFF !important; }
  .mx .mx-pan .mx-btn2 { color: var(--r) !important; }
  /* 06 · салон */
  .mx-salon .mx-top, .mx-salon .mx-bot { left: calc(64 * var(--x)); right: calc(64 * var(--x)); }
  .mx-salon .mx-top__menu { visibility: hidden; }
  /* цветы салона: при входе прорастают из углов, потом еле дышат; изредка падают лепестки */
  @property --g { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
  .mx-flora { position: absolute; inset: 0; background: center / 100% 100% no-repeat; z-index: 0; pointer-events: none; transform-origin: 50% 50%;
    --g: 100%;
    -webkit-mask-image: radial-gradient(circle at 0 0, #000 var(--g), transparent calc(var(--g) + 12%)), radial-gradient(circle at 100% 0, #000 var(--g), transparent calc(var(--g) + 12%)), radial-gradient(circle at 0 100%, #000 var(--g), transparent calc(var(--g) + 12%)), radial-gradient(circle at 100% 100%, #000 var(--g), transparent calc(var(--g) + 12%));
            mask-image: radial-gradient(circle at 0 0, #000 var(--g), transparent calc(var(--g) + 12%)), radial-gradient(circle at 100% 0, #000 var(--g), transparent calc(var(--g) + 12%)), radial-gradient(circle at 0 100%, #000 var(--g), transparent calc(var(--g) + 12%)), radial-gradient(circle at 100% 100%, #000 var(--g), transparent calc(var(--g) + 12%));
    transition: --g 3.6s cubic-bezier(.5,0,.3,1), opacity 1.4s ease; }
  .mx:not(.mx-in) .mx-flora { --g: -12%; opacity: .15; transition-duration: .01s; }
  .mx.mx-in .mx-flora { animation: mx-breathe 9s ease-in-out 3.6s infinite alternate; }
  @keyframes mx-breathe { from { transform: scale(1); } to { transform: scale(1.018) rotate(.25deg); } }
  .mx-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
  .mx-petal { position: absolute; top: -4%; left: var(--px); width: calc(11 * var(--u) * var(--ps)); height: calc(15 * var(--u) * var(--ps)); opacity: 0;
    border-radius: 80% 0 80% 0; background: radial-gradient(120% 90% at 30% 30%, #C2343B, #7E1419 70%); }
  .mx.mx-in .mx-petal { animation: mx-fall var(--pt) linear calc(2.2s + var(--pd)) infinite; }
  @keyframes mx-fall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    8% { opacity: .85; }
    50% { transform: translate(calc(18 * var(--u)), 55vh) rotate(calc(var(--pr) * .5)); }
    90% { opacity: .7; }
    100% { opacity: 0; transform: translate(calc(-10 * var(--u)), 108vh) rotate(var(--pr)); } }

  .mx-times { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
  .mx-times .d { color: var(--r); }

  /* 07 · события */
  .mx-evt { margin: 0; text-align: center; font-size: calc(84 * var(--u)); font-family: Forum, serif; font-weight: 400; line-height: 1; color: #111; white-space: nowrap; }
  .mx-evbar { display: flex; justify-content: space-between; }
  .mx-evrow { position: absolute; left: 0; right: 0; top: calc(182 * var(--y)); bottom: calc(62 * var(--y)); display: flex; gap: calc(16 * var(--x)); padding: 0 calc(75 * var(--x));
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start; overscroll-behavior-x: contain; }
  .mx-evrow::-webkit-scrollbar { display: none; }
  .mx-evrow { -webkit-overflow-scrolling: touch; }
  .mx-ev { flex: none; width: calc(240 * var(--x)); margin: 0; scroll-snap-align: center; transform-origin: 50% 20%; will-change: transform; backface-visibility: hidden; }
  .mx-ev__i { width: 100%; height: min(calc(340 * var(--y)), calc(320 * var(--x))); background: #222 center / cover no-repeat; }
  .mx-ev figcaption { padding-top: calc(14 * var(--u)); }
  .mx-ev .m { font-size: calc(10 * var(--u)); }
  .mx-ev__t { font-size: calc(30 * var(--u)) !important; line-height: .95 !important; text-transform: none !important; margin: calc(8 * var(--u)) 0 !important; }
  .mx-ev .t { font-size: calc(15 * var(--u)); line-height: 1.2; }
  .mx-evempty { position: absolute; left: calc(24 * var(--x)); right: calc(24 * var(--x)); top: calc(260 * var(--y)); text-align: center; }

  /* 08 · аренда */
  /* аренда (V2): заголовок Forum, фильтр залов, фото в кадре */
  .mx-rent__h { margin: 0; font-family: Forum, serif; font-weight: 400; font-size: calc(42 * var(--u)); line-height: 1.02; color: #111; }
  .mx-rent__h i { font-style: normal; color: var(--r); }
  .mx-tabs--f { display: flex; align-items: center; flex-wrap: nowrap; }
  .mx-tabs--f .mx-tabs__l { color: #777; margin-right: 4px; }
  .mx-tabs--f .mx-tabs__c { color: #999; margin: 0 6px 0 -4px; }
  .mx-tabs--f button { border: 0; background: none; padding: 12px 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #999; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .mx-tabs--f button.is-on { color: var(--r); font-weight: 500; }
  .mx-tabs--f button.is-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--r); }
  .mx-rent__ph { overflow: hidden; background: #222; }
  .mx-rent__bg { opacity: 0; transition: opacity .7s ease; }
  .mx-rent__bg.is-on { opacity: 1; }
  .mx-rent__info { min-height: calc(60 * var(--u)); }
  .mx-rent__info > p { position: absolute; left: 0; top: 0; margin: 0; font-size: calc(12 * var(--u)) !important; line-height: 1.5 !important; font-weight: 500; color: #111 !important; opacity: 0; transition: opacity .4s ease; }
  .mx-rent__info > p.is-on { opacity: 1; position: relative; }
  /* аренда-постер: размытый кадр + резкое окно в рамке */
  .spread > .mx.mx-rent--poster { background: #0E0B0A; }
  /* вход: размытие проявляется, затем окно раскрывается шторкой — когда резкое фото уже загружено (.is-ready) */
  .mx-rent__blur { opacity: 0; transition: opacity 1s ease; }
  .mx-rent--poster.mx-in .mx-rent__blur { opacity: 1; }
  .mx-rent__win { clip-path: inset(50% 0 50% 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1) .25s; }
  .mx-rent--poster.mx-in.is-ready .mx-rent__win { clip-path: inset(0 0 0 0); }
  .mx-rent__cross { opacity: 0; transition: opacity .6s ease 1.2s; }
  .mx-rent--poster.mx-in.is-ready .mx-rent__cross { opacity: 1; }
  .mx-rent__blur { position: absolute; inset: -24px; }
  .mx-rent__blur .mx-rent__bg { position: absolute; inset: 0; background: center / cover no-repeat; } /* 07.11: размытие запечено в *-blur2.webp — filter: blur() на весь экран дёргал листание на iPhone */
  .mx-rent__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.55)); pointer-events: none; }
  .mx-rent__win { position: absolute; --wl: 176; --wt: 124; --ww: 178; --wh: 440;
    left: calc(var(--wl) * var(--x)); top: calc(var(--wt) * var(--y)); width: calc(var(--ww) * var(--x)); height: calc(var(--wh) * var(--y));
    overflow: hidden; outline: 1px solid rgba(255,255,255,.85); outline-offset: 0; z-index: 3; }
  .mx-rent__in { position: absolute; left: calc(var(--wl) * var(--x) * -1); top: calc(var(--wt) * var(--y) * -1); width: var(--w); height: var(--app-h, 100svh); }
  .mx-rent__in .mx-rent__bg { position: absolute; inset: 0; background: center / cover no-repeat; }
  .mx-rent__cross { position: absolute; left: 50%; top: 58%; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .mx-rent__cross::before, .mx-rent__cross::after { content: ""; position: absolute; background: rgba(255,255,255,.9); }
  .mx-rent__cross::before { left: 8.5px; top: 0; width: 1px; height: 18px; } .mx-rent__cross::after { top: 8.5px; left: 0; height: 1px; width: 18px; }
  .mx .mx-rent__line { margin: 0; font: 300 calc(17 * var(--u))/1.35 "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; color: rgba(255,255,255,.92); letter-spacing: .01em; z-index: 4; }
  .mx .mx-rent__kick { color: rgba(255,255,255,.75) !important; font-size: calc(10 * var(--u)) !important; letter-spacing: .14em; z-index: 4; }
  .mx .mx-rent__h2 { font-size: calc(40 * var(--u)); line-height: .98; letter-spacing: -.01em; text-transform: none; color: #FFF; z-index: 4; }
  .mx .mx-rent__h2 em { color: #E05A5E; }
  .mx-rent--poster .mx-rent__set { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .4s ease; text-align: center; }
  .mx-rent--poster .mx-rent__set.is-on { opacity: 1; position: relative; }
  .mx .mx-rent__hall { margin: 0 0 calc(4 * var(--u)); font: italic 400 calc(22 * var(--u))/1 "Cormorant Garamond", serif; color: #E05A5E; }
  .mx-rent__nums { display: flex; justify-content: center; gap: calc(34 * var(--x)); }
  .mx-rent__nums span { display: flex; flex-direction: column; align-items: center; }
  .mx .mx-rent__nums b { font-size: calc(46 * var(--u)) !important; line-height: 1 !important; color: #FFF !important; font-weight: 300; }
  .mx .mx-rent__nums i { font-style: normal; margin-top: calc(6 * var(--u)); font-size: calc(9 * var(--u)) !important; font-weight: 500; letter-spacing: .14em; color: rgba(255,255,255,.75) !important; }
  .mx-rent--poster .mx-rent__info > p { left: 0; right: 0; text-align: center; color: rgba(255,255,255,.9) !important; font-weight: 500; letter-spacing: .12em; }
  .mx-rent--poster .mx-tabs--f .mx-tabs__l { color: rgba(255,255,255,.6); }
  .mx-rent--poster .mx-tabs--f button { color: rgba(255,255,255,.55); }
  .mx-rent--poster .mx-tabs--f button.is-on { color: #FFF; } .mx-rent--poster .mx-tabs--f button.is-on::before { background: #FFF; }
  .mx.mx-rent--poster .mx-rent__go { color: #FFF !important; }
  .mx-rent--poster .mx-rent__bg { transition: opacity .7s ease; }
  .mx .mx-rent__go { color: #111 !important; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
  .mx-nums { display: grid; grid-template-columns: repeat(3, 1fr); z-index: 7; }

  /* 09 · контакты */
  .mx-logo .mx-ln { padding: .2em .1em .06em 0; margin: -.2em -.1em -.06em 0; }  /* у Druzhok буквы выше строки — маска не должна их резать */
  .mx-logo { margin: 0; font-family: Druzhok, "Cormorant Garamond", serif; font-weight: 400; line-height: .86; letter-spacing: .02em; color: #FFF; }
  .mx-map { display: block; background-color: #3a2a2a; }
  .mx-tel { display: flex; align-items: center; color: #FFF !important; }
  .mx-tel .m { width: calc(136 * var(--x)); padding-left: 2px; }
  .mx-tel__n { flex: 1; font: 500 calc(15 * var(--u))/1 "IBM Plex Mono", monospace; letter-spacing: .04em; color: #FFF; }
  .mx-tel__go { font: 400 16px/1 "IBM Plex Mono", monospace; color: #FFF; padding-right: 4px; }
  .mx-tel:active { background: rgba(255,255,255,.08); }
  .mx-soc { display: flex; gap: calc(12 * var(--x)); }
  /* значки соцсетей — белые, как логотип, маленькие и тихие: знак из десктопной иконки
     (красный круг с прозрачным рисунком) вырезаем маской и красим белым, вокруг тонкое кольцо */
  .mx-soc { gap: calc(6 * var(--x)) !important; margin-left: -6px; }
  .mx-soc a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
  .mx-soc a::before { content: ""; grid-area: 1 / 1; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); transition: background .2s, border-color .2s; }
  .mx-ico { grid-area: 1 / 1; width: 32px; height: 32px; border-radius: 50%; background: #F4ECE6;
    -webkit-mask: var(--ico) center / 100% 100% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: var(--ico) center / 100% 100% no-repeat exclude, linear-gradient(#000 0 0); }
  .mx-soc a:active::before { background: rgba(255,255,255,.15); border-color: #FFF; }
  .mx-msg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mx-msg a { height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.55); color: #FFF !important;
    font: 500 calc(10.5 * var(--u))/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  .mx-msg a:active { background: #FFF; color: #6B171D !important; }
  .mx-soc { align-items: center; }
  .mx .mx-soc__cap { margin-left: 6px; font-size: calc(9.5 * var(--u)) !important; color: rgba(255,255,255,.6) !important; }
  .mx-velvet .mx-maplinks a { border-bottom: 1px solid rgba(255,255,255,.35); }

  /* ===== анимации: состояние до входа, .mx-in — экран встал ===== */
  .mx [data-a] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), clip-path 1.1s cubic-bezier(.7,0,.2,1); transition-delay: var(--d, 0s); }
  .mx:not(.mx-in) [data-a="up"] { opacity: 0; transform: translateY(calc(26 * var(--u))); }
  .mx:not(.mx-in) [data-a="fade"] { opacity: 0; }
  .mx:not(.mx-in) [data-a="right"] { opacity: 0; transform: translateX(calc(48 * var(--x))); }
  .mx:not(.mx-in) [data-a="rise"] { opacity: 0; transform: translateY(18%); }
  .mx [data-a="mask"] { transition-duration: .9s; }
  .mx:not(.mx-in) [data-a="mask"] { transform: translateY(105%); }
  .mx:not(.mx-in) [data-a="wipe-r"] { clip-path: inset(0 100% 0 0); }
  .mx:not(.mx-in) [data-a="wipe-l"] { clip-path: inset(0 0 0 100%); }
  .mx:not(.mx-in) [data-a="wipe-c"] { clip-path: inset(0 50% 0 50%); }
  .mx [data-a="wipe-r"], .mx [data-a="wipe-l"], .mx [data-a="wipe-c"] { clip-path: inset(0 0 0 0); }
  .mx [data-a="zoom"] { transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
  .mx:not(.mx-in) [data-a="zoom"] { transform: scale(1.1); }
  .mx [data-a="line"] { transform-origin: 0 50%; }
  .mx:not(.mx-in) [data-a="line"] { transform: scaleX(0); }
  .mx [data-a="grow-y"] { transform-origin: 50% 100%; }
  .mx:not(.mx-in) [data-a="grow-y"] { transform: scaleY(0); }
  /* рамка прорисовывается по контуру */
  .mx-frame__line rect { transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .2s; }
  .mx:not(.mx-in) .mx-frame__line rect { stroke-dashoffset: 1; }
  /* бар: видео открывается по диагонали, буквы растут от базовой линии */
  .mx-vid { transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
  .mx:not(.mx-in) .mx-vid { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  .mx-lb { transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.35s + var(--i) * .08s); }
  .mx:not(.mx-in) .mx-lb { transform: scaleY(0); }
  .mx.mx-in .mx-arr { animation: mx-nudge 2.2s ease-in-out 2s infinite; }
  @keyframes mx-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(6px); } }
  /* меню: фон живёт медленным наездом, пока экран открыт */
  .mx.mx-in .mx-dish__bg.is-on { animation: mx-kb 14s ease-in-out infinite alternate; }
  @keyframes mx-kb { from { transform: scale(1); } to { transform: scale(1.08); } }
  /* события: карточки въезжают справа одна за другой */
  .mx-ev, .mx-ev figcaption { transition: none; }
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .mx [data-a], .mx-lb, .mx-vid, .mx-frame__line rect { transition: none !important; }
  .mx:not(.mx-in) [data-a], .mx:not(.mx-in) .mx-lb { opacity: 1 !important; transform: none !important; }
  .mx:not(.mx-in) [data-a^="wipe"] { clip-path: inset(0) !important; }
  .mx:not(.mx-in) .mx-barlink::before, .mx:not(.mx-in) .mx-barlink::after { transform: none !important; }
  .mx:not(.mx-in) .mx-vtext { opacity: 1 !important; transform: rotate(90deg) !important; }
  .mx:not(.mx-in) .mx-vid { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(165 * var(--y))) !important; }
  .mx:not(.mx-in) .mx-frame__line rect { stroke-dashoffset: 0 !important; }
  .mx .mx-arr, .mx .mx-dish__bg, .mx .mx-flora { animation: none !important; }
  .mx .mx-flora { transition: none !important; --g: 100% !important; opacity: 1 !important; }
  .mx .mx-petals { display: none; }
}

/* ===== меню «E» (24.10): белое, по центру, тихое — как у fashion-брендов =====
   Разметку строит mscene.js (класс m-nav--e), здесь перекрываем старый бархат. */
@media (max-width: 1099px) {
  .m-nav.m-nav--e { background: #FFF !important; color: #111 !important; align-items: center; text-align: center;
    padding: calc(14px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom)) !important;
    opacity: 0; transform: none; transition: opacity .35s ease !important; }
  .m-nav.m-nav--e.is-open { opacity: 1; }
  html.m-nav-on .m-burger { opacity: 0 !important; pointer-events: none !important; }
  .m-nav--e .m-nav__head { position: relative; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; flex: none; }
  .m-nav--e .m-nav__x { position: absolute; left: -10px; top: 0; width: 48px; height: 48px; border: 0; background: none; padding: 0; cursor: pointer; }
  .m-nav--e .m-nav__x:focus { outline: none; }
  .m-nav--e .m-nav__x i { position: absolute; left: 14px; top: 23px; width: 20px; height: 2px; background: #A51C1F; transition: transform .45s cubic-bezier(.22,1,.36,1) .1s; }
  .m-nav--e .m-nav__x i:first-child { transform: rotate(45deg); } .m-nav--e .m-nav__x i:last-child { transform: rotate(-45deg); }
  .m-nav--e:not(.is-open) .m-nav__x i { transform: rotate(0); }
  .m-nav--e .m-nav__logo { display: block; min-height: 0; color: #111 !important; font: 400 22px/1 Druzhok, "Cormorant Garamond", serif !important; letter-spacing: .04em; text-transform: none; text-decoration: none; }
  .m-nav--e .m-nav__fly { position: absolute; right: -2px; top: 12px; width: 24px; height: 24px; color: #A51C1F; transform-origin: 50% 30%; }
  .m-nav--e.is-open .m-nav__fly { animation: m-fly 1.1s cubic-bezier(.3,.7,.3,1) .15s both; }
  @keyframes m-fly { 0% { transform: scale(.4, .4) translateY(6px); opacity: 0; } 35% { transform: scale(1.15, .7); opacity: 1; } 55% { transform: scale(.85, 1.1); } 75% { transform: scale(1.05, .95); } 100% { transform: none; } }

  .m-nav--e .m-nav__links { display: flex; flex-direction: column; align-items: center; margin: min(9vh, 64px) 0 0 !important; gap: 0; }
  .m-nav--e .m-nav__links a { display: block; padding: min(1.6vh, 12px) 12px !important; color: #111 !important; text-decoration: none;
    font: 500 13px/1.2 "IBM Plex Mono", monospace !important; letter-spacing: .26em; text-transform: uppercase; font-style: normal !important; }
  .m-nav--e .m-nav__links a[aria-current] { color: #A51C1F !important; }
  .m-nav--e .m-nav__links a:active { color: #A51C1F !important; }
  .m-nav--e.is-open .m-nav__links a { animation: m-e-in .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.08s + var(--i) * .045s) !important; }
  @keyframes m-e-in { from { opacity: 0; transform: translateY(8px); letter-spacing: .5em; } to { opacity: 1; transform: none; letter-spacing: .26em; } }

  .m-nav--e .m-nav__pages { display: flex; flex-direction: column; gap: 6px; margin-top: min(6vh, 44px); }
  .m-nav--e .m-nav__pages a { color: #111; text-decoration: none; font: italic 400 18px/1.3 "Cormorant Garamond", serif; }
  .m-nav--e .m-nav__soc { display: flex; gap: 12px; justify-content: center; margin: min(4vh, 28px) 0 0; font: 400 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
  .m-nav--e .m-nav__soc a { color: #111; text-decoration: none; }
  .m-nav--e .m-nav__soc span { color: #999; }
  .m-nav--e .m-nav__soc .m-nav__soclbl { color: #777; }
  .m-nav--e .m-nav__book { display: block; min-height: 0; width: min(230px, 64vw); margin: min(4vh, 30px) auto 0 !important; padding: 15px 0 !important; background: none !important; border: 1.5px solid #A51C1F;
    color: #A51C1F !important; text-decoration: none; font: 500 11px/1 "IBM Plex Mono", monospace !important; letter-spacing: .2em; text-transform: uppercase; transition: background .2s, color .2s; }
  .m-nav--e .m-nav__book:active { background: #A51C1F !important; color: #FFF !important; }
  .m-nav--e .m-nav__addr { margin: 14px 0 0 !important; color: #777 !important; font: 400 10px/1.5 "IBM Plex Mono", monospace !important; letter-spacing: .06em; text-transform: uppercase; }
  .m-nav--e .m-nav__addr a { color: inherit; text-decoration: none; }
  .m-nav--e.is-open .m-nav__pages, .m-nav--e.is-open .m-nav__soc, .m-nav--e.is-open .m-nav__book, .m-nav--e.is-open .m-nav__addr { animation: m-e-fade .6s ease .5s both; }
  @keyframes m-e-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .m-nav--e *, .m-nav--e { animation: none !important; transition: none !important; }
}

/* 24.10 · защита от адресной строки: на телефоне браузер сам страницу не двигает —
   листание ведёт скрипт колоды. Без родной прокрутки адресная строка не просыпается
   посреди свайпа и не дёргает высоту экрана. Лента афиши и меню прокручиваются сами. */
@media (max-width: 1099px) {
  html.m-deck, html.m-deck body { touch-action: none; overscroll-behavior: none; }
  html.m-deck .mx-evrow { touch-action: pan-x; }
  html.m-deck .m-nav { touch-action: pan-y; overscroll-behavior: contain; }
}
/* 07.11 · 03 шеф: портрет листается — три кадра, полоски как в историях */
@media (max-width: 1099px) {
  .mx .mx-chefpic { opacity: 0; transition: opacity .7s ease; }
  .mx .mx-chefpic.is-on { opacity: 1; }
  .mx .mx-chefbars { z-index: 31; top: calc(62 * var(--y)); right: calc(24 * var(--x)); display: flex; gap: 4px; }
  .mx .mx-chefbars i { width: 18px; height: 2px; background: rgba(255,255,255,.4); transition: background .3s; }
  .mx .mx-chefbars i.is-on { background: #fff; }
}