/* Geologica: кириллица и латиница, woff2, локально */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geologica-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geologica-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geologica-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geologica-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/geologica-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/geologica-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Сибирь: билеты и расписание. Светлая «морозная» тема.
   Главный приём — вертикальный таймлайн: сезон идёт одной полосой с крупными
   датами слева и соединительной линией. Ни карточек, ни таблицы.
   ========================================================================== */

:root {
  --bg: #EFF6FB;
  --bg-tint: #E4EFF8;
  --white: #FFFFFF;
  --ink: #0C2540;
  --ink-2: #123A63;
  --muted: #55708C;
  --line: #C9DEEE;
  --line-2: #DEEAF4;
  --accent: #0C6BC4;
  --accent-d: #08529B;
  --ice: #5FC6EE;
  --frost: #DCECF8;
  --frost-2: #E8F3FB;
  --warm: #C05621;
  --shadow: 0 1px 0 rgba(12, 37, 64, .04), 0 10px 30px -18px rgba(12, 37, 64, .35);
  --r-s: 6px;
  --r-m: 14px;
  --r-l: 22px;
  --shell: 1160px;
  --font: 'Geologica', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--ice) var(--frost);
}
html::-webkit-scrollbar { width: 13px; height: 13px; }
html::-webkit-scrollbar-track { background: var(--frost); }
html::-webkit-scrollbar-thumb {
  background: var(--ice); border-radius: 20px;
  border: 3px solid var(--frost);
}
html::-webkit-scrollbar-thumb:hover { background: var(--accent); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-d); }
h1, h2, h3 { margin: 0; line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.jump { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--accent); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-s) 0; }
.jump:focus { left: 0; }

/* Морозная полоска над шапкой — единственный декор в макете */
.frost {
  height: 5px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--ice) 38%, #BBE3F6 62%, var(--accent) 100%);
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.shell--mid { max-width: 790px; }

.h1 { font-size: clamp(27px, 4.4vw, 46px); letter-spacing: -0.035em; }
.h1--tight { font-size: clamp(24px, 3.6vw, 38px); }
.h2 { font-size: clamp(19px, 2.4vw, 27px); letter-spacing: -0.025em; }
.h2--tick { display: flex; align-items: center; gap: 12px; }
.h2--tick::before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--frost); }

.text { font-weight: 500; font-size: 15px; white-space: nowrap; }

/* --- Шапка --------------------------------------------------------------- */

.head { background: var(--white); border-bottom: 1px solid var(--line); }
.head__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 2vw, 26px); min-height: 72px; }

.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.mark__ic { flex: 0 0 auto; color: var(--accent); }
.mark__txt { display: flex; flex-direction: column; min-width: 0; }
.mark__name { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark__sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .mark__sub { display: none; } }

.nav { flex: 0 0 auto; min-width: 0; }
.nav__list { display: flex; flex-wrap: nowrap; gap: clamp(6px, 1.4vw, 18px); }
.nav__a {
  display: block; padding: 8px 10px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
}
.nav__a:hover { background: var(--frost); color: var(--accent-d); }

.burger {
  display: none; align-items: center; gap: 9px; flex: 0 0 auto;
  background: var(--frost); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 500;
  padding: 9px 16px; cursor: pointer;
}
.burger:hover { background: var(--frost-2); border-color: var(--accent); }
.burger__bars { display: block; width: 15px; height: 2px; background: currentColor; position: relative; border-radius: 2px; }
.burger__bars::before, .burger__bars::after { content: ''; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; border-radius: 2px; }
.burger__bars::before { top: -5px; }
.burger__bars::after { top: 5px; }

.head.is-tight .burger { display: inline-flex; }
.head.is-tight .head__row { flex-wrap: wrap; }
.head.is-tight .nav { flex: 1 1 100%; }
.head.is-tight .nav__list { flex-direction: column; gap: 0; border-top: 1px solid var(--line); padding: 4px 0 10px; }
.head.is-tight .nav__a { border-radius: var(--r-s); padding: 12px 10px; }
.nav[hidden] { display: none; }

@media (max-width: 899px) {
  .burger { display: inline-flex; }
  .head__row { flex-wrap: wrap; }
  .nav { flex: 1 1 100%; }
  .nav__list { flex-direction: column; gap: 0; border-top: 1px solid var(--line); padding: 4px 0 10px; }
  .nav__a { border-radius: var(--r-s); padding: 12px 10px; }
}

