/* styles.css — вид History Lounge «Ромб зажигается». Всё из токенов. */

/* ── Основа ─────────────────────────────────────────── */
body { line-height: 1.6; }
::selection { background: var(--accent); color: var(--surface); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.price { font-family: var(--font-display); font-weight: 300; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
/* Реальные телефонные фото клиента — в тёплый свет ламп зала */
.graded { position: relative; }
.graded img { filter: saturate(1.05) contrast(1.04) brightness(.92); }
/* Тёплый тон ламп поверх холодного телефонного кадра */
.graded::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: oklch(0.62 0.14 55 / .32); mix-blend-mode: soft-light; }

/* ── Сигнатура: зеркальный ромб ─────────────────────── */
.rhomb { position: absolute; pointer-events: none; overflow: visible; filter: var(--signature-glow); }
/* Толщина — в единицах viewBox 440: --sw подобран под ширину ромба, чтобы на экране было ~1.5–2px */
.rhomb path { fill: none; stroke: var(--signature-line); stroke-width: var(--sw, 1.5); stroke-dasharray: 1; stroke-dashoffset: 0; }
.rhomb path:nth-child(2) { opacity: .7; --lit: .7; }
.rhomb path:nth-child(3) { opacity: .45; --lit: .45; }
/* Зажигание: полосы по одной, мерцание — как подсветка панели в зале */
.js .rhomb[data-ignite] path { stroke-dashoffset: 1; opacity: 0; }
.js .rhomb.is-lit path { animation: rhomb-draw 1400ms var(--ease-out) forwards, rhomb-flicker var(--signature-ignite) steps(1) forwards; }
.js .rhomb.is-lit path:nth-child(2) { animation-delay: 320ms; }
.js .rhomb.is-lit path:nth-child(3) { animation-delay: 640ms; }
@keyframes rhomb-draw { to { stroke-dashoffset: 0; } }
@keyframes rhomb-flicker {
  0% { opacity: 0; } 6% { opacity: var(--lit, 1); } 12% { opacity: .1; } 20% { opacity: var(--lit, 1); }
  27% { opacity: .35; } 31% { opacity: var(--lit, 1); } 52% { opacity: .55; } 56%, 100% { opacity: var(--lit, 1); }
}

/* Метка секции: малый ромб + номер + раздел */
.idx { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: var(--track-utility); text-transform: uppercase; color: var(--accent); }
.idx::before { content: ""; width: 10px; height: 10px; border: var(--signature-stroke) solid var(--signature-line); transform: rotate(45deg); filter: var(--signature-glow); }
.idx span:first-child { color: var(--ink-muted); }

.h-big { font-weight: 300; font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.025em; max-width: 15ch; }

/* ── Шапка ─────────────────────────────────────────── */
.header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header__inner { min-height: 84px; }
.logo { display: block; }
.logo img { height: 46px; width: auto; }
.nav__list { gap: var(--space-5); font-size: var(--step-0); }
.nav__list li + li::before { content: "·"; margin-right: var(--space-5); color: var(--ink-muted); }
.nav__list a { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.nav__list a:hover { color: var(--accent); }
.lang button { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .08em; color: var(--ink-muted); opacity: 1; }
.lang button[aria-pressed="true"] { color: var(--accent); text-decoration: none; }
.lang button:hover { color: var(--ink); }
.header__phone { padding-left: var(--space-5); border-left: 1px solid var(--line); text-decoration: none; font-size: var(--step-0); white-space: nowrap; }
.header__phone:hover { color: var(--accent); }
.header__call { display: none; }

/* ── Кнопки и ссылки ───────────────────────────────── */
.btn { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .16em; text-transform: uppercase; padding: 1.25em 2em; border-radius: var(--radius-control); }
.btn--primary { background: var(--button); color: var(--on-accent); box-shadow: inset 0 1px 0 oklch(1 0 0 / .12); }
.btn--primary:hover { background: var(--button-hover); }
.btn--ghost { border-color: color-mix(in oklab, var(--ink) 35%, transparent); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.link-arrow { display: inline-flex; gap: var(--space-2); align-items: center; font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--accent); padding-block: var(--space-3); }
.link-arrow::after { content: "→"; transition: transform var(--dur-micro) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Живой статус */
.status { display: inline-flex; align-items: center; gap: var(--space-3); padding: .6em 1.1em .6em .9em; border-radius: var(--radius-pill); background: var(--green); font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: status-pulse 2.4s var(--ease-out) infinite; }
.status[data-open="false"] { background: var(--plane); color: var(--ink-muted); }
.status[data-open="false"]::before { background: var(--ink-muted); animation: none; }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 oklch(0.70 0.14 65 / .6); } 70%, 100% { box-shadow: 0 0 0 10px oklch(0.70 0.14 65 / 0); } }

/* Цитата */
.quote p { font-style: italic; font-size: var(--step-1); line-height: 1.4; }
.quote cite { display: block; margin-top: var(--space-3); font: 600 var(--step--1)/1.3 var(--font-utility); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink-muted); }

