/* Собранный файл стилей: шрифты, оформление сайта и правила,
 * перенесённые из прежней вёрстки. Собирается build_css.py —
 * править нужно исходные файлы, а не этот. */

/* --- fonts.css --- */
/* Шрифты сайта, скачанные с Google Fonts и подключённые локально:
 * так браузер не ходит на чужой домен и страница показывается раньше.
 * Файл собирается скриптом fetch_fonts.py. */

/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcEx58hLxR.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcExd8hLxR.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcEx18hLxR.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcExN8hA.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcEx58hLxR.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcExd8hLxR.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcEx18hLxR.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcExN8hA.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcEx58hLxR.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcExd8hLxR.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcEx18hLxR.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/q5uCsoe9Lv5t7Meb31EcExN8hA.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}

/* --- styles.css --- */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Unbounded:wght@400;500;600;700&display=swap');

:root {
  /* color */
  --bg: #FFFFFF;
  --bg-subtle: #F4F6FA;
  --surface: #FFFFFF;
  --border: #E2E6ED;

  --ink-900: #101826;
  --ink-600: #4A5468;
  --ink-400: #8A93A6;
  --ink-on-brand: #FFFFFF;

  --brand-900: #0F2557;
  --brand-700: #1E3E8C;
  --brand-500: #2E5CE6;
  --brand-100: #E8EDFC;

  --accent-600: #E85D2C;
  --accent-500: #FF7A3D;
  --accent-100: #FFEEE4;

  --success-600: #1E8A5F;
  --error-600: #D6483A;

  /* type */
  --font-display: 'Golos Text', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(32px, 4vw, 52px);
  --fs-h2: clamp(26px, 3vw, 36px);
  --fs-h3: 22px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* shadow */
  --shadow-card: 0 1px 2px rgba(16, 24, 38, 0.04), 0 8px 24px rgba(16, 24, 38, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(16, 24, 38, 0.06), 0 16px 32px rgba(16, 24, 38, 0.10);

  /* motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink-900);
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { margin: 0; }
.text-secondary { color: var(--ink-600); }
.text-tertiary { color: var(--ink-400); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--accent-600); color: #fff; }
.btn-primary:hover { background: var(--accent-500); }
.btn-primary:focus-visible { outline: 3px solid var(--accent-100); outline-offset: 2px; }
.btn-primary:disabled { background: var(--border); color: var(--ink-400); cursor: not-allowed; }

.btn-secondary { background: var(--brand-100); color: var(--brand-900); }
.btn-secondary:hover { background: #DCE4FA; }

.btn-ghost { background: transparent; color: var(--brand-900); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--brand-500); }

/* cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

/* section rhythm */
.section { padding: var(--sp-16) var(--sp-8); }
.section-subtle { background: var(--bg-subtle); }

/* signature: route-line — dashed waypoint connector with numbered dots */
.route-line {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}
.route-line::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 0;
  border-top: 2px dashed var(--brand-100);
  z-index: 0;
}
.route-dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--brand-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  flex-shrink: 0;
}

/* section divider — dashed waypoint, matches route-line signature */
.section-divider { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); }
.section-divider-track { position: relative; height: 0; border-top: 2px dashed var(--brand-100); }
/* Вейпоинт: кольцо, а не заливка — так он читается как точка на маршруте,
   а не как пятно. Ореол цветом фона создаёт впечатление, что пунктир идёт
   позади метки, а не упирается в неё.
   Разделитель ставится только там, где фон соседних блоков совпадает и сам
   отбить их не может: на четырнадцати блоках линейка на каждом стыке
   превращается в частокол. */
.section-divider-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  border: 3px solid var(--accent-600);
  box-shadow: 0 0 0 6px var(--bg-subtle);
  transform: translate(-50%, -50%);
}
/* на белом фоне ореол должен быть белым, иначе вокруг метки серое кольцо */
.section-divider--on-light .section-divider-track::before {
  background: var(--bg);
  box-shadow: 0 0 0 6px var(--bg);
}

/* vertical route stops (tour detail programme) */
.route-stops { display: flex; flex-direction: column; gap: 0; }
.route-stop { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4); align-items: start; }
.route-stop-rail { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); align-self: stretch; }
.route-stop-line { flex: 1; width: 0; border-left: 2px dashed var(--brand-100); min-height: 24px; }
.route-stop:last-child .route-stop-line { display: none; }
.route-stop-body { padding-bottom: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-2); }
.route-stop:last-child .route-stop-body { padding-bottom: 0; }
.route-stop-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-500); }
.route-stop:last-child .route-dot { background: var(--accent-600); }

/* included / excluded comparison cards */
.compare-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.compare-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.compare-icon { width: 32px; height: 32px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.compare-icon--yes { background: rgba(30, 138, 95, 0.12); color: var(--success-600); }
.compare-icon--no { background: var(--bg-subtle); color: var(--ink-400); }
.compare-item { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); }
.compare-card--yes .compare-item { color: var(--ink-900); }
.compare-card--no .compare-item { color: var(--ink-600); }
.compare-item-icon { flex-shrink: 0; margin-top: 2px; }

/* filters layout: always a full-width bar on top, results below */
.filters-layout { display: flex; flex-direction: column; gap: var(--sp-6); }
.filters-layout .filters-aside { width: 100%; max-width: none; position: static; padding: var(--sp-5) var(--sp-6) !important; }
.filters-layout .filters-aside .filters-grid-3 { display: grid; grid-template-columns: minmax(180px, 220px) 1fr 1fr; align-items: start; gap: var(--sp-6); }
@media (max-width: 720px) {
  .filters-layout .filters-aside .filters-grid-3 { grid-template-columns: 1fr; }
}

.filter-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-small); color: var(--ink-900); cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.filter-pill input { display: none; }
.filter-pill:hover { border-color: var(--brand-500); }
.filter-pill:has(input:checked) { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* inputs */
.field {
  height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  background: var(--surface);
}
.field:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.field::placeholder { color: var(--ink-400); }
.field.error { border-color: var(--error-600); }

/* badge / tag */
.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  background: var(--brand-100);
  color: var(--brand-900);
}