/* --- Хлебные крошки ------------------------------------------------------ */

.trail { background: var(--white); border-bottom: 1px solid var(--line-2); padding: 11px 0; }
.trail__list { display: flex; flex-wrap: wrap; gap: 4px 9px; font-size: 13.5px; color: var(--muted); }
.trail__i + .trail__i::before { content: '/'; margin-right: 9px; color: var(--line); }
.trail__list a { color: var(--muted); text-decoration: none; }
.trail__list a:hover { color: var(--accent); text-decoration: underline; }

/* --- Кнопки -------------------------------------------------------------- */

.ice {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 999px; padding: 11px 22px;
  font: inherit; font-weight: 500; font-size: 15.5px;
  text-decoration: none; cursor: pointer; max-width: 100%;
  transition: background .15s ease, border-color .15s ease;
}
.ice:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.ice--lg { padding: 13px 28px; font-size: 16.5px; }
.ice--sm { padding: 8px 17px; font-size: 14.5px; }
.ice--wide { width: 100%; }
.ice--ghost { background: var(--white); color: var(--accent-d); border-color: var(--line); font-size: 14.5px; padding: 8px 17px; }
.ice--ghost:hover { background: var(--frost); border-color: var(--accent); color: var(--accent-d); }

/* --- Первый экран -------------------------------------------------------- */

.hero { padding: clamp(26px, 4.4vw, 58px) 0 clamp(8px, 1.6vw, 18px); }
.hero__kick {
  font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}
.hero .h1 { margin-top: 13px; max-width: 22ch; }
.hero__lead { margin-top: 16px; color: var(--ink-2); font-size: clamp(16px, 1.7vw, 18.5px); max-width: 60ch; }