/* ── 1. Первый экран ───────────────────────────────── */
.hero { position: relative; min-height: calc(100svh - 84px); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0 0 0 28%; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.js .hero__media img { animation: push var(--dur-push) var(--ease-out) both; }
@keyframes push { from { transform: scale(1.06); filter: brightness(.55); } to { transform: none; filter: none; } }
/* Затемнение к тексту — для контраста, не декор */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 26%, oklch(0.165 0.008 70 / .55) 44%, oklch(0.165 0.008 70 / 0) 64%),
              linear-gradient(0deg, var(--surface) 0, oklch(0.165 0.008 70 / 0) 22%); }
/* Ромб — целиком над залом, вне колонки текста */
.rhomb--hero { width: min(38vw, 36rem); left: 49%; top: 50%; transform: translateY(-50%); z-index: 0; filter: var(--signature-glow) drop-shadow(0 0 30px oklch(0.70 0.14 65 / .45)); }
.rhomb--hero { --sw: 1.7; }
.js .rhomb--hero.is-lit path { animation-delay: 500ms, 500ms; }
.js .rhomb--hero.is-lit path:nth-child(2) { animation-delay: 820ms, 820ms; }
.js .rhomb--hero.is-lit path:nth-child(3) { animation-delay: 1140ms, 1140ms; }
.hero__inner { position: relative; z-index: 1; padding-block: var(--space-9) var(--space-10); }
.hero__title { margin-block: var(--space-6) var(--space-6); font-weight: 200; font-size: var(--step-hero); line-height: .94; letter-spacing: -0.04em; }
.hero__title em { display: block; font-style: normal; color: var(--accent); }
.hero__lead { font-size: var(--step-1); line-height: 1.4; color: var(--ink-muted); max-width: 26ch; }
.hero__addr { font: 600 var(--step--1)/2.4 var(--font-utility); letter-spacing: var(--track-utility); text-transform: uppercase; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-7); }
.hero__phone { font-size: var(--step-1); text-decoration: none; border-bottom: 1px solid var(--line); }
.hero__phone:hover { border-color: var(--accent); }
.js .hero__inner > * { animation: warm var(--dur-reveal) var(--ease-out) both; }
.js .hero__inner > :nth-child(2) { animation-delay: 120ms; }
.js .hero__inner > :nth-child(3) { animation-delay: 240ms; }
.js .hero__inner > :nth-child(4) { animation-delay: 360ms; }
@keyframes warm { from { opacity: 0; filter: brightness(.3); } to { opacity: 1; filter: none; } }

/* Появление ниже — «из темноты в свет», без подпрыгивания */
.reveal { transform: none; filter: brightness(.4); transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out); }
.reveal.is-in { filter: none; }

/* ── 2. Кальян: фото во всю ширину ─────────────────── */
.hookah { position: relative; min-height: 92svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hookah__media { position: absolute; inset: 0; z-index: -2; }
.hookah__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 15%; }
.hookah::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 22%, oklch(0.165 0.008 70 / .7) 42%, oklch(0.165 0.008 70 / 0) 62%),
              linear-gradient(180deg, var(--surface) 0, oklch(0.165 0.008 70 / 0) 14%, oklch(0.165 0.008 70 / 0) 86%, var(--surface) 100%); }
