/* Generated chrome.css — edit fonts.css, style.css, header.css. */
/* === assets/css/fonts.css === */
/**
 * Ubuntu — локальные шрифты вместо Google Fonts.
 *
 * Файлы взяты из официальной раздачи Google (вариант без TrueType-хинтинга —
 * тот же, что браузеры телефонов получали с fonts.gstatic.com) и лежат в
 * assets/fonts. unicode-range сохранён: браузер скачивает только те
 * подмножества, символы которых реально встретились на странице.
 * Греческие подмножества не переносились — на сайте их нет.
 * font-display: optional — на медленной сети остаётся Arial, без прыжка
 * текста. Кириллица 400 и 700 предзагружается, обычно Ubuntu успевает.
 */

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url('../fonts/ubuntu-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url('../fonts/ubuntu-400-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url('../fonts/ubuntu-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url('../fonts/ubuntu-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: optional;
	src: url('../fonts/ubuntu-500-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: optional;
	src: url('../fonts/ubuntu-500-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: optional;
	src: url('../fonts/ubuntu-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: optional;
	src: url('../fonts/ubuntu-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: optional;
	src: url('../fonts/ubuntu-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: optional;
	src: url('../fonts/ubuntu-700-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: optional;
	src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: optional;
	src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === style.css === */
/*
 * Shared first-paint skeleton: page background, type, links, breadcrumbs.
 * Fonts and header are concatenated with this file into chrome.css.
 * Page layouts keep their own tokens and resets.
 */

html {
	background-color: #1c1c1c;
	color-scheme: dark;
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: #1c1c1c;
	color: #b3b3b3;
	font-family: 'Ubuntu', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
	overflow-x: clip;
}

h1,
h2,
h3 {
	color: #ffffff;
	font-weight: 700;
}

/* Счётчики: моноширинные цифры, чтобы число не дёргало ширину при анимации. */
[data-count],
.count-up {
	font-variant-numeric: tabular-nums;
}

a {
	color: #ff0004;
}

/* На тёмном фоне текстовая ссылка при наведении светлеет, а не гаснет:
 * тёмный hover #d40c10 остаётся залитым кнопкам. */
a:hover {
	color: #ff6b6d;
}

/* Полупрозрачная заливка: длинное выделение (документы, статьи) читается,
 * бренд остаётся. Сплошной #ff0004 превращал абзац в красное полотно. */
::selection {
	background: rgba(255, 0, 4, 0.35);
	color: #fff;
}

/* Хлебные крошки — общий блок (блог и документы рисуют свои). */
.esc-crumbs {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: 24px 24px 0;
	box-sizing: border-box;
}

.esc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #8f8f8f;
}

.esc-crumbs a {
	color: #b3b3b3;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

/* 14px — мелкий кегль: по канону здесь только #ff6b6d, чистый акцент нечитаем. */
.esc-crumbs a:hover,
.esc-crumbs a:focus-visible {
	color: #ff6b6d;
}

.esc-crumbs-sep {
	color: #ff6b6d;
}

.esc-crumbs li[aria-current="page"] {
	color: #b3b3b3;
}

@media (max-width: 720px) {
	.esc-crumbs {
		padding-top: 16px;
	}

	.esc-crumbs a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esc-crumbs a {
		transition: none;
	}
}

/*
 * Утилиты вместо инлайн-стилей (вынос 20.08.2026 ради строгой CSP:
 * style-атрибуты в разметке она запрещает). !important воспроизводит
 * приоритет инлайн-стиля: без него правила страниц, загружаемые позже,
 * перебивали бы утилиту. Динамические фоны — data-esc-bg, применяет header.js.
 */
.esc-u-pt0 { padding-top: 0 !important; }
.esc-u-pt-lg { padding-top: clamp(48px, 6vw, 80px) !important; }
.esc-u-pt-md { padding-top: clamp(28px, 3.5vw, 44px) !important; }
.esc-u-mt-sec { margin-top: clamp(52px, 6.5vw, 96px) !important; }
.esc-u-mb-md { margin-bottom: clamp(20px, 2.4vw, 28px) !important; }
.esc-u-glow { top: -160px !important; left: -120px !important; }
.esc-u-offscreen { position: absolute !important; left: -9999px !important; height: 0 !important; overflow: hidden !important; }
.esc-u-offscreen0 { position: absolute !important; left: -9999px !important; height: 0 !important; width: 0 !important; opacity: 0 !important; }
.esc-u-center { margin-inline: auto !important; text-align: center !important; }
.esc-u-center-mt { text-align: center !important; margin-top: 44px !important; }
.esc-u-jcc { justify-content: center !important; }
.esc-u-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 26px !important; position: relative !important; z-index: 2 !important; }
.esc-u-actions-c { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; margin-top: 44px !important; }
.esc-u-row-mt28 { margin-top: 28px !important; display: flex !important; }
.esc-u-ico15 { width: 15px !important; height: 15px !important; }
.esc-u-ico18 { width: 18px !important; height: 18px !important; }
.esc-u-ico24 { width: 24px !important; height: 24px !important; }
.esc-u-minh120 { min-height: 120px !important; }
.esc-u-fill { flex: 1 1 auto !important; min-width: 0 !important; }
.esc-u-self-c { align-self: center !important; }
.esc-u-self-start { position: relative !important; align-self: flex-start !important; }
.esc-u-note { padding: 24px !important; color: #ff6b6d !important; font: 16px/1.5 sans-serif !important; }
.esc-u-logo-ar { aspect-ratio: 671/410 !important; }

/* ====================== Loading placeholders (assets/js/media-skel.js) ======================
   .esc-skel — box of one photo: shimmer until the photo arrives, then a fade-in;
   add .esc-skel--b when the box's ::after is taken — the shimmer goes to ::before.
   .esc-vwait — box with a spinner (.is-buffering): a video inside switches it itself
   while it waits for data after «play»; other boxes set it by hand (photo viewer).
   Base rules sit in :where() so any page rule about the box wins. */
:where(.esc-skel){ position:relative; overflow:hidden; background-color:#242424; }
.esc-skel:not(.esc-skel--b)::after, .esc-skel--b::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transform:translateX(-100%);
  background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.07) 50%, transparent 75%); transition:opacity .45s ease-in-out; }
.esc-skel.is-loading:not(.esc-skel--b)::after, .esc-skel--b.is-loading::before{ opacity:1; animation:escSkelSweep 1.5s ease-in-out infinite; }
.esc-skel.is-loading img, .esc-skel.is-failed img{ opacity:0; }
.esc-skel.is-loaded img{ animation:escSkelIn .45s ease-in-out; }
:where(.esc-vwait){ position:relative; }
.esc-vwait::before{ content:""; position:absolute; left:50%; top:50%; z-index:4; width:48px; height:48px; margin:-24px 0 0 -24px;
  box-sizing:border-box; border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:#ff0004; background:rgba(15,15,15,.55);
  pointer-events:none; opacity:0; transition:opacity .3s ease-in-out; }
.esc-vwait.is-buffering::before{ opacity:1; animation:escSkelSpin .9s linear infinite; }
@keyframes escSkelSweep{ to{ transform:translateX(100%); } }
@keyframes escSkelIn{ from{ opacity:0; } }
@keyframes escSkelSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .esc-skel.is-loading::after, .esc-skel--b.is-loading::before, .esc-skel.is-loaded img, .esc-vwait.is-buffering::before{ animation:none; }
}

/* === assets/css/header.css === */
/* ===== escape. шапка страницы города ===== */
:root{
  --nav-h:76px;
  --esc-nav-h:76px;
  /* Notch, home indicator and landscape cutouts of a pinned page
     (viewport-fit=cover in header.php). 0 in a normal browser tab. */
  --esc-safe-top:env(safe-area-inset-top,0px);
  --esc-safe-bottom:env(safe-area-inset-bottom,0px);
  --esc-safe-left:env(safe-area-inset-left,0px);
  --esc-safe-right:env(safe-area-inset-right,0px);
}
/* The page starts below the status bar, so hero paddings and anchor
   offsets that count from --nav-h stay valid; the fixed header grows
   upward to paint the strip. */
html{ scroll-padding-top:var(--esc-safe-top); }
body{ padding-top:var(--esc-safe-top); }
.esc-gh,.esc-gh-mm,.esc-gh-progress{
  --accent:#ff0004; --accent-hover:#d40c10; --accent-text:#ff6b6d;
  --accent-soft:rgba(255,0,4,.12);
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --surface:#242424; --surface-2:#2b2b2b; --surface-3:#1f1f1f;
  --muted:#b3b3b3; --muted-2:#8f8f8f; --container:1200px;
}
.esc-gh{ position:fixed; top:0; left:0; right:0; z-index:9990; height:calc(76px + var(--esc-safe-top)); padding-top:var(--esc-safe-top);
  display:flex; align-items:center;
  border-bottom:1px solid transparent; font-family:'Ubuntu',Arial,sans-serif;
  /* backdrop-filter is not animated: a blur in a transition repaints the whole
     bar every frame; it switches with the .scrolled class instead. */
  transition:background .3s ease-in-out, border-color .3s ease-in-out; }
/* Legibility of the transparent bar over a bright first-screen photo (/games):
   a soft top scrim that fades out below the bar; gone once scrolled. */
.esc-gh::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:-48px; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .3s ease-in-out;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,0) 100%); }
.esc-gh:not(.scrolled):not(.is-solid)::before,
body:not(.single-post) .esc-gh.is-solid:not(.scrolled)::before{ opacity:1; }
.esc-gh :where(*),.esc-gh-mm :where(*){ box-sizing:border-box; margin:0; }
.esc-gh a,.esc-gh-mm a{ text-decoration:none; color:#fff; }
.esc-gh button,.esc-gh-mm button{ font:inherit; background:none; border:none; cursor:pointer; padding:0; }
.esc-gh :focus-visible,.esc-gh-mm :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.esc-gh.scrolled{ background:rgba(15,15,15,.82);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border); }
.esc-gh.is-solid{ background:rgba(15,15,15,.92);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border); }
/* Dark pages without a hero photo behave like the hero ones: transparent over
   the page colour, dark once scrolled. White blog posts keep the solid bar
   (owner, 2026-09-21). */
body:not(.single-post) .esc-gh.is-solid:not(.scrolled){ background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
.esc-gh-progress{ position:fixed; top:var(--esc-safe-top); left:0; height:2px; width:100%; transform:scaleX(0);
  transform-origin:0 50%; background:var(--accent); z-index:9991; pointer-events:none; }
.esc-gh-in{ width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:calc(24px + var(--esc-safe-left)) calc(24px + var(--esc-safe-right));
  display:flex; align-items:center; gap:18px; }
.esc-gh-logo{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:44px; min-height:44px; }
.esc-gh-logo img{ height:34px; width:auto; display:block; aspect-ratio:671/410; }

/* переключатель города */
.esc-gh-city{ position:relative; flex:0 1 auto; min-width:0; }
.esc-gh-city-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:5px 12px; margin:-2px 0;
  max-width:100%; border-radius:999px; border:1px solid var(--border-strong); background:rgba(255,255,255,.05);
  color:var(--muted); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; line-height:1; transition:border-color .25s ease-in-out, color .25s ease-in-out; }
.esc-gh-city-btn:hover{ border-color:var(--accent); color:#fff; }
.esc-gh-city-btn.is-unset{ border-color:rgba(255,0,4,.55); color:#fff; }
.esc-gh-city-btn.is-unset b{ color:#fff; }
.esc-gh-city-btn b{ color:#fff; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.esc-gh-city-btn svg{ width:13px; height:13px; flex:0 0 auto; transition:transform .25s ease-in-out; }
.esc-gh-city[data-open="1"] .esc-gh-city-btn svg:last-child{ transform:rotate(180deg); }
.esc-gh-drop{ position:absolute; top:calc(100% + 12px); left:0; min-width:264px; z-index:5; padding:8px;
  border-radius:16px; border:1px solid var(--border-strong); background:var(--surface-3);
  box-shadow:0 20px 50px rgba(0,0,0,.55); opacity:0; transform:translateY(-8px); pointer-events:none;
  visibility:hidden;
  transition:opacity .22s ease-in-out, transform .22s ease-in-out, visibility 0s .22s; }
.esc-gh-city[data-open="1"] .esc-gh-drop{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition-delay:0s; }
.esc-gh-drop p{ margin:0; padding:8px 12px 10px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.esc-gh-drop a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px;
  padding:10px 12px; border-radius:10px; color:#e8e8e8; font-size:15px;
  transition:background .2s ease-in-out, color .2s ease-in-out; }
.esc-gh-drop a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.esc-gh-drop a > span:not(.esc-gh-art-tx):not(.esc-gh-art-ph){ font-size:13px; color:var(--muted); white-space:nowrap; }
.esc-gh-drop a.is-current{ background:var(--accent-soft); color:#fff; }
.esc-gh-drop a.is-current span{ color:var(--accent-text); }
/* the chosen city keeps its address; the mark is a dot, like the chips of the mobile menu.
   The dot sits in the left gutter of every row: as a flex item it became a third
   child of the space-between row and pushed the name towards the middle */
.esc-gh-city .esc-gh-drop p{ padding-left:24px; }
.esc-gh-city .esc-gh-drop a{ position:relative; padding-left:24px; }
.esc-gh-drop a.is-current::before{ content:""; position:absolute; left:11px; top:50%; width:6px; height:6px;
  margin-top:-3px; border-radius:50%; background:var(--accent); }

/* блог — выпадающий список статей */
.esc-gh-blog{ position:relative; display:flex; align-items:center; }
.esc-gh-blog > a{ display:inline-flex; align-items:center; gap:5px; }
.esc-gh-blog > a > svg{ width:12px; height:12px; flex:0 0 auto; transition:transform .25s ease-in-out; }
.esc-gh-blog[data-open="1"] > a > svg{ transform:rotate(180deg); }
.esc-gh-drop--blog{ left:auto; right:0; min-width:min(392px, 90vw); max-width:min(412px, 90vw); padding:10px; transform:translateY(-8px);
  /* the blog list is taller than a 768px laptop screen; the bar is fixed, so
     the page cannot be scrolled to the last rows — the panel scrolls itself */
  max-height:calc(100vh - 112px); overflow-y:auto; overscroll-behavior:contain; }
.esc-gh-blog[data-open="1"] .esc-gh-drop--blog{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition-delay:0s; }
/* «Игры» — первый пункт: панель от левого края, иначе уезжает под логотип */
.esc-gh-games .esc-gh-drop--blog{ left:0; right:auto; }
.esc-gh-drop--blog p{ display:flex; align-items:center; gap:9px; padding:6px 8px 10px; }
.esc-gh-drop--blog p::before{ content:""; width:18px; height:1px; background:var(--accent); opacity:.7; flex:0 0 auto; }
.esc-gh-nav .esc-gh-drop a{ text-transform:none; letter-spacing:0; font-size:15px; font-weight:400;
  white-space:normal; line-height:1.35; }
.esc-gh-nav .esc-gh-drop a::after{ content:none; }
.esc-gh-nav .esc-gh-drop a:hover{ color:#fff; }
.esc-gh-drop a.esc-gh-art{ justify-content:flex-start; gap:12px; min-height:0; padding:8px; align-items:center; }
.esc-gh-art-ph{ width:60px; height:44px; flex:0 0 auto; overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(100deg, var(--surface-2) 40%, #3a3a3a 50%, var(--surface-2) 60%);
  background-size:200% 100%; animation:escGhShimmer 1.4s linear infinite; }
@keyframes escGhShimmer{ to{ background-position:-200% 0; } }
/* the shimmer is a placeholder: once the photo is in, it stops (an endless
   animation under every thumbnail of an open menu costs frames on phones) */
.esc-gh-art-ph:has(img.ld){ animation:none; }
.esc-gh-art-ph img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0;
  transition:transform .45s ease-in-out, opacity .3s ease-in-out; }
.esc-gh-art-ph img.ld{ opacity:1; }
.esc-gh-art:hover .esc-gh-art-ph img{ transform:scale(1.07); }
.esc-gh-art-tx{ display:block; min-width:0; white-space:normal; }
.esc-gh-art-tx em{ display:block; margin-bottom:3px; font-style:normal; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }
.esc-gh-art-tx b{ font-size:14px; font-weight:500; line-height:1.35; color:#e8e8e8; white-space:normal;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  transition:color .2s ease-in-out; }
.esc-gh-art:hover .esc-gh-art-tx b{ color:#fff; }
.esc-gh-drop a.is-all{ justify-content:center; gap:8px; margin-top:8px; min-height:46px;
  border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:10px;
  color:var(--accent-text); font-weight:500; transition:color .2s ease-in-out, border-color .2s ease-in-out; }
.esc-gh-drop a.is-all svg{ width:14px; height:14px; flex:0 0 auto; transition:transform .3s ease-in-out; }
.esc-gh-drop a.is-all:hover{ color:#fff; border-color:var(--accent); }
.esc-gh-drop a.is-all:hover svg{ transform:translateX(3px); }

/* якорные разделы */
.esc-gh-nav{ display:flex; align-items:center; gap:30px; min-width:0; margin-inline:auto; }
.esc-gh-nav > a,.esc-gh-blog > a{ position:relative; font-size:14px; font-weight:400; text-transform:uppercase;
  letter-spacing:.04em; white-space:nowrap; color:#fff; transition:color .2s ease-in-out; }
.esc-gh-nav > a::after,.esc-gh-blog > a::after{ content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px;
  border-radius:2px; background:var(--accent); transition:right .32s ease-in-out; }
.esc-gh-nav > a:hover::after,.esc-gh-nav > a.is-active::after,.esc-gh-blog > a:hover::after,.esc-gh-blog > a.is-active::after{ right:0; }
.esc-gh-nav > a:hover,.esc-gh-nav > a.is-active,.esc-gh-blog > a:hover,.esc-gh-blog > a.is-active{ color:var(--accent); }

.esc-gh-cta{ display:flex; align-items:center; gap:14px; margin-left:auto; flex:0 0 auto; }
.esc-gh-phone{ font-weight:700; font-size:16px; white-space:nowrap; color:#fff; transition:color .2s ease-in-out; }
.esc-gh-phone:hover{ color:var(--accent); }
.esc-gh-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px;
  border-radius:6px; background:var(--accent); color:#fff; font-weight:500; font-size:16px;
  line-height:1; white-space:nowrap;
  transition:background-color .2s ease-in-out, transform .2s ease-in-out; }
.esc-gh-btn:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.esc-gh-phone-ico{ display:none; width:46px; height:46px; border-radius:12px;
  border:1px solid var(--border-strong); background:rgba(255,255,255,.04); place-items:center; color:#fff; }
.esc-gh-phone-ico svg{ width:20px; height:20px; }
.esc-gh-burger{ display:none; width:46px; height:46px; flex:0 0 auto; border-radius:12px;
  border:1px solid var(--border-strong); background:rgba(255,255,255,.04);
  align-items:center; justify-content:center; }
.esc-gh-burger span{ display:block; width:20px; height:2px; background:#fff; position:relative;
  transition:background .3s ease-in-out; }
.esc-gh-burger span::before,.esc-gh-burger span::after{ content:""; position:absolute; left:0; width:20px;
  height:2px; background:#fff; transition:transform .3s ease-in-out, top .3s ease-in-out; }
.esc-gh-burger span::before{ top:-6px; }
.esc-gh-burger span::after{ top:6px; }
.esc-gh-burger.open span{ background:transparent; }
.esc-gh-burger.open span::before{ top:0; transform:rotate(45deg); }
.esc-gh-burger.open span::after{ top:0; transform:rotate(-45deg); }

/* ===== мобильное меню ===== */
.esc-gh-mm{ position:fixed; top:calc(76px + var(--esc-safe-top)); left:0; right:0; bottom:0; z-index:9989; display:flex; flex-direction:column;
  padding:24px calc(24px + var(--esc-safe-right)) calc(40px + var(--esc-safe-bottom)) calc(24px + var(--esc-safe-left)); overflow-y:auto; overscroll-behavior:contain; background:rgba(15,15,15,.97);
  font-family:'Ubuntu',Arial,sans-serif; color:#fff; opacity:0; transform:translateY(-12px);
  visibility:hidden; pointer-events:none;
  transition:opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s .3s; }
/* no backdrop-filter here: under a 97 % opaque background the blur is invisible
   but still repaints on every scroll of the menu */
.esc-gh-mm.open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
/* red glow in the corner — a wide radial gradient, no filter:blur (GPU cost on phones) */
.esc-gh-mm::before{ content:""; position:fixed; top:-200px; right:-200px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,0,4,.26) 0%, rgba(255,0,4,.1) 35%, transparent 68%);
  pointer-events:none; }
/* stagger: 30 ms steps, the last block lands at ~0.6 s instead of ~1.05 s */
.esc-gh-mm > *{ opacity:0; transform:translateY(16px);
  transition:opacity .35s ease-in-out, transform .35s ease-in-out; }
.esc-gh-mm.open > *{ opacity:1; transform:none; }
.esc-gh-mm:not(.open) > *{ transition-delay:0s; }
.esc-gh-mm.open > *:nth-child(2){ transition-delay:.03s; }
.esc-gh-mm.open > *:nth-child(3){ transition-delay:.06s; }
.esc-gh-mm.open > *:nth-child(4){ transition-delay:.09s; }
.esc-gh-mm.open > *:nth-child(5){ transition-delay:.12s; }
.esc-gh-mm.open > *:nth-child(6){ transition-delay:.15s; }
.esc-gh-mm.open > *:nth-child(7){ transition-delay:.18s; }
.esc-gh-mm.open > *:nth-child(8){ transition-delay:.21s; }
.esc-gh-mm.open > *:nth-child(9){ transition-delay:.24s; }
.esc-gh-mm-h{ display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.esc-gh-mm-h::before{ content:""; width:18px; height:1px; background:var(--accent); opacity:.7; flex:0 0 auto; }
.esc-gh-chips{ display:flex; gap:8px; margin-bottom:26px; }
.esc-gh-chip{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:56px; padding:10px 8px; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--surface-2); color:#fff;
  font-size:15px; font-weight:500; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:border-color .2s ease-in-out, color .2s ease-in-out, background .2s ease-in-out,
    transform .2s ease-in-out; }
.esc-gh-chip:hover{ border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }
.esc-gh-chip:active{ transform:scale(.975); }
.esc-gh-chip.is-current{ border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700;
  box-shadow:0 6px 18px rgba(255,0,4,.3); }
.esc-gh-chip.is-current:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.esc-gh-chip.is-current::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:#fff; flex:0 0 auto; }
.esc-gh-mm-links{ display:flex; flex-direction:column; margin-bottom:22px; }
.esc-gh-mm-links a{ display:flex; align-items:center; gap:13px; min-height:56px; padding:14px 0;
  font-size:18px; font-weight:500; color:#fff; border-bottom:1px solid var(--border);
  transition:color .2s ease-in-out; }
.esc-gh-mm-links a > span:not(.esc-gh-ic){ flex:1 1 auto; min-width:0; }
.esc-gh-ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--border); background:var(--surface); color:var(--muted-2);
  transition:color .25s ease-in-out, border-color .25s ease-in-out, background .25s ease-in-out; }
.esc-gh-ic svg{ width:17px; height:17px; }
.esc-gh-mm-links a::after{ content:""; width:7px; height:7px; border-right:2px solid var(--muted-2);
  border-top:2px solid var(--muted-2); transform:rotate(45deg); flex:0 0 auto;
  transition:border-color .2s ease-in-out; }
.esc-gh-mm-links a.is-active .esc-gh-ic{ color:#fff; background:var(--accent); border-color:transparent; }
.esc-gh-mm-links a.is-active::after{ border-color:var(--accent); }
.esc-gh-mm-links a:hover{ color:var(--accent); }
.esc-gh-mm-links a:hover .esc-gh-ic{ color:#fff; border-color:var(--border-strong); background:var(--surface-2); }
.esc-gh-mm-links a:hover::after{ border-color:var(--accent); }
.esc-gh-mm-links a:active{ color:var(--accent); }
.esc-gh-mm-blog{ border-bottom:1px solid var(--border); }
.esc-gh-mm .esc-gh-mm-blogbtn{ display:flex; align-items:center; gap:13px; width:100%; min-height:56px;
  padding:14px 0; font-size:18px; font-weight:500; color:#fff; text-align:left;
  transition:color .2s ease-in-out; }
.esc-gh-mm-blogbtn:hover{ color:var(--accent); }
.esc-gh-mm-blogbtn:hover .esc-gh-ic{ color:#fff; border-color:var(--border-strong); background:var(--surface-2); }
.esc-gh-mm-blogbtn:hover::after{ border-color:var(--accent); }
.esc-gh-mm-blogbtn > span:not(.esc-gh-ic){ flex:1 1 auto; min-width:0; }
.esc-gh-mm-blogbtn::after{ content:""; width:7px; height:7px; border-right:2px solid var(--muted-2);
  border-top:2px solid var(--muted-2); transform:rotate(45deg); flex:0 0 auto;
  transition:transform .25s ease-in-out, border-color .2s ease-in-out; }
.esc-gh-mm-blog.open .esc-gh-mm-blogbtn::after{ transform:rotate(135deg); border-color:var(--accent); }
.esc-gh-mm-blog.open .esc-gh-mm-blogbtn .esc-gh-ic,
.esc-gh-mm-blogbtn.is-active .esc-gh-ic{ color:#fff; background:var(--accent); border-color:transparent; }
.esc-gh-mm-sub{ display:none; flex-direction:column; margin-left:17px; padding:2px 0 14px 29px;
  border-left:1px solid var(--border-strong); }
.esc-gh-mm-blog.open .esc-gh-mm-sub{ display:flex; }
.esc-gh-mm-links .esc-gh-mm-sub a{ min-height:44px; padding:8px 0; border-bottom:none;
  font-size:15px; font-weight:400; color:var(--muted); }
.esc-gh-mm-links .esc-gh-mm-sub a:hover{ color:#fff; }
.esc-gh-mm-links .esc-gh-mm-sub a.esc-gh-mm-art{ display:flex; align-items:center; gap:12px;
  min-height:56px; padding:8px 0; }
.esc-gh-mm-art .esc-gh-art-ph{ flex:0 0 72px; width:72px; height:52px; border-radius:0; }
.esc-gh-mm-art:hover .esc-gh-art-tx b{ color:#fff; }
.esc-gh-mm-links .esc-gh-mm-sub a::after{ content:none; }
.esc-gh-mm-links .esc-gh-mm-sub a.is-all{ color:var(--accent-text); font-weight:500; }
.esc-gh-acts{ display:grid; gap:10px; }
.esc-gh-acts a{ display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:14px 24px; border-radius:6px; font-weight:500; font-size:16px;
  transition:background-color .2s ease-in-out, color .2s ease-in-out, transform .2s ease-in-out; }
.esc-gh-acts a:active{ transform:scale(.975); }
.esc-gh-acts .is-primary{ background:var(--accent); color:#fff; }
.esc-gh-acts .is-primary:hover,.esc-gh-acts .is-primary:active{ background:var(--accent-hover); color:#fff; }
.esc-gh-acts .is-ghost{ border:1px solid var(--accent); color:var(--accent); }
.esc-gh-acts .is-ghost:hover,.esc-gh-acts .is-ghost:active{ background:var(--accent); color:#fff; }
.esc-gh-acts .is-max{ gap:9px; border:1px solid var(--border-strong); background:var(--surface); color:#fff; }
.esc-gh-acts .is-max:hover{ border-color:#8B5CF6; }
.esc-gh-max-ic{ width:24px; height:24px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,#4cf 0%,#53e 66%,#93d 100%); color:#fff; }
.esc-gh-max-ic svg{ width:15px; height:15px; }
.esc-gh-mm-note{ display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--muted-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.esc-gh-clubs{ display:grid; gap:10px; margin-top:16px; }
.esc-gh-club{ border:1px solid var(--border); border-radius:14px; background:var(--surface);
  padding:13px 14px; display:flex; flex-direction:column; gap:11px; }
.esc-gh-club-top{ display:flex; align-items:center; gap:12px; }
.esc-gh-club-ph{ width:66px; height:48px; flex:0 0 auto; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2); }
.esc-gh-club-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.esc-gh-club-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.esc-gh-club-info b{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; }
.esc-gh-club-dot{ width:7px; height:7px; border-radius:50%; background:#ff3b30; flex:0 0 auto; }
.esc-gh-club-dot.is-open{ background:#35c759; }
.esc-gh-club-addr{ font-size:13px; color:var(--muted); }
.esc-gh-club-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.esc-gh-mm .esc-gh-cbtn{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px;
  border-radius:10px; border:1px solid var(--border-strong); font-size:13px; font-weight:500;
  color:var(--muted); transition:color .25s ease-in-out, border-color .25s ease-in-out; }
.esc-gh-cbtn svg{ width:15px; height:15px; flex:0 0 auto; }
.esc-gh-mm .esc-gh-cbtn:hover{ border-color:var(--accent); color:var(--accent); }
.esc-gh-mm .esc-gh-cbtn.is-call{ color:#fff; background:rgba(45,168,74,.16); border-color:rgba(45,168,74,.5); }
.esc-gh-mm .esc-gh-cbtn.is-call:hover{ border-color:rgba(45,168,74,.85); color:#fff; }
.esc-gh-soc{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.esc-gh-soc a{ display:grid; place-items:center; min-height:56px; padding:10px;
  border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--muted);
  transition:border-color .25s ease-in-out, color .25s ease-in-out, transform .25s ease-in-out; }
.esc-gh-soc a:hover{ color:#fff; border-color:var(--border-strong); transform:translateY(-2px); }
.esc-gh-soc a:active{ border-color:var(--accent); color:var(--accent); }
.esc-gh-soc .esc-gh-soc-ic{ display:grid; place-items:center; color:#fff; }
.esc-gh-soc .esc-gh-soc-ic svg{ width:20px; height:20px; }
.esc-gh-mm-close{ display:flex; align-items:center; justify-content:center; width:100%; min-height:52px;
  margin-top:20px; border:1px solid var(--border-strong); border-radius:6px; background:none;
  color:var(--muted); font-size:16px; font-weight:500;
  transition:border-color .2s ease-in-out, color .2s ease-in-out; }
.esc-gh-mm-close:hover{ border-color:var(--accent); color:#fff; }
.esc-gh-mm-close:active{ transform:scale(.985); }
.esc-gh-hours{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding-top:18px;
  border-top:1px solid var(--border); }
.esc-gh-tag{ display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:6px 13px;
  border-radius:999px; border:1px solid var(--border-strong); background:rgba(255,255,255,.04);
  font-size:12.5px; font-weight:500; color:var(--muted); white-space:nowrap; }
.esc-gh-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff3b30; flex:0 0 auto; }
.esc-gh-dot.is-open{ background:#35c759; animation:escGhPulse 2s ease-in-out infinite; }
@keyframes escGhPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(53,199,89,.45); }
  50%{ box-shadow:0 0 0 5px rgba(53,199,89,0); }
}

/* якоря не прячутся под шапку */
section[id]{ scroll-margin-top:86px; }

/* распорка: сдвигает контент под фиксированную шапку (в HTML с первого кадра,
   чтобы не прыгала вёрстка, когда подключается header.js) */
.esc-gh-spacer{ height:76px; background:#1c1c1c; flex:0 0 auto; }

body:has(.esc-gh-mm.open){ overflow:hidden; }

@media (max-width:1150px){
  .esc-gh-nav{ gap:18px; }
  .esc-gh-nav > a,.esc-gh-blog > a{ font-size:13px; }
  .esc-gh-phone{ display:none; }
  .esc-gh-phone-ico{ display:grid; }
}
@media (max-width:1090px){
  .esc-gh-nav{ display:none; }
  .esc-gh-burger{ display:flex; }
  .esc-gh-btn{ height:44px; padding:0 16px; font-size:15px; }
}
@media (max-width:760px){
  :root{ --nav-h:64px; --esc-nav-h:64px; }
  .esc-gh{ height:calc(64px + var(--esc-safe-top)); }
  .esc-gh-mm{ top:calc(64px + var(--esc-safe-top)); }
  .esc-gh-in{ gap:8px; }
  .esc-gh-logo img{ height:28px; }
  .esc-gh-btn,.esc-gh-drop{ display:none; }
  .esc-gh-city-btn{ font-size:11px; padding:7px 10px; gap:4px; white-space:normal; }
  .esc-gh-city-btn b{ max-width:8.4em; }
  .esc-gh-phone-ico,.esc-gh-burger{ width:44px; height:44px; }
  .esc-gh-spacer{ height:64px; }
  section[id]{ scroll-margin-top:74px; }
}
@media (max-width:430px){
  .esc-gh-city-btn b{ max-width:none; }
}
body.admin-bar section[id]{ scroll-margin-top:118px; }
@media (max-width:782px){
  body.admin-bar section[id]{ scroll-margin-top:120px; }
}
@media (prefers-reduced-motion: reduce){
  .esc-gh,.esc-gh-drop,.esc-gh-mm,.esc-gh-mm > *,.esc-gh-nav a::after,.esc-gh-blog > a::after,
  .esc-gh-burger span,.esc-gh-burger span::before,.esc-gh-burger span::after,
  .esc-gh-btn,.esc-gh-chip,.esc-gh-soc a,.esc-gh-acts a,.esc-gh-city-btn svg,
  .esc-gh-blog > a > svg,.esc-gh-art-ph img,.esc-gh-cbtn,.esc-gh-mm-close{ transition:none; transform:none; }
  .esc-gh-btn:hover,.esc-gh-chip:hover,.esc-gh-chip:active,.esc-gh-soc a:hover,.esc-gh-soc a:active,
  .esc-gh-acts a:hover,.esc-gh-acts a:active,.esc-gh-mm-close:active,.esc-gh-art:hover .esc-gh-art-ph img,
  .esc-gh-drop a.is-all:hover svg{ transform:none; }
  .esc-gh-dot.is-open{ animation:none; }
  .esc-gh-art-ph{ animation:none; }
  .esc-gh::before{ transition:none; }
}

@media print{ .esc-gh,.esc-gh-mm,.esc-gh-progress,.esc-gh-spacer{ display:none !important; } }

/* ===== WordPress ===== */
/* The toolbar pushes everything fixed down. On a pinned page it is the
   toolbar that sits under the status bar, not the header (core already
   offsets the page with html{margin-top}). */
body.admin-bar{ padding-top:0; }
body.admin-bar #wpadminbar{ top:var(--esc-safe-top); }
body.admin-bar .esc-gh{ padding-top:0; height:76px; }
body.admin-bar .esc-gh,body.admin-bar .esc-gh-progress{ top:calc(32px + var(--esc-safe-top)); }
body.admin-bar .esc-gh-mm{ top:calc(108px + var(--esc-safe-top)); }
@media screen and (max-width:782px){
  body.admin-bar .esc-gh,body.admin-bar .esc-gh-progress{ top:calc(46px + var(--esc-safe-top)); }
  body.admin-bar .esc-gh-mm{ top:calc(122px + var(--esc-safe-top)); }
}
@media screen and (max-width:760px){
  body.admin-bar .esc-gh{ height:64px; }
  body.admin-bar .esc-gh-mm{ top:calc(110px + var(--esc-safe-top)); }
}
/* тема не должна закрашивать шапку своими сбросами */
.esc-gh img,.esc-gh-mm img{ max-width:none; }
.esc-gh button,.esc-gh-mm button{ box-shadow:none; text-transform:none; letter-spacing:normal; }