/* site header — three-zone grid: logo / nav / cta */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--brand-900); color: var(--ink-on-brand); }
.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
}
.header-logo { display: inline-flex; align-items: center; gap: var(--sp-3); justify-self: start; text-decoration: none; }
.header-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.header-logo-eyebrow { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: #A8BEEF; }
.logo-word { font-family: 'Unbounded', var(--font-display), sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.035em; color: #fff; }

.head-nav { display: flex; align-items: center; gap: 22px; justify-self: center; }
.head-nav a { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: #fff; text-decoration: none; white-space: nowrap; transition: color var(--dur-base) var(--ease-standard); }
.head-nav a:hover { color: var(--accent-500); }
.head-nav a[aria-current="page"] { color: #fff; }
.head-nav a:not([aria-current="page"]) { color: #E4EAF8; }

.head-cta {
  justify-self: end;
  height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.head-cta:active { transform: scale(0.98); }
.head-cta:focus-visible { outline: 3px solid var(--accent-100); outline-offset: 2px; }

.burger-checkbox { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.header-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: transparent; border: none; color: #fff; cursor: pointer; justify-self: end; }
.header-burger-panel { display: none; position: fixed; inset: 76px 0 0 0; background: var(--brand-900); z-index: 19; padding: var(--sp-6); flex-direction: column; gap: var(--sp-6); }
.burger-checkbox:checked ~ .header-burger-panel { display: flex; }
.header-burger-panel a { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: #fff; text-decoration: none; }

@media (max-width: 980px) {
  .head-nav { gap: 14px !important; }
  .head-nav a { font-size: 13px !important; }
  .logo-word { font-size: 19px !important; }
}
@media (max-width: 800px) {
  .head-nav { display: none !important; }
  .header-burger { display: flex !important; flex: none; }
  .site-header-inner { display: flex !important; align-items: center; gap: var(--sp-3); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .head-cta { height: 44px !important; padding: 0 var(--sp-4) !important; font-size: var(--fs-small) !important; white-space: nowrap; flex: none; margin-left: auto; }
  .header-logo { min-width: 0; flex: none; gap: var(--sp-2); overflow: hidden; }
  .header-logo-text { display: none; }
}
@media (max-width: 480px) {
  .site-header-inner { gap: var(--sp-2); }
  .header-logo-eyebrow { display: none; }
  .logo-word { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .head-cta { padding: 0 var(--sp-3) !important; font-size: 13px !important; }
}
@media (max-width: 380px) {
  .logo-word { font-size: 14px !important; }
  .head-cta { padding: 0 10px !important; font-size: 12px !important; }
  .header-burger { width: 36px !important; height: 36px !important; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .head-nav a, .head-cta { transition: none; }
  .head-cta:active { transform: none; }
}
.badge-accent { background: var(--accent-100); color: var(--accent-600); }

/* каталог операторов — раскладка «ценовой рельс» */
.op-group + .op-group { margin-top: clamp(32px, 4vw, 48px); }
.op-group-title { font-size: 24px; font-family: var(--font-display); font-weight: 700; }
.op-group-lead { color: var(--ink-600); font-size: var(--fs-small); max-width: 70ch; margin-top: var(--sp-1); }
/* максимум именно 1fr: с minmax(460px, 600px) браузер считает число колонок
   по верхней границе и на ширине 1104px оставляет один столбец вместо двух */
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }

/* подложка группы: сегменты различаются материалом, а не только заголовком */
.op-group-body { border-radius: var(--r-lg); }
.op-seg-spec { background: var(--brand-100); padding: var(--sp-8); }
.op-seg-bus { background: var(--bg-subtle); padding: var(--sp-8); }
.op-seg-combo { border-top: 2px dashed var(--brand-500); padding: var(--sp-8) 0 0; border-radius: 0; }
.op-seg-individual { border: 1px solid var(--brand-100); padding: var(--sp-8); }

.op-card {
  display: grid; grid-template-columns: 186px 1fr; gap: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--sp-6);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.op-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.op-rail { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--brand-100); border-radius: var(--r-sm); padding: var(--sp-4); align-self: start; }
/* nowrap только для чисел: словесная цена «цена по запросу» длиннее колонки
   рельса и без переноса вылезала поверх соседнего столбца */
.op-price-val { color: var(--brand-900); font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; overflow-wrap: anywhere; }
.op-price-val-text { font-size: 18px; line-height: 1.2; }
.op-price-unit { color: var(--ink-400); font-size: var(--fs-micro); }
.op-dur { color: var(--ink-600); font-size: var(--fs-small); display: flex; align-items: center; gap: 6px; }

.op-body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.op-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.op-name { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 700; }
.op-type { color: var(--ink-400); font-size: var(--fs-small); }
.op-note { color: var(--ink-600); font-size: var(--fs-small); }
.op-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-small); align-content: start; }
.op-facts dt { color: var(--ink-400); white-space: nowrap; }
.op-facts dd { margin: 0; color: var(--ink-900); }
.op-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-3); margin-top: auto; }
.op-profile { font-weight: 600; font-size: var(--fs-small); }
.op-site { font-weight: 600; }
.op-nolink { color: var(--ink-400); font-size: var(--fs-micro); }

.op-trust { font-weight: 600; }
.op-trust-city { background: var(--success-600); color: #fff; }
.op-trust-reestr { background: var(--brand-700); color: #fff; }
.op-trust-listed { background: var(--brand-100); color: var(--brand-900); }

/* официальный оператор города — единственный, выделен материалом */
.op-card-dark { background: var(--brand-900); border-color: var(--brand-900); }
.op-card-dark .op-name, .op-card-dark .op-price-val, .op-card-dark .op-facts dd { color: #fff; }
.op-card-dark .op-note { color: rgba(255,255,255,0.78); }
.op-card-dark .op-facts dt, .op-card-dark .op-dur { color: rgba(255,255,255,0.72); }
.op-card-dark .op-price-unit, .op-card-dark .op-type { color: rgba(255,255,255,0.6); }
.op-card-dark a { color: #fff; }
.op-card-dark .op-foot { border-color: rgba(255,255,255,0.22); }
.op-card-dark .op-rail { background: rgba(255,255,255,0.1); }
.op-card-dark .op-site { background: rgba(255,255,255,0.16); }

/* оператор без рабочих ссылок — приглушён честно */
.op-card-muted { background: var(--bg-subtle); box-shadow: none; }
.op-card-muted .op-rail { background: var(--surface); }
.op-card-muted:hover { box-shadow: var(--shadow-card); }

/* строки сравнения на главной — сжатая карточка: тот же рельс, без описания */
.op-rows { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }
.op-row {
  display: grid; grid-template-columns: 186px 1fr auto; gap: var(--sp-6); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-6); color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.op-row:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); color: inherit; }
.op-row-gap { margin-top: var(--sp-4); }
.op-row-rail { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); }
.op-row-name { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.op-row-name .op-name { font-size: var(--fs-body-lg); }
.op-row-cta { color: var(--brand-500); font-size: 20px; line-height: 1; justify-self: end; transition: transform var(--dur-base) var(--ease-standard); }
.op-row:hover .op-row-cta { transform: translateX(3px); }

.op-row-dark { background: var(--brand-900); border-color: var(--brand-900); }
.op-row-dark .op-name, .op-row-dark .op-price-val { color: #fff; }
.op-row-dark .op-type, .op-row-dark .op-price-unit { color: rgba(255,255,255,0.6); }
.op-row-dark .op-dur { color: rgba(255,255,255,0.72); }
.op-row-dark .op-rail { background: rgba(255,255,255,0.1); }
.op-row-dark .op-row-cta { color: #fff; }

.op-row-muted { background: var(--bg-subtle); }
.op-row-muted .op-rail { background: var(--surface); }

@media (max-width: 900px) {
  .op-grid { grid-template-columns: 1fr; }
  .op-card { grid-template-columns: 1fr; gap: var(--sp-4); }
  .op-rail { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .op-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .op-row-rail { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .op-row-cta { justify-self: start; }
}
@media (max-width: 560px) {
  .op-seg-spec, .op-seg-bus, .op-seg-individual { padding: var(--sp-4); }
  .op-facts { grid-template-columns: 1fr; gap: 2px var(--sp-3); }
  .op-facts dt { margin-top: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .op-card { transition: none; }
  .op-card:hover { transform: none; }
}

/* Подвал тёмный, как шапка: цвет ссылок из общего правила `a` на нём не читается */
.site-footer a { color: #E4EAF8; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer .badge { background: rgba(255,255,255,0.14); color: #FFFFFF; }

/* Текст подвала: элементы без инлайнового color наследовали тёмный цвет
   страницы и на тёмном фоне пропадали. Полужирные — заголовки колонок и
   слово в логотипе — держим белыми, как в шапке. */
.site-footer { color: #C9D5F5; }
.site-footer [style*="font-weight: 700"],
.site-footer [style*="font-weight: 600"] { color: #FFFFFF; }

/* --- раскладка подвала ------------------------------------------------
   Четыре колонки: бренд и три тематические по пять ссылок. До этого было
   три колонки, и в средней лежало одиннадцать ссылок против пяти в
   соседней — ряд заваливался вправо. Юридические ссылки убраны из колонок
   в нижнюю строку: они нужны редко и в списке навигации только шумели. */
.site-footer { background: var(--brand-900); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.foot-grid {
  max-width: 1200px; margin: 0 auto;
  padding: var(--sp-12) var(--sp-4) var(--sp-8);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-8);
}
.foot-brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.foot-logo-top { font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.06em;
  text-transform: uppercase; color: #C9D5F5; }
.foot-logo-main { font-weight: 700; font-size: var(--fs-body-lg); letter-spacing: -0.02em;
  color: #FFFFFF; }
.foot-about { color: #A8BEEF; font-size: var(--fs-small); max-width: 32ch; margin: 0; }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
/* заголовок колонки — тот же приём, что у надзаголовков секций:
   мелкие прописные, чтобы отличались от ссылок весом, а не размером */
.foot-h {
  margin: 0 0 var(--sp-1); font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: #8FA6DC;
}
.foot-col a {
  position: relative; font-size: var(--fs-small); color: #C9D5F5; text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.foot-col a:hover { color: #FFFFFF; }
.foot-col a[aria-current] { color: #FFFFFF; font-weight: 600; }
/* подчёркивание растёт от левого края, а не появляется целиком */
.foot-col a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--accent-500);
  transition: width var(--dur-base) var(--ease-standard);
}
.foot-col a:hover::after { width: 100%; }

.foot-bottom {
  max-width: 1200px; margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); }
.foot-copy { color: #8FA6DC; font-size: var(--fs-micro); }
.foot-legal a { color: #C9D5F5; font-size: var(--fs-micro); text-decoration: none; }
.foot-legal a:hover { color: #FFFFFF; text-decoration: underline; }
.foot-note { color: #8FA6DC; font-size: var(--fs-micro); max-width: 96ch; margin: 0; line-height: 1.6; }

@media (max-width: 1023px) {
  .foot-grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-12); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr; row-gap: var(--sp-8); }
  .foot-about { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .foot-col a, .foot-col a::after { transition: none; }
}

/* ---------------------------------------------------------------- реклама
   Стандартные форматы IAB, чтобы рекламодатель отдавал готовый креатив без
   подгонки под наш макет. Размер переключается по ширине экрана:
     до 760px   — 320×100 Large Mobile Banner
     760–1023px — 728×90  Leaderboard
     от 1024px  — 970×250 Billboard
   Ширина задана через min(), а высота — через aspect-ratio: на очень узком
   экране блок ужимается пропорционально и не даёт горизонтальной прокрутки. */
.ad-slot { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 4vw, 48px) var(--sp-4) 0; display: flex; flex-direction: column; align-items: center; }
.ad-slot-box { width: min(320px, 100%); aspect-ratio: 320 / 100; overflow: hidden; border-radius: var(--r-md); }
.ad-slot-box img { display: block; width: 100%; height: 100%; object-fit: contain; }

.ad-slot-empty { border: 1px dashed var(--border); background: var(--bg-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); text-align: center; padding: var(--sp-3); }
.ad-slot-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: var(--ink-900); }
.ad-slot-note { color: var(--ink-600); font-size: var(--fs-micro); max-width: 46ch; }
.ad-slot-contact { color: var(--ink-600); font-size: var(--fs-micro); }
.ad-slot-contact a { font-weight: 600; white-space: nowrap; }
.ad-slot-mark { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-2); }

/* На самом узком экране боковые отступы съедали ширину и 320×100 ужимался
   до 273 px. Отдаём баннер во всю ширину — для мобильного формата это норма.
   Заодно в 100 px высоты помещается только заголовок. */
@media (max-width: 400px) {
  .ad-slot { padding-left: 0; padding-right: 0; }
  .ad-slot-box { border-radius: 0; }
  .ad-slot-note { display: none; }
}

@media (min-width: 760px) {
  .ad-slot-box { width: min(728px, 100%); aspect-ratio: 728 / 90; }
  .ad-slot-note { display: block; }
}

@media (min-width: 1024px) {
  .ad-slot-box { width: min(970px, 100%); aspect-ratio: 970 / 250; }
  .ad-slot-empty { gap: var(--sp-2); padding: var(--sp-6); }
  .ad-slot-title { font-size: var(--fs-body-lg); }
  .ad-slot-note { font-size: var(--fs-small); }
}

/* ================================================= новые блоки главной
   Раскладка утверждена в Claude Design: артборды CityFacts, FormatsRail,
   SightsGrid, DurationTable, OperatorsAnchor, KidsBlock, DayTripLinks.
   Общее правило всех блоков: размер задаёт самый длинный элемент, а не
   каждый сам по себе — иначе ряды разъезжаются по высоте и ширине. */

/* --- 02. Иннополис за минуту ------------------------------------- */
/* линейный значок вместо чёрточки: один набор, один вес обводки,
   без заливок и цветных подложек — иначе получается клипарт */
.fact-ico { display: block; color: var(--brand-500); margin-bottom: var(--sp-3); }
.fact-title { font-size: var(--fs-small); font-weight: 700; color: var(--ink-900);
  /* запас на вторую строку: иначе пояснения в ряду стартуют с разной высоты */
  min-height: 2.6em; }
.fact-note { color: var(--ink-600); font-size: var(--fs-small); margin-top: var(--sp-2); }

/* Где есть subgrid — высоту строк задаёт ряд, а не запас в вёрстке: значок,
   заголовок и пояснение выравниваются по соседям сами. Запас в 2.6em при
   однострочных заголовках оставлял дыру под каждым. */
@supports (grid-template-rows: subgrid) {
  .fact { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .fact-title { min-height: 0; align-self: start; }
}

/* --- 03. Какие бывают экскурсии ---------------------------------- */
.fmt-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.fmt-row { display: flex; align-items: center; gap: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6);
  color: var(--ink-900); text-decoration: none;
  transition: transform var(--dur-base, .2s) ease, box-shadow var(--dur-base, .2s) ease; }
.fmt-row:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,37,87,.10);
  color: var(--ink-900); }
.fmt-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.fmt-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body-lg); }
.fmt-note { color: var(--ink-600); font-size: var(--fs-small); }
.fmt-cta { color: var(--brand-500); font-size: 20px; flex-shrink: 0; }
.fmt-row:hover .fmt-cta { color: var(--accent-600); }

/* --- 07. Что можно посмотреть ------------------------------------ */
.sight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.sight-img { aspect-ratio: 3 / 2; border-radius: var(--r-md); background-size: cover;
  background-position: center; background-color: var(--bg-subtle); }
.sight-name { font-size: var(--fs-body); font-weight: 700; margin-top: var(--sp-3); }
.sight-note { color: var(--ink-600); font-size: var(--fs-small); margin-top: var(--sp-1); }
/* оговорка относится ко всему блоку, а не к последней плитке */
.sight-foot { grid-column: 1 / -1; color: var(--ink-400); font-size: var(--fs-micro);
  margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--border); }


.sight-src { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-6); }

/* --- 08. Сколько длится ------------------------------------------ */
.dur-table { display: flex; flex-direction: column; gap: 0; max-width: 74ch; }
.dur-row { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: var(--sp-6);
  align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.dur-row:last-child { border-bottom: none; }
.dur-row dt { font-weight: 600; color: var(--ink-900); }
.dur-time { font-variant-numeric: tabular-nums; color: var(--ink-900); white-space: nowrap; }
.dur-freq { color: var(--ink-600); font-size: var(--fs-small); }

/* --- 09. Кто проводит: тёмный якорь ------------------------------ */
.op-anchor { background: var(--brand-900); color: var(--ink-on-brand); }
.op-anchor a { color: #E4EAF8; }
.op-anchor a:hover { color: #fff; }
.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.seg-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 48px);
  color: var(--accent-500); line-height: 1; font-variant-numeric: tabular-nums; }
.seg-name { color: #fff; font-size: var(--fs-body-lg); margin-top: var(--sp-3); }
.seg-note { color: #C9D5F5; font-size: var(--fs-small); margin-top: var(--sp-2); }
/* врезка внутри якоря, а не вынос на светлое: наезд на границу был бы
   единственным таким приёмом на всей странице */
.seg-plate { margin-top: var(--sp-8); padding: var(--sp-6);
  background: rgba(255,255,255,.06); border-radius: var(--r-md);
  color: #C9D5F5; font-size: var(--fs-small); max-width: 92ch; }

/* --- 10. Детям --------------------------------------------------- */
/* условие поездки, а не ошибка: оранжевая граница вместо заливки —
   сплошной оранжевый спорил бы с ценами и кнопкой первого экрана */
/* полосу рисуем внутренней тенью, а не border-left: граница живёт вне
   скругления и на стыке с углом вылезает наружу тонким хвостом */
.age-plate { margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  background: var(--bg-subtle); border-radius: var(--r-md);
  color: var(--ink-900); max-width: 90ch; }
.kid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
  margin-top: var(--sp-8); }
.kid-name { font-size: var(--fs-body); font-weight: 700; }
.kid-note { color: var(--ink-600); font-size: var(--fs-small); margin-top: var(--sp-2); }

/* --- 11. Поездка на день ----------------------------------------- */
.trip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.trip { display: flex; flex-direction: column; gap: var(--sp-2); position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6);
  color: var(--ink-900); text-decoration: none;
  transition: transform var(--dur-base, .2s) ease, box-shadow var(--dur-base, .2s) ease; }
.trip:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,37,87,.10);
  color: var(--ink-900); }
.trip-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body);
  padding-right: var(--sp-6); }
.trip-note { color: var(--ink-600); font-size: var(--fs-small); }
.trip-cta { position: absolute; top: var(--sp-5); right: var(--sp-6);
  color: var(--brand-500); }
.trip:hover .trip-cta { color: var(--accent-600); }

/* Выделенная карточка заведения: фото слева, факты справа. Обычная
   карточка в общей сетке растягивала весь ряд по своей высоте — у соседей
   оставалась пустота в пол-экрана. */
.food-hero { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: var(--sp-6) var(--sp-8);
  align-items: start; margin-bottom: var(--sp-6); }
.food-hero-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.food-hero-photo { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .food-hero { grid-template-columns: 1fr; }
}

/* --- живая сцена улицы -------------------------------------------------
   Слои нарисованы по отдельности и собраны здесь: фон, прохожие, роверы.
   Собирать из кусков пришлось потому, что вырезать роботов из готовой
   иллюстрации не выходит — оранжевый корпус совпадает по цвету с оранжевой
   полосой тротуара, и любой порог либо съедает корпус, либо тащит фон.

   Тротуар занимает нижнюю четверть кадра, ноги фигур ставим на 4–12 % от
   низа: кто ближе к зрителю — ниже и крупнее. */
.street { position: relative; overflow: hidden; border-radius: var(--r-lg);
  margin-top: var(--sp-8); }
.street-bg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.rover, .walker { position: absolute; height: auto; }

.rover { width: 13%; bottom: 4%; }
.rover-a { animation: rover-a 26s linear infinite; }
.rover-b { transform: scaleX(-1); animation: rover-b 26s linear infinite; }

/* Ровер A идёт слева направо в первой половине цикла, B справа налево во
   второй: в кадре всегда один, разъезжаться им не приходится. Прыжок из
   края в край случается, пока оба за кадром. */
@keyframes rover-a {
  0%   { left: -16%; }
  44%  { left: 106%; }
  100% { left: 106%; }
}
@keyframes rover-b {
  0%   { left: 106%; }
  50%  { left: 106%; }
  94%  { left: -16%; }
  100% { left: -16%; }
}

/* Прохожие стоят. Двигать растровую фигуру одной фазой шага бесполезно:
   ноги не переступают, и человек едет по тротуару, а не идёт. Оживить их
   можно только вторым кадром на каждого — до тех пор они часть декорации.
   Едут только роверы: у них движение и есть качение. */
.walker-1 { width: 6.5%; bottom: 11%; left: 26%; }
.walker-2 { width: 7.4%; bottom: 7%;  left: 48%; }
.walker-3 { width: 7%;   bottom: 9%;  left: 74%; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .rover { animation: none; }
  .rover-a { left: 14%; }
  .rover-b { left: 66%; }
}
@media (max-width: 700px) {
  .street-bg { aspect-ratio: 4 / 3; }
  .rover { width: 22%; }
  .walker { display: none; }
}

/* Атрибуция снимков с Wikimedia Commons. CC BY-SA требует имя автора,
   название лицензии и ссылку на неё — строка обязательная, не декоративная,
   поэтому живёт на странице, а не в подвале сайта. */
.photo-credit { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-12); }
.photo-credit p { color: var(--ink-400); font-size: var(--fs-micro); max-width: 90ch; }

/* Карта маршрута: виджет Яндекса. Метки заданы прямо в адресе — так не
   нужны ни конструктор карт, ни ключ JS API, и карта не тянет свой рантайм
   на страницы, где её нет. */
.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.map-frame iframe { display: block; width: 100%; height: 480px; border: 0; }
@media (max-width: 700px) { .map-frame iframe { height: 340px; } }

/* переход на соседний раздел: картинка и один абзац с ссылкой */
.cross { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: var(--sp-6) var(--sp-8);
  align-items: center; }
.cross img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; }
@media (max-width: 760px) { .cross { grid-template-columns: 1fr; } }

/* --- адаптив ------------------------------------------------------ */
@media (max-width: 1023px) {
  .fact-row { grid-template-columns: repeat(2, 1fr) !important; row-gap: var(--sp-8) !important; }
  .sight-grid { grid-template-columns: repeat(2, 1fr); }
  .trip-row { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 700px) {
  .fact-row { grid-template-columns: 1fr !important; row-gap: var(--sp-6) !important; }
  .fact-title { min-height: 0; }
  .seg-row { grid-template-columns: 1fr; gap: var(--sp-6); }
  .kid-row { grid-template-columns: 1fr; }
  .trip-row { grid-template-columns: 1fr; }
  /* рельс уходит над названием, выравнивание по краям сохраняется */
  .fmt-row { flex-wrap: wrap; gap: var(--sp-3); }
    .fmt-body { flex-basis: 100%; }
  .fmt-cta { display: none; }
  /* таблица распадается на карточки, колонки не сжимаются */
  .dur-row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .dur-row dt { font-size: var(--fs-body-lg); }
}

/* ============================ появление блоков при прокрутке
   Спека, а не «добавь анимацию». Закрытая палитра: одна длительность,
   одна кривая, одно смещение. Ступенчатость только внутри рядов, где
   элементы однотипны, — на прозе и таблицах ступеньки читаются как
   подтормаживание, а не как жизнь.

   Срабатывает один раз на блок, при первом появлении в кадре. Всё, что
   выше сгиба, показывается сразу — первый экран уже имеет свою анимацию,
   вторая поверх неё дала бы двойной вход. */

:root {
  --reveal-dur: 520ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: 16px;
  --reveal-step: 60ms;
}

/* базовое состояние ставится скриптом: без JS блоки видны сразу */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--reveal-dur) var(--reveal-ease),
              transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ступенчатость внутри однотипных рядов: факты, форматы, плитки, карточки */
.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--reveal-dur) var(--reveal-ease),
              transform var(--reveal-dur) var(--reveal-ease);
}
.js-reveal [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: var(--reveal-step); }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: calc(var(--reveal-step) * 2); }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: calc(var(--reveal-step) * 3); }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: calc(var(--reveal-step) * 4); }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: calc(var(--reveal-step) * 5); }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: calc(var(--reveal-step) * 6); }
.js-reveal [data-reveal-stagger].is-in > *:nth-child(n+8) { transition-delay: calc(var(--reveal-step) * 7); }