.hookah__inner { padding-block: var(--section); }
.hookah__text { max-width: 34rem; }
.hookah__lead { margin-block: var(--space-5) var(--space-6); font-size: var(--step-1); line-height: 1.4; color: var(--ink-muted); max-width: 30ch; }
/* Дым над чашей: клубы поднимаются; плотность — от выбранной крепости */
.smoke { position: absolute; left: 44%; top: -8%; width: 32%; aspect-ratio: 1; pointer-events: none; opacity: .7; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.smoke i { position: absolute; left: 30%; top: 62%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.95 0.01 80 / .85), oklch(0.95 0.01 80 / .38) 48%, oklch(0.95 0.01 80 / 0)); mix-blend-mode: screen; animation: drift 9s linear infinite; animation-play-state: paused; }
.smoke i:nth-child(2) { animation-delay: -2.2s; width: 38%; left: 36%; }
.smoke i:nth-child(3) { animation-delay: -4.4s; width: 56%; left: 24%; }
.smoke i:nth-child(4) { animation-delay: -6.6s; width: 42%; left: 40%; }
.smoke i:nth-child(5) { animation-delay: -8.8s; width: 50%; left: 28%; }
.hookah.is-playing .smoke i { animation-play-state: running; }
@keyframes drift {
  0% { transform: translate(0, 40%) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-45%, -150%) scale(1.8); opacity: 0; }
}
.hookah[data-strength="light"] .smoke { opacity: .22; transform: scale(.7); }
.hookah[data-strength="dense"] .smoke { opacity: 1; transform: scale(1.6); }
.strength { display: inline-flex; border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); border-radius: var(--radius-control); background: oklch(0.165 0.008 70 / .6); }
.strength button { min-height: 48px; padding: 0 var(--space-5); background: none; border: 0; font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.strength button + button { border-left: 1px solid var(--line); }
.strength button:hover { color: var(--ink); }
.strength button[aria-checked="true"] { color: var(--surface); background: var(--accent); }
.strength__note { min-height: 3.2em; margin-block: var(--space-4) var(--space-7); color: var(--ink-muted); }
.strength__note span { display: none; }
.hookah[data-strength="light"] [data-for="light"],
.hookah[data-strength="medium"] [data-for="medium"],
.hookah[data-strength="dense"] [data-for="dense"] { display: inline; }
.hookah .quote { padding-left: var(--space-5); border-left: var(--signature-stroke) solid var(--accent); margin-bottom: var(--space-5); }

/* ── 3. Кухня: афиша блюда + меню-книга ─────────── */
.kitchen { padding-block: var(--section); }
.kitchen__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); align-items: end; margin-bottom: var(--space-10); }
.kitchen__head { grid-column: 1 / 7; }
.kitchen__lead { margin-top: var(--space-5); font-size: var(--step-1); line-height: 1.4; color: var(--ink-muted); max-width: 30ch; }
.kitchen__facts { margin-top: var(--space-5); font: 600 var(--step--1)/1.4 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
/* Афиша: цена фирменного стейка — самое крупное число страницы, в горящем ромбе */
.signature-dish { grid-column: 7 / 13; display: grid; justify-items: end; text-align: right; text-decoration: none; }
.signature-dish__label { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: var(--track-utility); text-transform: uppercase; color: var(--accent); }
.signature-dish__name { margin-top: var(--space-4); font: 200 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; }
.signature-dish__price { position: relative; display: flex; align-items: flex-start; isolation: isolate; margin-top: var(--space-2); }
.signature-dish__num { font: 200 clamp(7rem, 14vw, 13rem)/.86 var(--font-display); letter-spacing: -0.06em; color: var(--accent); font-variant-numeric: tabular-nums; }
.signature-dish__k { position: relative; display: grid; place-items: center; width: 5.2rem; aspect-ratio: 1; margin: .35em 0 0 .3em; font: 300 var(--step-1)/1 var(--font-display); color: var(--ink); }
.rhomb--price { inset: 0; width: 100%; height: 100%; --sw: 8; }
.signature-dish:hover .signature-dish__name { color: var(--accent); }

/* Стол сверху: блюда из их печатного меню на их же охристой скатерти, медленно едут лентой */
.table-strip { display: flex; width: max-content; height: 13.5rem; margin: 0 0 var(--space-9); padding: 0; list-style: none; background: oklch(0.7 0.085 65); animation: strip 70s linear infinite; animation-play-state: paused; }
.table-strip.is-playing { animation-play-state: running; }
.table-strip:hover { animation-play-state: paused; }
.table-strip li { flex: none; height: 100%; }
.table-strip img { height: 100%; width: auto; }
@keyframes strip { to { transform: translateX(-50%); } }
.kitchen { overflow: hidden; }
.menu { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); align-items: start; }
.menu__nav { grid-column: 1 / 5; }
.menu__nav ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.menu__nav a { position: relative; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0 var(--space-4) var(--space-5); font: 300 var(--step-1)/1.1 var(--font-display); letter-spacing: -0.015em; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-muted); transition: color var(--dur-micro) var(--ease-out); }
.menu__nav a:hover { color: var(--ink); }
.menu__n { font: 300 var(--step-0)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.menu__c { font: 600 var(--step--1)/1 var(--font-utility); color: var(--ink-muted); }
.menu__nav a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; border: var(--signature-stroke) solid var(--signature-line); transform: translateY(-50%) rotate(45deg) scale(0); filter: var(--signature-glow); transition: transform var(--dur-micro) var(--ease-out); }
.menu__nav a.is-active { color: var(--ink); }
.menu__nav a.is-active .menu__n { color: var(--accent); }
.menu__nav a.is-active::before { transform: translateY(-50%) rotate(45deg) scale(1); }
.menu__book { grid-column: 5 / 13; padding-left: var(--space-7); min-height: 46rem; }
/* Одна глава на экран — переключение по оглавлению */
.menu.is-tabs .chapter { display: none; }
.menu.is-tabs .chapter.is-active { display: block; animation: chapter-in 500ms var(--ease-out) both; }
@keyframes chapter-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.chapter { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--space-9); margin-bottom: 0; scroll-margin-top: calc(var(--header-h, 84px) + var(--space-4)); }
/* Огромное бледное имя раздела — как на их печатном меню */
.chapter__ghost { position: absolute; right: -.04em; top: 0; z-index: -1; font: 200 clamp(5rem, 10vw, 10rem)/.8 var(--font-display); letter-spacing: -0.05em; text-transform: lowercase; white-space: nowrap; color: color-mix(in oklab, var(--accent) 13%, transparent); pointer-events: none; user-select: none; }
.chapter__title { display: flex; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); font-weight: 300; font-size: var(--step-2); letter-spacing: -0.02em; }
.chapter__n { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .12em; color: var(--accent); }
.dishes { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); list-style: none; padding: 0; margin: 0; }
.dish { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.dish__name { line-height: 1.35; }
.dish .price { font-size: var(--step-0); }
.dish__desc { grid-column: 1 / -1; margin-top: var(--space-1); font-size: var(--step--1); font-style: italic; line-height: 1.45; color: var(--ink-muted); }
.dish--hero { grid-column: 1 / -1; padding-block: var(--space-5); }
.dish--hero .dish__name { font: 200 var(--step-2)/1.1 var(--font-display); letter-spacing: -0.025em; }
.dish--hero .price { font-size: var(--step-2); font-weight: 200; }

/* ── 4. Бар: стена коктейлей ───────────────────────── */
.bar { position: relative; isolation: isolate; background: var(--surface); padding-block: var(--section); overflow: hidden; }
/* Тёплый свет их зала, размытый, — как подсветка за стойкой */
.bar__glow { position: absolute; inset: 0; z-index: -2; margin: 0; }
.bar__glow img { width: 100%; height: 100%; object-fit: cover; }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--surface) 0, oklch(0.165 0.008 70 / .35) 22%, oklch(0.165 0.008 70 / .35) 70%, var(--surface) 100%); }
.bar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.bar__head .idx { margin: 0; }
.bar__title { font-weight: 300; font-size: var(--step-1); letter-spacing: -0.01em; }
.bar__hint { margin-left: auto; font-style: italic; color: var(--ink-muted); }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.wall { list-style: none; padding: 0; margin: var(--space-8) 0 0; font: 200 clamp(2.1rem, 5.4vw, 5.2rem)/1.14 var(--font-display); letter-spacing: -0.035em; text-wrap: pretty; }
.wall__item { display: inline; white-space: nowrap; cursor: default; outline: none; transition: opacity 400ms var(--ease-out), color 400ms var(--ease-out), text-shadow 400ms var(--ease-out); }
.wall__item:not(:last-child)::after { content: ""; display: inline-block; width: .2em; height: .2em; margin: 0 .42em 0 .3em; border: var(--signature-stroke) solid var(--signature-line); transform: translateY(-.12em) rotate(45deg); opacity: .7; }
.wall__price { margin-left: .28em; font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .06em; color: var(--accent); vertical-align: .9em; white-space: nowrap; }
.wall:hover .wall__item, .wall:focus-within .wall__item { opacity: .2; }
.wall .wall__item:hover, .wall .wall__item:focus { opacity: 1; color: var(--accent); text-shadow: 0 0 .5em oklch(0.70 0.14 65 / .5); }
.wall .wall__item:hover .wall__price, .wall .wall__item:focus .wall__price { color: var(--ink); text-shadow: none; }
.wall__item:focus-visible .wall__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.bar__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-9); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.bar__group + .bar__group { margin-top: var(--space-7); }
.bar__col h3 { margin-bottom: var(--space-4); font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: var(--track-utility); text-transform: uppercase; color: var(--accent); }
.bar__cols { background: oklch(0.165 0.008 70 / .7); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-control); }
.bar__col ul { list-style: none; padding: 0; margin: 0; }
.bar__col li { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.bar__col .price { font-size: var(--step-0); }
.bar__note { grid-column: 1 / -1; font-size: var(--step--1); font-style: italic; color: var(--ink-muted); }

/* ── 5. Залы: мозаика разного веса ─────────────────── */
.halls { padding-block: var(--section) calc(var(--section) * .5); }
.halls__head { display: grid; justify-items: end; text-align: right; margin-bottom: var(--space-7); }
.halls__head .h-big { max-width: 18ch; }
.halls__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 24rem 24rem; gap: var(--space-4); }
.hall { position: relative; overflow: hidden; background: var(--plane); }
.hall .slot { aspect-ratio: auto; height: 100%; }
.hall .slot img { transition: transform 1200ms var(--ease-out); }
.hall:hover .slot img { transform: scale(1.03); }
.hall--lower { grid-column: 1 / 6; grid-row: 1 / 3; }
.hall--upper { grid-column: 6 / 13; grid-row: 1; }
.hall--day { grid-column: 6 / 13; grid-row: 2; }
.hall__cap { position: absolute; inset: auto 0 0 0; padding: var(--space-8) var(--space-5) var(--space-5); background: linear-gradient(0deg, oklch(0.165 0.008 70 / .9), oklch(0.165 0.008 70 / 0)); }
.hall__cap h3 { font-weight: 300; font-size: var(--step-2); letter-spacing: -0.02em; }
.hall__cap p { color: var(--ink-muted); font-size: var(--step--1); margin-top: var(--space-1); }