.tally {
  margin-top: clamp(22px, 3vw, 34px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}
.tally__i { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); padding: 15px 16px; min-width: 0; }
.tally__i b { display: block; font-size: clamp(21px, 2.6vw, 27px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
/* В клетке со словом, а не числом, кегль меньше: длинный город
   («Магнитогорск») разрывался по буквам. */
.tally__i--word b { font-size: clamp(16px, 2vw, 20px); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.tally__i span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.tally--flat { margin-top: 20px; }

.opener {
  margin-top: clamp(20px, 3vw, 30px);
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: clamp(16px, 2.6vw, 28px);
  align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.opener::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--accent), var(--ice));
}
.opener__pic { border-radius: var(--r-m); width: 100%; height: auto; background: var(--frost); }
.opener__txt { min-width: 0; }
.opener__tag { font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.opener__title { margin-top: 8px; font-size: clamp(21px, 3vw, 31px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.14; }
.opener__when { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.opener__where { margin-top: 3px; font-size: 15px; color: var(--muted); }
.opener__row { margin-top: 19px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.opener__price { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* --- Полосы страниц ------------------------------------------------------ */

.band { padding: clamp(28px, 4.2vw, 54px) 0; }
.band--tint { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }

/* --- Таймлайн ------------------------------------------------------------ */

.tl { margin-top: clamp(14px, 2vw, 22px); }

.stop {
  position: relative;
  display: grid;
  grid-template-columns: 88px 28px minmax(0, 1fr) minmax(0, auto);
  grid-template-areas: 'when rail body buy';
  column-gap: clamp(8px, 1.4vw, 16px);
  min-width: 0;
}
.stop[hidden] { display: none; }
.stop::before {
  content: ''; position: absolute; z-index: 0;
  top: 6px; bottom: 6px; left: -12px; right: -12px;
  border-radius: var(--r-m); background: transparent;
  transition: background .15s ease;
}
.stop:hover::before { background: var(--frost-2); }
.stop > * { position: relative; z-index: 1; }

.stop__when {
  grid-area: when; padding: 18px 0 22px;
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  min-width: 0;
}
.stop__day { font-size: clamp(30px, 3.8vw, 40px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.stop__mon { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.stop__wd { margin-top: 5px; font-size: 12.5px; font-style: normal; color: var(--muted); white-space: nowrap; }
.stop__when:hover .stop__day { color: var(--accent); }

.stop__rail { grid-area: rail; position: relative; }
.stop__rail::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; bottom: 0; width: 2px; background: var(--line);
}
.stop__rail::after {
  content: ''; position: absolute; left: 50%; top: 26px; transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--line); box-sizing: border-box;
}
.stop--home .stop__rail::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--frost); }
.stop--away .stop__rail::after { border-color: var(--ink-2); }
.tl > .stop:first-of-type .stop__rail::before, .tl > .stop.is-head .stop__rail::before { top: 26px; }
.tl > .stop:last-of-type .stop__rail::before, .tl > .stop.is-tail .stop__rail::before { bottom: auto; height: 26px; }

.stop__body { grid-area: body; padding: 18px 0 22px; min-width: 0; }
.stop__kind {
  display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px;
}
.stop--home .stop__kind { background: var(--frost); color: var(--accent-d); }
.stop--away .stop__kind { background: #F0E6DD; color: var(--warm); }
.stop__title { margin-top: 7px; font-size: clamp(17.5px, 2vw, 21px); letter-spacing: -0.025em; }
.stop__title a { color: var(--ink); text-decoration: none; }
.stop__title a:hover { color: var(--accent); text-decoration: underline; }
.stop__where { margin-top: 5px; font-size: 14.5px; color: var(--muted); }
.stop__extra { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.stop__extra:empty { display: none; }
.stop__extra::before {
  content: 'ещё'; font-size: 12px; color: var(--muted); align-self: center; margin-right: 1px;
}
.stop__dt {
  font-size: 12px; color: var(--ink-2); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px;
}

.stop__buy {
  grid-area: buy; padding: 18px 0 22px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px; min-width: 0;
}
.stop__price { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.stop__price b { font-size: 18px; color: var(--ink); letter-spacing: -0.02em; }

@media (max-width: 719px) {
  .stop {
    grid-template-columns: 64px 24px minmax(0, 1fr);
    grid-template-areas: 'when rail body' 'when rail buy';
  }
  .stop__when { padding: 16px 0 20px; }
  .stop__body { padding: 16px 0 4px; }
  .stop__buy { padding: 0 0 20px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
  .stop__day { font-size: 29px; }
  .stop__rail::after { top: 22px; }
  .tl > .stop:first-of-type .stop__rail::before, .tl > .stop.is-head .stop__rail::before { top: 22px; }
  .tl > .stop:last-of-type .stop__rail::before, .tl > .stop.is-tail .stop__rail::before { height: 22px; }
}

/* --- Срезы расписания ---------------------------------------------------- */

.slices { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: clamp(18px, 2.6vw, 30px); }
.slices__col { min-width: 0; }
.slices__head { font-size: 13px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-bottom: 9px; border-bottom: 2px solid var(--line); }
.slices__list { margin-top: 10px; display: grid; gap: 7px; }
.slices__list--flow { display: flex; flex-wrap: wrap; gap: 8px; }
.slices__list--gap { margin-top: 20px; }
.slices__a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--white); border: 1px solid var(--line-2);
  border-radius: var(--r-s); text-decoration: none; color: var(--ink); font-size: 15px; min-width: 0;
}
.slices__a span { min-width: 0; }
.slices__a b { flex: 0 0 auto; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.slices__a:hover { border-color: var(--accent); background: var(--frost-2); color: var(--accent-d); }

.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 14.5px; text-decoration: none; color: var(--ink);
}
.chip b { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.chip:hover { border-color: var(--accent); background: var(--frost-2); color: var(--accent-d); }
.chip--alt { background: var(--frost); }

/* --- Почему так ---------------------------------------------------------- */

.reasons { margin-top: 20px; display: grid; gap: 4px; }
.reasons__i { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.reasons__i:last-child { border-bottom: 0; }
.reasons__n { font-size: 26px; font-weight: 700; color: var(--ice); letter-spacing: -0.04em; line-height: 1.1; }
.reasons__t { font-size: 17.5px; letter-spacing: -0.02em; }
.reasons__x { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; }

/* --- Блог: список ------------------------------------------------------- */

.reads { margin-top: 18px; display: grid; gap: 2px; }
.reads__i { padding: 15px 0; border-bottom: 1px dashed var(--line); }
.reads__i:last-child { border-bottom: 0; }
.reads__t { font-size: 17.5px; letter-spacing: -0.02em; }
.reads__t a { color: var(--ink); text-decoration: none; }
.reads__t a:hover { color: var(--accent); text-decoration: underline; }
.reads__x { margin-top: 4px; color: var(--muted); font-size: 15px; }

.shelf { margin-top: clamp(20px, 3vw, 30px); display: grid; gap: 2px; }
.shelf__i { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.shelf__n { font-size: 30px; font-weight: 700; color: var(--ice); letter-spacing: -0.05em; line-height: 1; }
.shelf__b { min-width: 0; }
.shelf__t { font-size: clamp(18px, 2.2vw, 23px); letter-spacing: -0.025em; }
.shelf__t a { color: var(--ink); text-decoration: none; }
.shelf__t a:hover { color: var(--accent); text-decoration: underline; }
.shelf__x { margin-top: 7px; color: var(--ink-2); font-size: 15.5px; }
.shelf__d { margin-top: 7px; font-size: 13px; color: var(--muted); }

/* --- Обычная страница --------------------------------------------------- */

.page { padding: clamp(26px, 4vw, 50px) 0 clamp(30px, 4.4vw, 56px); }
.page__kick { font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.page__lead { margin-top: 15px; color: var(--ink-2); font-size: clamp(15.5px, 1.7vw, 18px); max-width: 64ch; }
.page__count { margin-top: 14px; font-size: 14px; color: var(--muted); }
.page__addr { margin-top: 12px; font-size: clamp(16px, 1.8vw, 18.5px); color: var(--ink-2); }
.page__after { margin-top: 26px; color: var(--ink-2); }

/* --- Фильтры ------------------------------------------------------------ */

.sieve {
  margin-top: 22px; display: grid; gap: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: clamp(14px, 2vw, 20px);
}
.sieve__g { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.sieve__lbl { flex: 0 0 auto; width: 118px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pin {
  font: inherit; font-size: 14.5px; cursor: pointer;
  padding: 7px 15px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2);
}
.pin:hover { border-color: var(--accent); color: var(--accent-d); }
.pin.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.nothing { margin-top: 22px; padding: 16px 18px; background: var(--white); border: 1px dashed var(--line); border-radius: var(--r-m); color: var(--ink-2); }

@media (max-width: 559px) {
  .sieve__lbl { width: 100%; }
}

/* --- Страница матча ----------------------------------------------------- */

.game { padding: clamp(22px, 3.4vw, 42px) 0 clamp(26px, 4vw, 50px); }

.plate {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(18px, 2.8vw, 32px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: clamp(18px, 2.6vw, 28px); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.plate::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.plate--home::before { background: linear-gradient(180deg, var(--accent), var(--ice)); }
.plate--away::before { background: linear-gradient(180deg, var(--ink-2), var(--muted)); }
.plate__pic { border-radius: var(--r-m); width: 100%; height: auto; background: var(--frost); }
.plate__txt { min-width: 0; }
.plate__tag { font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.plate .h1 { margin-top: 9px; }
.plate__when { margin-top: 14px; font-size: clamp(16px, 1.8vw, 19px); color: var(--ink-2); }
.plate__when b { letter-spacing: -0.02em; color: var(--ink); }
.plate__where { margin-top: 5px; font-size: 15px; color: var(--muted); }
.plate__where a { color: var(--accent); }
.plate__row { margin-top: 20px; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.plate__price { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.plate__fine { margin-top: 14px; font-size: 13.5px; color: var(--muted); max-width: 62ch; }

.warnbox {
  margin-top: 20px; padding: 14px 18px; border-radius: var(--r-m);
  background: var(--frost); border-left: 4px solid var(--accent); color: var(--ink-2); font-size: 15.5px;
}

.whens { margin-top: clamp(26px, 3.6vw, 40px); }
.whens__list { margin-top: 16px; display: grid; gap: 8px; }
.whens__i {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-m); min-width: 0;
}
.whens__d { font-size: 15.5px; color: var(--ink-2); min-width: 0; }
.whens__d b { color: var(--ink); letter-spacing: -0.02em; }
.whens__more { margin-top: 12px; font-size: 14px; color: var(--muted); }

.duo { margin-top: clamp(26px, 3.6vw, 42px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(22px, 3.2vw, 40px); align-items: start; }
.duo--wide { grid-template-columns: minmax(0, 1fr) 272px; }
.duo__main { min-width: 0; }
.duo__side { min-width: 0; display: grid; gap: 12px; position: sticky; top: 18px; }

.box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); padding: 17px 18px; min-width: 0; }
.box--buy { border-color: var(--accent); box-shadow: var(--shadow); }
.box__price { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.box__when { margin-top: 3px; margin-bottom: 15px; font-size: 14.5px; color: var(--muted); }
.box__head { font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.box__txt { margin-top: 7px; font-size: 15px; color: var(--ink-2); }
.box .text { display: inline-block; margin-top: 10px; white-space: normal; }

.specs { margin-top: clamp(24px, 3.2vw, 34px); border-top: 2px solid var(--line); }
.specs__r { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 2px 18px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.specs dt { font-size: 14px; color: var(--muted); }
.specs dd { font-size: 15.5px; }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px clamp(14px, 4vw, 22px);
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 26px -18px rgba(12, 37, 64, .5);
}
.dock[hidden] { display: none; }
.dock__price { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

@media (min-width: 761px) { .dock { display: none; } }

@media (max-width: 899px) {
  .duo, .duo--wide { grid-template-columns: minmax(0, 1fr); }
  .duo__side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 639px) {
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate__pic { max-width: none; }
  .opener { grid-template-columns: minmax(0, 1fr); }
  /* заставка под текстом: иначе цена и кнопка уходят за первый экран */
  .opener__pic { max-width: none; order: 2; }
  .specs__r { grid-template-columns: minmax(0, 1fr); }
}

/* --- Вопросы ------------------------------------------------------------ */

.asks { margin-top: clamp(22px, 3vw, 32px); display: grid; gap: 10px; }
.asks__d { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); }
.asks__d[open] { border-color: var(--accent); }
.asks__q {
  display: flex; align-items: flex-start; gap: 13px; cursor: pointer;
  padding: 15px 17px; font-weight: 500; font-size: 16.5px; letter-spacing: -0.015em; list-style: none;
}
.asks__q::-webkit-details-marker { display: none; }
.asks__n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--frost); color: var(--accent-d); font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; }
.asks__d[open] .asks__n { background: var(--accent); color: #fff; }
.asks__a { padding: 0 17px 17px 56px; color: var(--ink-2); font-size: 15.5px; }

@media (max-width: 479px) {
  .asks__a { padding-left: 17px; }
}

/* --- Статья ------------------------------------------------------------- */

.post__meta { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.post__back { margin-top: 32px; display: flex; gap: 22px; flex-wrap: wrap; }

.prose { margin-top: clamp(16px, 2.2vw, 24px); max-width: 72ch; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -0.025em; margin-top: 30px; padding-left: 14px; border-left: 4px solid var(--ice); }
.prose h3 { font-size: clamp(17px, 1.9vw, 20px); margin-top: 24px; }
.prose p { font-size: 16.5px; color: var(--ink-2); }
.prose--wide p { font-size: 17px; }
.prose ul, .prose ol { display: grid; gap: 8px; padding-left: 4px; }
.prose li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 16px; }
.prose ul li::before { content: ''; position: absolute; left: 3px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n) '.'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 500; }
.prose strong { color: var(--ink); }

/* --- Подвал ------------------------------------------------------------- */

.foot { background: var(--white); border-top: 1px solid var(--line); padding: clamp(26px, 3.6vw, 42px) 0 clamp(50px, 5vw, 44px); }
.foot__tally { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.foot__tally b { color: var(--ink); font-size: 16px; letter-spacing: -0.02em; }
.foot__grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.6vw, 34px); }
.foot__col { min-width: 0; }
.foot__name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.foot__note { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.foot__head { font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.foot__links { margin-top: 10px; display: grid; gap: 6px; font-size: 15px; }
.foot__links a { color: var(--ink-2); text-decoration: none; }
.foot__links a:hover { color: var(--accent); text-decoration: underline; }
.foot__head--gap { margin-top: 16px; }
.foot__tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px 13px; font-size: 15px; }
.foot__tags a { color: var(--ink-2); text-decoration: none; }
.foot__tags a:hover { color: var(--accent); text-decoration: underline; }

/* Липкая полоса покупки перекрывала последние строки подвала. */
@media (max-width: 760px) { body[data-page-type="event"] .foot { padding-bottom: 96px; } }

/* Название сайта не даёт кнопке меню встать с ним в одну строку:
   у гибкой основы auto длинная подпись переносит кнопку на вторую строку. */
@media (max-width: 760px) {
  .mark { flex: 1 1 0; }
  /* Название переносится по словам: многоточие вместо половины
     названия сайта хуже второй строки. */
  .mark__name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
}