/* уважение к системной настройке: движение выключается полностью,
   содержимое остаётся видимым */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- разделитель между блоками -------------------------------------
   Рисуется внутри самой секции, а не отдельным элементом между ними:
   отдельный div живёт на фоне страницы и на стыке двух приглушённых
   блоков давал бы белую полосу. Внутри секции линия наследует её фон. */
.sec-div { position: relative; }
.sec-div::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1200px, calc(100% - var(--sp-8)));
  transform: translateX(-50%);
  border-top: 2px dashed var(--brand-500);
  opacity: .55;
}
/* фон ореола совпадает с фоном секции, иначе вокруг метки чужое кольцо */
.section-subtle.op-anchor.sec-div::after { border-top-color: rgba(255,255,255,0.18); }
.op-anchor


/* строки без перехода: ведут не на страницу, а на тот же экран — ссылкой
   их делать нечестно, стрелку убираем и ховер не поднимаем */
.fmt-row-plain { cursor: default; }
.fmt-row-plain:hover { transform: none; box-shadow: none; }

/* ---- оглавление сбоку ------------------------------------------------
   Липкий рельс справа от контейнера. Стеклянная плашка с надписью
   «Оглавление» убрана: подпись повторяла то, что и так видно по списку,
   а полупрозрачная карточка на светлом фоне читалась как чужой элемент.
   Остались вертикальная линия и пункты — тот же приём, что у ценового
   рельса и полосы у текущего пункта меню.

   Панель привязана не к краю окна, а к правому краю контейнера
   (`left: calc(50% + …)`), поэтому наехать на текст она не может ни при
   какой ширине. Показывается от 1660px: 1200px контейнера + 160px рельса
   + отступы. Ниже места справа физически нет. */