/* ── 6. Веранда в двух светах + гости ──────────────── */
.terrace { padding-block: calc(var(--section) * .5) var(--section); }
.terrace__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); align-items: end; margin-bottom: var(--space-7); }
.terrace__head .idx, .terrace__head .h-big { grid-column: 1 / 8; }
.terrace__lead { grid-column: 8 / 13; grid-row: 2; color: var(--ink-muted); font-size: var(--step-1); line-height: 1.4; }
.terrace__pair { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); align-items: start; }
.terrace__frame { transition: filter 900ms var(--ease-out); }
.terrace__frame--day { grid-column: 1 / 6; }
.terrace__frame--night { grid-column: 6 / 13; margin-top: var(--space-10); }
.terrace__frame figcaption { display: flex; align-items: baseline; gap: var(--space-4); margin-top: var(--space-4); }
.terrace__time { font: 200 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; color: var(--accent); }
.terrace__pair[data-now="day"] .terrace__frame--night,
.terrace__pair[data-now="night"] .terrace__frame--day { filter: brightness(.72); }
.terrace__now { position: absolute; top: var(--space-5); left: calc(41.6% + var(--space-5)); display: inline-flex; align-items: center; gap: var(--space-3); font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; }
.terrace__dot { width: 12px; height: 12px; border: var(--signature-stroke) solid var(--signature-line); transform: rotate(45deg); filter: var(--signature-glow); }
.guests { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); margin-top: var(--space-9); padding-top: var(--space-7); border-top: 1px solid var(--line); }
.rating { grid-column: 1 / 4; display: grid; gap: var(--space-3); align-content: start; }
.rating__num { font: 200 var(--step-4)/.9 var(--font-display); letter-spacing: -0.04em; color: var(--accent); }
.rating__of { font-size: var(--step--1); color: var(--ink-muted); max-width: 16ch; line-height: 1.35; }
.guests .quote:nth-of-type(1) { grid-column: 4 / 8; }
.guests .quote:nth-of-type(2) { grid-column: 8 / 13; }
.guests .link-arrow { grid-column: 4 / 13; justify-self: start; }