.toc { display: none; }

@media (min-width: 1660px) {
  .toc {
    display: block;
    position: fixed;
    top: 50%;
    left: calc(50% + 628px);
    transform: translateY(-50%);
    z-index: 14;
    width: 168px;
    max-height: 68vh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .toc::-webkit-scrollbar { width: 0; }
  .toc-list {
    display: flex;
    flex-direction: column;
    /* общая линия рельса: у пунктов только цветной отрезок поверх неё */
    border-left: 1px solid var(--border);
  }
  .toc a {
    position: relative;
    display: block;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
    line-height: 1.3;
    color: var(--ink-400);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-standard);
  }
  .toc a::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--accent-600);
    transform: translateY(-50%);
    transition: height var(--dur-base) var(--ease-standard);
  }
  .toc a:hover { color: var(--ink-900); }
  .toc a:hover::before { height: 100%; background: var(--border); }
  .toc a.is-current { color: var(--brand-900); font-weight: 600; }
  .toc a.is-current::before { height: 100%; background: var(--accent-600); }

  /* Тёмные блоки во всю ширину — хиро, «Кто проводит», подвал — проходят
     и под рельсом. Перекрашивать его там нельзя: рельс выше границы блока,
     и половина пунктов остаётся на светлом фоне. Поэтому на тёмных блоках
     он гаснет. Класс ставит blocknav.js по пересечению с центром окна. */
  .toc { transition: opacity var(--dur-base) var(--ease-standard); }
  .toc.is-on-dark { opacity: 0; pointer-events: none; }

  /* якорь не должен уезжать под липкую шапку */
  section[id] { scroll-margin-top: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .toc, .toc a, .toc a::before { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Карточки, которые собирает WordPress                                */
/*                                                                     */
/* Раньше эти блоки были свёрстаны прямо в HTML со стилями в атрибуте.  */
/* Теперь их собирают шорткоды, поэтому оформление вынесено в классы:   */
/* владелец правит содержимое в админке и вёрстку не задевает.         */
/* ------------------------------------------------------------------ */

.inno-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }

/* карточка экскурсии */
.tour-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tour-card__media { position: relative; height: 176px; background: repeating-linear-gradient(135deg, #E8EDFC 0, #E8EDFC 24px, #DFE6FA 24px, #DFE6FA 48px); }
.tour-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-card__media__corner { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--surface); }
.tour-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.tour-card__badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tour-card__text { color: var(--ink-600); font-size: var(--fs-small); flex: 1; }
.tour-card__text p { margin: 0 0 var(--sp-2); }
.tour-card__text p:last-child { margin-bottom: 0; }
.tour-card__ops { color: var(--ink-400); font-size: var(--fs-micro); }
.tour-card__ops a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tour-card__price { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.tour-card__price__val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.tour-card__price__val--text { font-size: var(--fs-body); color: var(--ink-600); }
.tour-card__price__unit { color: var(--ink-400); font-size: var(--fs-small); }

/* панель фильтров */
.inno-catalog { max-width: 1200px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--sp-4) clamp(48px, 7vw, 96px); }
.filters-aside { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }
.filters-aside__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.filters-aside__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); }
.filters-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.filters-block__label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); }
.filters-range { display: flex; gap: var(--sp-2); align-items: center; }
.filters-range .field { width: 100%; min-width: 0; }
.filters-range span { color: var(--ink-400); }
.filters-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filters-results { display: flex; flex-direction: column; gap: var(--sp-6); }
.filters-bar { position: sticky; top: 80px; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.filters-bar p { color: var(--ink-600); font-size: var(--fs-small); }
.filters-sort { display: flex; gap: var(--sp-2); }
.filters-sort button { border: none; cursor: pointer; }
.filters-empty { display: none; color: var(--ink-600); padding: var(--sp-8) 0; text-align: center; }

/* карточка места, кафе, отеля */
.inno-card { display: flex; flex-direction: column; gap: var(--sp-3); }
/* размеры фото задаёт .sight-photo из оформления страниц — своё правило
   тут только мешало бы: у него специфичность выше */
.inno-card__title { font-size: var(--fs-h3); }
.inno-card__text { color: var(--ink-600); font-size: var(--fs-small); flex: 1; }
.inno-card__text p { margin: 0 0 var(--sp-2); }
.inno-card__text p:last-child { margin-bottom: 0; }
.inno-card__meta { color: var(--ink-400); font-size: var(--fs-small); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.inno-card__credit { color: var(--ink-400); font-size: var(--fs-micro); }
.inno-card.is-map-active { border-color: var(--brand-500); box-shadow: var(--shadow-card-hover); }

/* цена в карточке оператора */
.op-price { display: flex; flex-direction: column; gap: 2px; }

/* таблица реестра гидов */
.table-scroll { overflow-x: auto; }
.inno-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.inno-table th { text-align: left; padding: var(--sp-3); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.inno-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.inno-table td.nums { color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* карта */
.inno-map { width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }

/* вступление страницы и вводный абзац — отступы как на остальных страницах */
.section-intro { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--sp-4) 0; }
.section-intro .lead { color: var(--ink-600); font-size: var(--fs-body-lg); max-width: 62ch; margin-top: var(--sp-4); }

/* цена в карточке отеля */
.hotel-price { display: flex; align-items: baseline; gap: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.hotel-price__val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.hotel-price__unit { color: var(--ink-400); font-size: var(--fs-small); }
.inno-card__meta--plain { border-top: none; padding-top: 0; }

/* WordPress подставляет картинке атрибуты width и height по размеру файла,
   и вместо пропорции 4:3 карточка получает высоту оригинала. Пропорцию
   задаёт .sight-photo, поэтому высоту возвращаем к автоматической. */
img.sight-photo, img.food-hero-photo, .tour-card__media img { height: auto; }
.tour-card__media img { position: absolute; inset: 0; height: 100%; }
.hotel-price__val--text { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--ink-600); }

/* Блок «Группа» в редакторе оборачивает своё содержимое ещё одним
   контейнером. Вёрстка сайта держится на сетках и рядах, и эта обёртка
   разрывала связь родителя с детьми: колонки вставали друг под друга,
   автобус уезжал с ленты. display: contents убирает обёртку из раскладки,
   не трогая саму разметку. */
.wp-block-group > .wp-block-group__inner-container { display: contents; }

/* Раскрывающийся блок: вопрос-ответ и «видите неточность».
   В прежней вёрстке плюс справа был отдельным элементом внутри заголовка —
   при переносе в блоки он терялся, и по виду было непонятно, что строка
   раскрывается. Рисуем значок стилем: он появится и у блоков, которые
   владелец добавит сам в редакторе. */
.wp-block-details > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  list-style: none;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "+";
  color: var(--brand-500);
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
.wp-block-details[open] > summary::after { content: "−"; }

/* ------------------------------------------------------------------ */
/* Карта маршрута и блоки страницы «Как добраться»                      */
/* ------------------------------------------------------------------ */

.route-map { display: flex; flex-direction: column; gap: var(--sp-4); }
.route-map__switch { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.route-map__switch button { border: none; cursor: pointer; }
.route-map__canvas { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.route-map__note { color: var(--ink-600); font-size: var(--fs-small); }
@media (max-width: 720px) { .route-map__canvas { height: 320px; } }

/* сравнение способов: строка на способ, без лишней таблицы на телефоне */
.ways { display: grid; gap: var(--sp-3); }
.way { display: grid; grid-template-columns: 150px 110px 110px 1fr; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.way:first-child { border-top: 1px solid var(--border); }
.way__name { font-family: var(--font-display); font-weight: 700; }
.way__time, .way__price { font-variant-numeric: tabular-nums; font-weight: 600; }
.way__note { color: var(--ink-600); font-size: var(--fs-small); }
@media (max-width: 860px) {
  .way { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
  .way__note { grid-column: 1 / -1; }
  .way__price { text-align: right; }
  .way__time { color: var(--ink-600); }
}

/* точки отправления и прибытия */
.spots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.spot { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); background: var(--surface); }
.spot__name { font-family: var(--font-display); font-weight: 700; margin-bottom: var(--sp-2); }
.spot__addr { color: var(--ink-600); font-size: var(--fs-small); }
.spot__note { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-2); }

/* ближайшие рейсы */
.next-buses { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.next-buses__item { display: inline-flex; align-items: baseline; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; background: var(--surface); }
.next-buses__time { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.next-buses__from { color: var(--ink-600); font-size: var(--fs-small); }
.next-buses__empty { color: var(--ink-600); font-size: var(--fs-small); }

/* отступы новых блоков страницы «Как добраться»: без них карточки
   прилипают к следующему заголовку */
.spots { margin: var(--sp-6) 0 var(--sp-8); }
.next-buses-block { margin: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.route-map { margin: var(--sp-6) 0 var(--sp-8); }
#gde-vyyti, #otkuda-uezzhat h2 { margin-top: var(--sp-8); }
#voprosy .wp-block-details { margin-bottom: var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4) var(--sp-6); }

/* новые блоки страницы «Как добраться» выравниваем по тем же полям,
   что и остальные секции: без этого их левый край уезжал на 16 пикселей */
#marshrut-na-karte, #otkuda-uezzhat, #voprosy { padding-left: var(--sp-4); padding-right: var(--sp-4); }
/* ответ не должен прилипать к вопросу */
.wp-block-details > *:not(summary) { margin-top: var(--sp-3); }

/* быстрые ссылки по странице */
.page-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
.page-nav__link { text-decoration: none; }
.page-nav__link:hover { background: var(--brand-500); color: #fff; }

/* отступы между блоками страницы «Как добраться»: секции стояли слишком
   далеко друг от друга, страница выглядела разорванной */
#marshrut-na-karte, #otkuda-uezzhat, #voprosy { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
#gde-vyyti { margin-top: var(--sp-6); }

/* --- migrated.css --- */
/* Стили, перенесённые из прежней вёрстки.
 *
 * Раньше они стояли в атрибуте style у каждого блока разметки.
 * Блоки редактора так не умеют, поэтому одинаковые наборы правил
 * собраны в классы: блок несёт только класс, оформление — здесь.
 * Файл собирается скриптом wp_convert_pages.py, руками не править.
 */

.m-1, img.m-1, figure.m-1 { position: relative; height: min(680px, -80px + 100dvh); min-height: 520px; display: flex; align-items: center; background: rgb(14, 32, 80); overflow: hidden; }
.m-2, img.m-2, figure.m-2 { max-width: 1200px; margin: 0px auto; padding: clamp(40px, 5vw, 72px) var(--sp-4); }
.m-3, img.m-3, figure.m-3 { text-wrap: pretty; }
.m-4, img.m-4, figure.m-4 { color: var(--ink-600); margin-top: var(--sp-2); max-width: 62ch; }
.m-5, img.m-5, figure.m-5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-8); margin-top: var(--sp-8); }
.m-6, img.m-6, figure.m-6 { margin-top: var(--sp-8); }
.m-7, img.m-7, figure.m-7 { max-width: 1200px; margin: 0px auto; padding: clamp(48px, 7vw, 96px) var(--sp-4); }
.m-8, img.m-8, figure.m-8 { color: var(--ink-600); margin-top: var(--sp-2); max-width: 68ch; }
.m-9, img.m-9, figure.m-9 { max-width: 1200px; margin: 0px auto; padding: clamp(48px, 7vw, 72px) var(--sp-4) 0; }
.m-10, img.m-10, figure.m-10 { font-size: var(--fs-h2); text-wrap: pretty; scroll-margin-top: 80px; }
.m-11, img.m-11, figure.m-11 { max-width: 1200px; margin: 0px auto; padding: clamp(24px, 4vw, 48px) var(--sp-4) clamp(48px, 7vw, 96px); }
.m-12, img.m-12, figure.m-12 { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.m-13, img.m-13, figure.m-13 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.m-14, img.m-14, figure.m-14 { display: flex; flex-direction: column; gap: var(--sp-3); }
.m-15, img.m-15, figure.m-15 { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; }
.m-16, img.m-16, figure.m-16 { font-size: var(--fs-body-lg); }
.m-17, img.m-17, figure.m-17 { color: var(--ink-600); font-size: var(--fs-small); }
.m-18, img.m-18, figure.m-18 { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-8); max-width: 72ch; }
.m-19, img.m-19, figure.m-19 { max-width: 1200px; margin: 0px auto; padding: clamp(48px, 7vw, 96px) var(--sp-4) var(--sp-12); }
.m-20, img.m-20, figure.m-20 { color: var(--ink-600); margin-top: var(--sp-2); max-width: 64ch; }
.m-21, img.m-21, figure.m-21 { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-6); max-width: 72ch; }
.m-22, img.m-22, figure.m-22 { background-image: url("/uploads/tourism-university.jpg?v=fa9421ca"); }
.m-23, img.m-23, figure.m-23 { background-image: url("/uploads/tourism-zion.jpg?v=ecf3be21"); }
.m-24, img.m-24, figure.m-24 { background-image: url("/uploads/tourism-robotaxi.jpg?v=2d822f01"); }
.m-25, img.m-25, figure.m-25 { background-image: url("/uploads/tourism-robot-waiter.jpg?v=a31927a4"); }
.m-26, img.m-26, figure.m-26 { background-image: url("/uploads/tourism-artspace.jpg?v=a1dac0d1"); }
.m-27, img.m-27, figure.m-27 { background-image: url("/uploads/sight-evening.jpg?v=a42a20e4"); }
.m-28, img.m-28, figure.m-28 { background-image: url("/uploads/tourism-bbq.jpg?v=15c52c96"); }
.m-29, img.m-29, figure.m-29 { background-image: url("/uploads/tourism-viewpoint.jpg?v=bcc91e79"); }
.m-30, img.m-30, figure.m-30 { background-image: url("/uploads/sight-stela.jpg?v=f35ab91c"); }
.m-31, img.m-31, figure.m-31 { background-image: url("/uploads/sight-sculpture.jpg?v=48b09c08"); }
.m-32, img.m-32, figure.m-32 { margin-top: var(--sp-6); }
.m-33, img.m-33, figure.m-33 { color: var(--ink-600); margin-top: var(--sp-6); max-width: 74ch; }
.m-34, img.m-34, figure.m-34 { max-width: 1200px; margin: 0px auto; padding: clamp(56px, 7vw, 96px) var(--sp-4); }
.m-35, img.m-35, figure.m-35 { color: rgb(255, 255, 255); text-wrap: pretty; }
.m-36, img.m-36, figure.m-36 { color: var(--ink-600); margin-top: var(--sp-2); }
.m-37, img.m-37, figure.m-37 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.m-38, img.m-38, figure.m-38 { margin: 0px; display: flex; flex-direction: column; gap: var(--sp-4); }
.m-39, img.m-39, figure.m-39 { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-6); }
.m-40, img.m-40, figure.m-40 { max-width: 800px; margin: 0px auto; padding: clamp(48px, 7vw, 96px) var(--sp-4); }
.m-41, img.m-41, figure.m-41 { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }
.m-42, img.m-42, figure.m-42 { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4) var(--sp-6); }
.m-43, img.m-43, figure.m-43 { color: var(--ink-600); margin-top: var(--sp-3); font-size: var(--fs-body); }
.m-44, img.m-44, figure.m-44 { max-width: 1200px; margin: 0px auto; padding: clamp(40px, 6vw, 80px) var(--sp-4) var(--sp-8); }
.m-45, img.m-45, figure.m-45 { font-size: var(--fs-small); color: var(--ink-400); }
.m-46, img.m-46, figure.m-46 { margin-top: var(--sp-4); max-width: 26ch; text-wrap: pretty; }
.m-47, img.m-47, figure.m-47 { color: var(--ink-600); font-size: var(--fs-body-lg); max-width: 62ch; margin-top: var(--sp-4); }
.m-48, img.m-48, figure.m-48 { max-width: 1200px; margin: 0px auto; padding: 0 var(--sp-4) clamp(48px, 7vw, 96px); }
.m-49, img.m-49, figure.m-49 { color: var(--ink-600); max-width: 68ch; margin-top: var(--sp-4); }
.m-50, img.m-50, figure.m-50 { max-width: 1200px; margin: 0px auto; padding: var(--sp-6) var(--sp-4) 0; }
.m-51, img.m-51, figure.m-51 { max-width: 1200px; margin: 0px auto; padding: var(--sp-6) var(--sp-4) clamp(48px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.m-52, img.m-52, figure.m-52 { grid-column: span 2; min-width: 300px; display: flex; flex-direction: column; gap: var(--sp-6); }
.m-53, img.m-53, figure.m-53 { display: flex; flex-direction: column; gap: var(--sp-4); }
.m-54, img.m-54, figure.m-54 { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.m-55, img.m-55, figure.m-55 { max-width: 24ch; text-wrap: pretty; }
.m-56, img.m-56, figure.m-56 { color: var(--ink-600); font-size: var(--fs-body-lg); max-width: 62ch; }
.m-57, img.m-57, figure.m-57 { font-size: var(--fs-h3); text-wrap: pretty; }
.m-58, img.m-58, figure.m-58 { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4) var(--sp-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); align-items: center; }
.m-59, img.m-59, figure.m-59 { display: flex; flex-direction: column; gap: var(--sp-1); }
.m-60, img.m-60, figure.m-60 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body-lg); }
.m-61, img.m-61, figure.m-61 { color: var(--ink-400); font-size: var(--fs-small); }
.m-62, img.m-62, figure.m-62 { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }
.m-63, img.m-63, figure.m-63 { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.m-64, img.m-64, figure.m-64 { font-weight: 600; font-size: var(--fs-small); }
.m-65, img.m-65, figure.m-65 { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0px; }
.m-66, img.m-66, figure.m-66 { display: flex; flex-direction: column; gap: var(--sp-6); border-top: 1px solid var(--border); padding-top: clamp(32px, 5vw, 56px); }
.m-67, img.m-67, figure.m-67 { color: var(--ink-600); margin-top: var(--sp-2); max-width: 60ch; }
.m-68, img.m-68, figure.m-68 { color: var(--ink-600); max-width: 62ch; }
.m-69, img.m-69, figure.m-69 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); border-top: 1px solid var(--border); padding-top: clamp(32px, 5vw, 56px); }
.m-70, img.m-70, figure.m-70 { border-top: 1px solid var(--border); padding-top: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; gap: var(--sp-6); }
.m-71, img.m-71, figure.m-71 { color: var(--ink-600); margin-top: var(--sp-3); }
.m-72, img.m-72, figure.m-72 { min-width: 280px; max-width: 380px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); padding: var(--sp-6); }
.m-73, img.m-73, figure.m-73 { display: flex; align-items: baseline; gap: var(--sp-2); }
.m-74, img.m-74, figure.m-74 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.m-75, img.m-75, figure.m-75 { color: var(--ink-400); font-size: var(--fs-micro); }
.m-76, img.m-76, figure.m-76 { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--sp-4) 0; }
.m-77, img.m-77, figure.m-77 { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-small); }
.m-78, img.m-78, figure.m-78 { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) 0; }
.m-79, img.m-79, figure.m-79 { color: var(--ink-600); font-size: var(--fs-body-lg); max-width: 64ch; margin-top: var(--sp-4); }
.m-80, img.m-80, figure.m-80 { max-width: 1200px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--sp-4) clamp(48px, 7vw, 96px); }
.m-81, img.m-81, figure.m-81 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); gap: var(--sp-6); }
.m-82, img.m-82, figure.m-82 { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.m-83, img.m-83, figure.m-83 { position: relative; height: 176px; background: repeating-linear-gradient(135deg, #E8EDFC 0 24px, #DFE6FA 24px 48px); display: flex; align-items: center; justify-content: center; }
.m-84, img.m-84, figure.m-84 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position:; }
.m-85, img.m-85, figure.m-85 { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--surface); }
.m-86, img.m-86, figure.m-86 { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.m-87, img.m-87, figure.m-87 { color: var(--ink-600); font-size: var(--fs-small); flex: 1; }
.m-88, img.m-88, figure.m-88 { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.m-89, img.m-89, figure.m-89 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.m-90, img.m-90, figure.m-90 { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-4); }
.m-91, img.m-91, figure.m-91 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 78%; }
.m-92, img.m-92, figure.m-92 { margin-top: var(--sp-4); max-width: 30ch; text-wrap: pretty; }
.m-93, img.m-93, figure.m-93 { color: var(--ink-600); font-size: var(--fs-body-lg); max-width: 68ch; margin-top: var(--sp-4); }
.m-94, img.m-94, figure.m-94 { max-width: 900px; margin: 0px auto; padding: 0 var(--sp-4) clamp(32px, 5vw, 56px); display: flex; flex-direction: column; gap: var(--sp-8); }
.m-95, img.m-95, figure.m-95 { display: flex; gap: var(--sp-4); align-items: flex-start; }
.m-96, img.m-96, figure.m-96 { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; justify-content: space-between; }
.m-97, img.m-97, figure.m-97 { flex: 1 1 360px; }
.m-98, img.m-98, figure.m-98 { color: var(--ink-600); margin-top: var(--sp-3); max-width: 52ch; }
.m-99, img.m-99, figure.m-99 { text-decoration: none; color: rgb(255, 255, 255); flex-shrink: 0; }
.m-100, img.m-100, figure.m-100 { max-width: 1200px; margin: 0px auto; padding: 0 var(--sp-4) var(--sp-6); }
.m-101, img.m-101, figure.m-101 { padding: 0 var(--sp-4); }
.m-102, img.m-102, figure.m-102 { left: var(--sp-4); right: var(--sp-4); }
.m-103, img.m-103, figure.m-103 { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); background: var(--brand-700); padding-right: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: rgb(255, 255, 255); }
.m-104, img.m-104, figure.m-104 { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); background: var(--brand-700); padding-left: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: rgb(255, 255, 255); }
.m-105, img.m-105, figure.m-105 { flex-wrap: wrap; row-gap: var(--sp-8); }
.m-106, img.m-106, figure.m-106 { flex: 1 1 240px; display: flex; flex-direction: column; gap: var(--sp-3); }
.m-107, img.m-107, figure.m-107 { display: flex; align-items: center; gap: var(--sp-3); }
.m-108, img.m-108, figure.m-108 { position: relative; z-index: 1; background: var(--bg); padding: 0 var(--sp-2); color: var(--brand-700); }
.m-109, img.m-109, figure.m-109 { max-width: 800px; margin: 0px auto; padding: clamp(48px, 7vw, 96px) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.m-110, img.m-110, figure.m-110 { color: var(--ink-600); }
.m-111, img.m-111, figure.m-111 { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.m-112, img.m-112, figure.m-112 { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); border-bottom: 1px solid var(--border); padding: var(--sp-2) 0; }
.m-113, img.m-113, figure.m-113 { flex-shrink: 0; font-weight: 700; background: var(--success-600); color: rgb(255, 255, 255); }
.m-114, img.m-114, figure.m-114 { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; }
.m-115, img.m-115, figure.m-115 { color: var(--ink-400); }
.m-116, img.m-116, figure.m-116 { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; text-align: right; }
.m-117, img.m-117, figure.m-117 { flex-shrink: 0; font-weight: 700; background: var(--brand-500); color: rgb(255, 255, 255); }
.m-118, img.m-118, figure.m-118 { text-wrap: pretty; margin-top: var(--sp-6); }
.m-119, img.m-119, figure.m-119 { color: var(--ink-600); margin-top: var(--sp-4); }
.m-120, img.m-120, figure.m-120 { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-2); }
.m-121, img.m-121, figure.m-121 { max-width: 1200px; margin: 0px auto; padding: 0 var(--sp-4) clamp(32px, 5vw, 56px); }
.m-122, img.m-122, figure.m-122 { text-wrap: pretty; margin-bottom: var(--sp-6); }
.m-123, img.m-123, figure.m-123 { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; position: relative; }
.m-124, img.m-124, figure.m-124 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--success-600); }
.m-125, img.m-125, figure.m-125 { font-size: var(--fs-h3); font-weight: 600; color: var(--ink-900); margin-top: var(--sp-2); }
.m-126, img.m-126, figure.m-126 { margin-top: var(--sp-2); }
.m-127, img.m-127, figure.m-127 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-600); }
.m-128, img.m-128, figure.m-128 { color: var(--ink-600); max-width: 68ch; margin-top: var(--sp-2); }
.m-129, img.m-129, figure.m-129 { margin-top: var(--sp-8); max-width: 720px; }
.m-130, img.m-130, figure.m-130 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-500); }
.m-131, img.m-131, figure.m-131 { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-6); max-width: 68ch; }
.m-132, img.m-132, figure.m-132 { color: var(--ink-600); max-width: 68ch; margin-top: var(--sp-6); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.m-133, img.m-133, figure.m-133 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 38px); color: var(--brand-900); line-height: 1; font-variant-numeric: tabular-nums; }
.m-134, img.m-134, figure.m-134 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 38px); color: var(--accent-600); line-height: 1; font-variant-numeric: tabular-nums; }
.m-135, img.m-135, figure.m-135 { color: var(--ink-600); margin-top: var(--sp-6); max-width: 68ch; }
.m-136, img.m-136, figure.m-136 { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-4); }
.m-137, img.m-137, figure.m-137 { white-space: nowrap; }
.m-138, img.m-138, figure.m-138 { color: var(--ink-900); font-weight: 600; margin-top: var(--sp-6); }
.m-139, img.m-139, figure.m-139 { color: var(--ink-600); max-width: 68ch; margin-top: var(--sp-6); }
.m-140, img.m-140, figure.m-140 { color: var(--ink-600); max-width: 68ch; margin-top: var(--sp-4); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.m-141, img.m-141, figure.m-141 { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-8); }
.m-142, img.m-142, figure.m-142 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.m-143, img.m-143, figure.m-143 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.m-144, img.m-144, figure.m-144 { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-8); max-width: 80ch; }
.m-145, img.m-145, figure.m-145 { margin-top: var(--sp-4); max-width: 28ch; text-wrap: pretty; }
.m-146, img.m-146, figure.m-146 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-6); }
.m-147, img.m-147, figure.m-147 { margin-top: var(--sp-4); max-width: 34ch; text-wrap: pretty; }
.m-148, img.m-148, figure.m-148 { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-3); }
.m-149, img.m-149, figure.m-149 { max-width: 900px; margin: 0px auto; padding: 0 var(--sp-4) clamp(48px, 7vw, 96px); }
.m-150, img.m-150, figure.m-150 { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.m-151, img.m-151, figure.m-151 { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-4); max-width: 72ch; }
.m-152, img.m-152, figure.m-152 { max-width: 800px; margin: 0px auto; padding: clamp(40px, 6vw, 80px) var(--sp-4) clamp(48px, 7vw, 96px); }
.m-153, img.m-153, figure.m-153 { margin-top: var(--sp-4); text-wrap: pretty; }
.m-154, img.m-154, figure.m-154 { font-size: var(--fs-body-lg); margin-top: var(--sp-6); }
.m-155, img.m-155, figure.m-155 { margin-top: var(--sp-6); max-width: 74ch; font-size: var(--fs-body); }
.m-156, img.m-156, figure.m-156 { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); font-size: var(--fs-body-lg); margin-top: 0px; }
.m-157, img.m-157, figure.m-157 { color: var(--ink-400); font-size: var(--fs-small); margin-top: var(--sp-8); }
.m-158, img.m-158, figure.m-158 { max-width: 780px; margin: 0px auto; padding: clamp(56px, 9vw, 120px) var(--sp-4) clamp(48px, 7vw, 88px); text-align: center; }
.m-159, img.m-159, figure.m-159 { margin-top: var(--sp-4); max-width: 24ch; text-wrap: pretty; }
.m-160, img.m-160, figure.m-160 { max-width: 1200px; margin: 0px auto; padding: 0 var(--sp-4) clamp(40px, 6vw, 72px); }
.m-161, img.m-161, figure.m-161 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.m-162, img.m-162, figure.m-162 { color: var(--ink-600); margin-top: var(--sp-2); max-width: 52ch; }
.m-163, img.m-163, figure.m-163 { display: flex; flex-direction: column; gap: var(--sp-2); }
.m-164, img.m-164, figure.m-164 { align-self: flex-start; }
.m-165, img.m-165, figure.m-165 { font-size: var(--fs-body-lg); margin-top: var(--sp-2); }
.m-166, img.m-166, figure.m-166 { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-2); max-width: 72ch; }
.m-167, img.m-167, figure.m-167 { max-width: 1000px; margin: 0px auto; padding: clamp(32px, 5vw, 64px) var(--sp-4); }
.m-168, img.m-168, figure.m-168 { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-subtle); padding: var(--sp-4) var(--sp-6); }
.m-169, img.m-169, figure.m-169 { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); max-width: 68ch; }
.m-170, img.m-170, figure.m-170 { color: var(--ink-900); font-size: var(--fs-body-lg); max-width: 68ch; margin-top: var(--sp-4); }
.m-171, img.m-171, figure.m-171 { color: var(--ink-600); max-width: 68ch; margin-top: var(--sp-3); }