/* ── 7. Контакты: фасад, адрес крупно, панель действий, неделя ── */
.contact { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: end; padding-block: var(--section) var(--space-9); }
.contact__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Тон вывески: зелёный слева под текстом, ночь снизу — для читаемости */
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, oklch(0.24 0.045 165 / .94) 0, oklch(0.24 0.045 165 / .72) 46%, oklch(0.24 0.045 165 / .2) 78%),
              linear-gradient(0deg, var(--surface) 0, oklch(0.165 0.008 70 / 0) 38%); }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); align-items: end; }
.contact__main { grid-column: 1 / 8; }
.contact__addr { margin-top: var(--space-4); font-weight: 200; font-size: clamp(3.6rem, 7.4vw, 7.4rem); line-height: .9; letter-spacing: -0.045em; }
.contact__no { display: flex; align-items: center; gap: .14em; font-size: 1.9em; line-height: .82; color: var(--accent); text-shadow: 0 0 .35em oklch(0.70 0.14 65 / .35); }
/* Метка места — горящий ромб рядом с номером дома */
.rhomb--no { position: relative; width: .42em; height: .42em; flex: none; --sw: 14; }
.contact .status { background: oklch(0.165 0.008 70 / .72); }
.contact__near { margin-block: var(--space-5) var(--space-5); font: 600 var(--step--1)/1.4 var(--font-utility); letter-spacing: var(--track-utility); text-transform: uppercase; }
.contact__phone { display: block; width: fit-content; margin-top: var(--space-6); font: 200 clamp(2rem, 3.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); padding-bottom: var(--space-2); transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.contact__phone:hover { color: var(--accent); border-color: var(--accent); }
.actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-top: var(--space-7); border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent); border-radius: var(--radius-control); background: oklch(0.165 0.008 70 / .55); }
.actions li + li .action { border-left: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); }
.action { position: relative; display: grid; gap: var(--space-2); height: 100%; padding: var(--space-5) var(--space-5) var(--space-5); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.action::after { content: "→"; position: absolute; right: var(--space-4); top: var(--space-4); color: var(--accent); transition: transform var(--dur-micro) var(--ease-out); }
.action:hover { background: oklch(0.93 0.018 80 / .07); }
.action:hover::after { transform: translateX(3px); }
.action__t { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .14em; text-transform: uppercase; }
.action__s { font-size: var(--step--1); color: var(--ink-muted); }
.action--main { background: var(--button); }
.action--main:hover { background: var(--button-hover); }
.action--main::after, .action--main .action__s { color: var(--ink); }
.week { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(7, 1fr); max-width: 40rem; border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); border-radius: var(--radius-control); background: oklch(0.165 0.008 70 / .55); }
.week li { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-1); color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.week li + li { border-left: 1px solid var(--line); }
.week__d { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-1); }
.week li.is-today { color: var(--ink); background: oklch(0.70 0.14 65 / .14); }
.week li.is-today .week__d { color: var(--accent); }
.week li.is-today::before { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; background: var(--surface); border: var(--signature-stroke) solid var(--signature-line); transform: translateX(-50%) rotate(45deg); filter: var(--signature-glow); }
.contact__info { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-4) var(--space-7); margin-top: var(--space-6); }
.contact__info dt { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: var(--track-utility); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.contact__info dd { margin: 0; }
.contact__info a { text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* Подвал */
.footer { padding-block: var(--space-7); border-top: 1px solid var(--line); color: var(--ink-muted); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-right: var(--space-10); }
.footer__slogan { font: 200 var(--step-2)/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }

@media (max-width: 1200px) {
  .nav__list { gap: var(--space-4); }
  .nav__list li + li::before { margin-right: var(--space-4); }
  .header__inner { gap: var(--space-6); }
}

/* ── Мобильная композиция ──────────────────────────── */
@media (max-width: 900px) {
  .header__inner { min-height: 64px; }
  .logo img { height: 34px; }
  .header__phone { display: none; }
  .header__call { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent); }
  .mobile-menu { background: var(--surface); min-height: calc(100svh - 64px); }
  .mobile-menu ul { font: 300 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.02em; }
  .mobile-menu .nav__list li + li::before { content: none; }
  .mobile-menu__foot { display: grid; gap: var(--space-4); justify-items: start; margin-top: var(--space-7); }
  .mobile-menu__phone { font-size: var(--step-1); text-decoration: none; }
  .socials { display: flex; gap: var(--space-5); }
  .mobile-menu .socials { font: 600 var(--step--1)/1 var(--font-utility); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

  /* Первый экран: зал сверху с целым ромбом, слоган и бронь — в первом экране */
  .hero { min-height: 0; display: block; padding-top: 35svh; }
  .hero__media { inset: 0 0 auto 0; height: 46svh; }
  .hero__media img { object-position: 50% 40%; }
  .hero::before { background: linear-gradient(0deg, var(--surface) 50%, oklch(0.165 0.008 70 / 0) 72%); }
  .rhomb--hero { width: 50vw; left: 25vw; top: 3svh; transform: none; --sw: 4.5; }
  .hero__inner { padding-block: 0 var(--space-7); }
  .hero__title { margin-block: var(--space-4); }
  .hero__lead { font-size: var(--step-0); }
  .hero__addr { line-height: 2; }
  .hero__actions { margin-top: var(--space-5); }
  .hero__actions .btn { width: 100%; max-width: 26rem; }
  .hero__phone { display: none; }

  .hookah { min-height: 0; display: block; padding-top: 62vw; }
  .hookah__media { inset: 0 0 auto 0; height: 92vw; }
  .hookah__media img { object-position: 64% 40%; }
  .hookah::before { background: linear-gradient(0deg, var(--surface) 42%, oklch(0.165 0.008 70 / 0) 70%); }
  .smoke { left: 46%; top: 10vw; width: 54%; }
  .hookah__inner { padding-block: 0 var(--section); }
  .strength { display: flex; }
  .strength button { flex: 1; padding: 0 var(--space-3); }

  .terrace__head, .terrace__pair, .guests { grid-template-columns: 1fr; }
  .terrace__head > *, .terrace__frame--day, .terrace__frame--night, .rating, .guests .quote:nth-of-type(n), .guests .link-arrow { grid-column: 1; grid-row: auto; }

  /* Кухня: афиша, затем липкая лента разделов и по одной главе на экран */
  .kitchen__top { grid-template-columns: 1fr; margin-bottom: var(--space-8); }
  .kitchen__head, .signature-dish { grid-column: 1; }
  .signature-dish { justify-items: start; text-align: left; margin-top: var(--space-5); }
  .signature-dish__num { font-size: clamp(6rem, 31vw, 8.5rem); }
  .signature-dish__k { width: 4rem; }
  .table-strip { height: 9.5rem; margin-bottom: var(--space-7); }
  .menu { display: block; }
  .menu__nav { position: sticky; top: var(--header-h, 64px); z-index: 5; margin-inline: calc(-1 * var(--gutter)); background: var(--surface); border-bottom: 1px solid var(--line); }
  .menu__nav ol { display: flex; gap: var(--space-2); overflow-x: auto; padding: 0 var(--gutter); border: 0; scrollbar-width: none; scroll-snap-type: x proximity; }
  .menu__nav a { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 0; white-space: nowrap; scroll-snap-align: start; }
  .menu__nav a::before { left: 50%; top: auto; bottom: 0; width: 100%; height: 2px; border: 0; background: var(--accent); transform: translateX(-50%) scaleX(0); filter: none; }
  .menu__nav a.is-active::before { transform: translateX(-50%) scaleX(1); }
  .menu__c { display: none; }
  .menu__book { padding-left: 0; }
  .chapter { padding-top: var(--space-7); }
  .menu__nav a { font: inherit; }
  .menu__book { min-height: 0; }
  .chapter__ghost { font-size: 4.2rem; top: var(--space-4); }
  .dishes { grid-template-columns: 1fr; }
  .dish--hero .dish__name, .dish--hero .price { font-size: var(--step-1); }

  /* Бар */
  .bar__hint { margin-left: 0; }
  .halls__head { justify-items: start; text-align: left; }
  .wall { margin-top: var(--space-7); }
  .bar__cols { grid-template-columns: 1fr; gap: var(--space-7); margin-top: var(--space-8); padding: var(--space-5); }

  /* Контакты */
  .contact { min-height: 0; padding-block: 62vw var(--space-9); background: var(--green); }
  .contact__bg { bottom: auto; height: 92vw; }
  .contact::before { background: linear-gradient(0deg, var(--green) 0, var(--green) calc(100% - 92vw), oklch(0.32 0.045 165 / .55) calc(100% - 52vw), oklch(0.24 0.045 165 / .2) 100%); }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__main { grid-column: 1; }
  .contact__addr { font-size: 15vw; }
  .contact__phone { font-size: 9.4vw; }
  .actions { grid-template-columns: repeat(3, 1fr); }
  .actions li:first-child { grid-column: 1 / -1; }
  .actions li + li .action { border-left: 0; }
  .actions li:nth-child(n+2) .action { border-top: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); padding: var(--space-4) var(--space-3); }
  .actions li:nth-child(n+3) .action { border-left: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); }
  .actions li:nth-child(n+2) .action::after { content: none; }
  .week { max-width: none; }
  .week li { padding-inline: 0; font-size: .78rem; }
  .contact__info { grid-template-columns: 1fr; }

  .halls__grid { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .hall { flex: 0 0 80vw; height: 28rem; scroll-snap-align: start; }

  .terrace__frame--day { width: 78%; }
  .terrace__frame--night { width: 86%; justify-self: end; margin-top: var(--space-6); }
  .terrace__now { position: static; margin-top: var(--space-5); }
  .terrace__head .idx, .terrace__head .h-big { grid-column: 1; }
  body:has(.burger[aria-expanded="true"]) .pu-badge { display: none; }
  .guests { margin-top: var(--space-8); }

  .footer__inner { padding-right: 0; padding-bottom: var(--space-8); }

  /* Липкая бронь: видна после первого экрана, прячется у контактов */
  .sticky-cta { display: flex; gap: var(--space-3); }
  .sticky-cta.is-away { transform: translateY(calc(100% + 2 * var(--gutter))); }
  .sticky-cta .btn { flex: 1; width: auto; box-shadow: 0 8px 24px oklch(0.1 0.01 70 / .5); }
  .sticky-cta__call { display: grid; place-items: center; flex: 0 0 56px; background: var(--green); color: var(--ink); border-radius: var(--radius-control); }
}

@media (prefers-reduced-motion: reduce) {
  .table-strip { animation: none; width: auto; overflow-x: auto; }
  .menu.is-tabs .chapter.is-active { animation: none; }
  .js .rhomb[data-ignite] path, .js .rhomb.is-lit path { stroke-dashoffset: 0; opacity: var(--lit, 1); animation: none; }
  .js .hero__media img, .js .hero__inner > * { animation: none; }
  .smoke i { animation: none; opacity: .6; transform: translate(-20%, -40%); }
  .reveal { filter: none; }
}

/* ── Плашка PowerUP (чужой фирменный элемент, не из токенов) ── */
/* Плашка PowerUP — в духе «Powered by Netlify» (пилюля, отступ 18px от угла, системный шрифт 13px)
   в фирменных цветах powerup-go.uz. Самодостаточна: не зависит от токенов проекта. Одна и та же во всех проектах —
   текст, цвета и размеры не менять без явной просьбы. */
.pu-badge {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(212, 175, 55, 0.22); border-radius: 999px;
  background: linear-gradient(180deg, #151515, #050505);
  color: #F0F0F0; text-decoration: none;
  font: 600 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .01em; -webkit-font-smoothing: antialiased;
  transition: border-color .2s ease, bottom .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pu-badge:hover { border-color: rgba(212, 175, 55, 0.55); }
.pu-badge:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.pu-badge__label { color: #D5D5D5; font-weight: 500; }
.pu-badge img { display: block; width: auto; height: 26px; max-width: none; flex: none; }
@media (prefers-reduced-motion: reduce) { .pu-badge { transition: none; } }

@media (max-width: 900px) { .sticky-cta.is-on:not(.is-away) ~ .pu-badge { bottom: 94px; } }
/* Если у сайта есть липкая нижняя панель (кнопки на телефоне) — поднять плашку над ней, пока панель видна.
   Пример для static-starter (.sticky-cta.is-on, высота ~76px):
   @media (max-width: 900px) { .sticky-cta.is-on:not(.is-away) ~ .pu-badge { bottom: 94px; } } */