/* Правила, которые в прежней вёрстке стояли внутри самих страниц: первый экран, схемы маршрутов, таблицы. */

summary::-webkit-details-marker { display: none; }
  summary { list-style: none; }
  html { scroll-behavior: smooth; }
  @keyframes routeDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes routeDot { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
  @keyframes routeDotAccent { 0% { transform: scale(0); } 55% { transform: scale(1.35); } 78% { transform: scale(0.94); } 100% { transform: scale(1); } }
  @keyframes routeWord { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  .lg-clip { transform-origin: left center; animation: routeDraw calc(var(--dur-base) * 2) var(--ease-standard) both; }
  .lg-dot { transform-box: fill-box; transform-origin: center; animation: routeDot var(--dur-base) var(--ease-standard) both; }
  .lg-dot-1 { animation-delay: calc(var(--dur-base) * 1.6); }
  .lg-dot-2 { animation-delay: calc(var(--dur-base) * 2.2); }
  .lg-dot-3 { animation: routeDotAccent calc(var(--dur-base) * 2) var(--ease-standard) both; animation-delay: calc(var(--dur-base) * 2.8); transform-box: fill-box; transform-origin: center; }
  .lg-word { animation: routeWord var(--dur-base) var(--ease-standard) both; animation-delay: calc(var(--dur-base) * 1.2); }
  @media (prefers-reduced-motion: reduce) { .lg-clip, .lg-dot, .lg-dot-3, .lg-word { animation: none; } }
  @media (prefers-reduced-motion: reduce) { .hero-bus { animation: none; left: 52.63%; top: 42.14%; transform: translate(-50%, -50%) rotate(-11deg); } }
  @media (max-width: 900px) {
    .hero-stage { top: auto !important; bottom: 0 !important; height: auto !important; aspect-ratio: 1664 / 935; }
  }
  @media (max-width: 700px) {
    .hero-scrim { background: linear-gradient(180deg, rgba(11,27,58,0.72) 0%, rgba(11,27,58,0.82) 60%, rgba(11,27,58,0.92) 100%) !important; }
    .hero-in-2 { max-width: 18ch !important; }
    .hero-h1-unbounded { max-width: 90% !important; font-size: clamp(28px, 9vw, 40px) !important; }

    /* Высота первого экрана была задана жёстко (min(680px, 100dvh - 80px)) при
       align-items: center. На коротком экране контент выше этой рамки, и
       центрирование выталкивало заголовок вверх — он уезжал под липкую шапку.
       Отдаём высоту содержимому. */
    #top { height: auto !important; min-height: 0 !important; align-items: flex-start !important;
           padding-top: var(--sp-8) !important; padding-bottom: var(--sp-10) !important; }

    /* Карта была прижата к низу с aspect-ratio: на узком экране она
       превращалась в полоску под текстом. Делаем сплошную подложку. */
    .hero-stage { top: 0 !important; bottom: 0 !important; height: 100% !important; aspect-ratio: auto !important; }
    .hero-map { object-fit: cover !important; }

    /* Схема маршрута, метки городов и автобус позиционированы в процентах под
       широкий макет: на узком они разъезжаются и висят поверх счётчиков. */
    .hero-route, .hero-pin, .hero-label, .hero-bus { display: none !important; }
  }
  @keyframes busRun {
    from { left: 64.78%; top: 49.63%; transform: translate(-50%, -50%) rotate(35deg); opacity: 0; }
    11.1% { left: 61.71%; top: 46.15%; transform: translate(-50%, -50%) rotate(29deg); opacity: 1; }
    22.2% { left: 58.85%; top: 43.71%; transform: translate(-50%, -50%) rotate(21deg); opacity: 1; }
    33.3% { left: 56.20%; top: 42.31%; transform: translate(-50%, -50%) rotate(10deg); opacity: 1; }
    44.4% { left: 53.77%; top: 41.94%; transform: translate(-50%, -50%) rotate(-3deg); opacity: 1; }
    55.6% { left: 51.54%; top: 42.60%; transform: translate(-50%, -50%) rotate(-19deg); opacity: 1; }
    66.7% { left: 49.53%; top: 44.30%; transform: translate(-50%, -50%) rotate(-35deg); opacity: 1; }
    77.8% { left: 47.73%; top: 47.04%; transform: translate(-50%, -50%) rotate(-48deg); opacity: 1; }
    88.9% { left: 46.15%; top: 50.81%; transform: translate(-50%, -50%) rotate(-59deg); opacity: 1; }
    to { left: 44.77%; top: 55.61%; transform: translate(-50%, -50%) rotate(-63deg); opacity: 0; }
    4% { opacity: 1; }
    96% { opacity: 1; }
  }
  .hero-bus { transform: translate(-50%, -50%) rotate(49deg); animation: busRun 17s linear infinite; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero-in { animation: heroIn var(--dur-base) var(--ease-standard) both; }
  .hero-in-1 { animation-delay: calc(var(--dur-base) * 0.35); }
  .hero-in-3 { animation-delay: calc(var(--dur-base) * 2.5); }
  .hero-in-4 { animation-delay: calc(var(--dur-base) * 2.9); }
  .hero-in-5 { animation-delay: calc(var(--dur-base) * 3.2); }
  @media (prefers-reduced-motion: reduce) { .hero-in { animation: none; } }

  .hero-h1-unbounded { font-family: 'Unbounded', var(--font-display), sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.035em; line-height: 1.06; color: #fff; max-width: min(16ch, 42%); text-wrap: pretty; }
  .hero-line-mask { display: block; overflow: hidden; }
  .hero-line { display: block; transform: translateY(112%); opacity: 0; animation: heroLineIn calc(var(--dur-base) * 2.4) var(--ease-standard) both; }
  .hero-line-mask:nth-child(1) .hero-line { animation-delay: 0ms; }
  .hero-line-mask:nth-child(2) .hero-line { animation-delay: 90ms; }
  .hero-line-mask:nth-child(3) .hero-line { animation-delay: 180ms; }
  @keyframes heroLineIn { from { transform: translateY(112%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .hero-line { animation: none; transform: none; opacity: 1; } }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  summary::-webkit-details-marker { display: none; }
  summary { list-style: none; }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  .story-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); display: block; }
  .story-source { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-2); }
  .story-year { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: #fff; background: var(--brand-500); border-radius: var(--r-pill); padding: 4px 12px; flex-shrink: 0; }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  @keyframes routeBusRun {
    0% { left: 14%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { left: 86%; opacity: 0; }
  }
  .route-bus-track { position: relative; height: 56px; background: var(--brand-700); border-radius: var(--r-md); }
  .route-bus-line { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed rgba(255,255,255,0.35); }
  .route-bus-badge { position: absolute; top: 50%; width: 60px; height: auto; margin-left: -30px; transform: translateY(-50%); animation: routeBusRun 6s linear infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
  .route-bus-badge img { width: 100%; height: auto; display: block; }
  @media (max-width: 480px) { .route-bus-badge { width: 40px; margin-left: -20px; } }
  @media (prefers-reduced-motion: reduce) { .route-bus-badge { animation: none; left: 50%; opacity: 1; } }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  .sight-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; }
  .sight-source { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-2); }
  .card.is-map-active { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--r-md); transition: outline-color .15s; }
  .map-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-900); background: var(--surface); border: none; box-shadow: 0 1px 4px rgba(0,0,0,.2); padding: 2px 7px; white-space: nowrap; }
  .map-label::before { display: none; }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  .sight-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; }
  .sight-source { color: var(--ink-400); font-size: var(--fs-micro); margin-top: var(--sp-2); }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  .doc h2 { font-size: var(--fs-h3); color: var(--ink-900); margin-top: var(--sp-8); }
  .doc h3 { font-size: var(--fs-body-lg); color: var(--ink-900); margin-top: var(--sp-6); }
  .doc p, .doc li { color: var(--ink-600); margin-top: var(--sp-3); }
  .doc ul, .doc ol { padding-left: var(--sp-6); margin: 0; }
  .doc li { margin-top: var(--sp-2); }
  .doc strong { color: var(--ink-900); font-weight: 600; }
  .doc .req { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-6); margin-top: var(--sp-6); }
  .doc .req p { margin-top: var(--sp-1); }

html { scroll-behavior: smooth; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }
  @keyframes err404Dash { to { stroke-dashoffset: -60; } }
  .err404-route { animation: err404Dash 3.5s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .err404-route { animation: none; } }
  .err404-link-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
  .err404-link-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow-card); }
  .err404-link-card span { color: var(--ink-900); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); }
  .err404-link-card small { color: var(--ink-400); font-size: var(--fs-small); font-weight: 400; }

html { scroll-behavior: smooth; }
  summary::-webkit-details-marker { display: none; }
  summary { list-style: none; }
  a { color: var(--brand-700); text-decoration: none; }
  a:hover { color: var(--brand-500); }