:root {
  --bg: #FFFFFF;
  --bg-elevated: #F2F9F1;
  --bg-card: #FFFFFF;
  --text: #1C231C;
  --text-muted: #5B6E5C;
  --accent: #278C3E;
  --accent-dark: #1E6E30;
  --accent-soft: #E3F5E4;
  --gold: #D6A324;
  --gold-dark: #B4860F;
  --gold-soft: #FBF1D9;
  --border: #DCEAD9;
  --shadow: 0 2px 14px rgba(30, 110, 48, 0.08);
  /* Charter — тот же засечечный шрифт, что и в теле статей Т—Ж; на Mac стоит
     системно, на Windows 10+ ближе всего по пропорциям Sitka Text. Сам файл
     шрифта Т—Ж брать нельзя (чужой лицензированный актив на чужом CDN) —
     стек подобран, чтобы максимально совпасть на тех системах, где есть
     хоть один из этих шрифтов, и без потерь откатиться на Georgia, если нет. */
  --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Georgia, 'PT Serif', 'Noto Serif', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  --radius: 12px;
}

/* Сайт сознательно всегда светлый (бело-зелёно-золотой, по логотипу) —
   не подстраиваемся под тёмную тему устройства. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Фон страницы: не стерильно-белый холст, а мягкий градиент с парой размытых
   зелёно-золотых пятен по краям. Пятна закреплены относительно окна
   (background-attachment: fixed) — при скролле фон стоит, а лента едет, и
   страница не выглядит пустой на всю свою длину. */
body {
  margin: 0;
  position: relative;
  background:
    radial-gradient(900px 620px at 10% 2%, rgba(39, 140, 62, .13), transparent 62%),
    radial-gradient(820px 560px at 94% 18%, rgba(214, 163, 36, .14), transparent 64%),
    radial-gradient(1000px 700px at 50% 96%, rgba(39, 140, 62, .09), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, #F7FBF5 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Поверх градиента — бледные горные изолинии, как на топокарте: фактура,
   которая читается вблизи и не спорит с текстом. Тайл 1000×1000 бесшовный по
   горизонтали (линии заданы синусами с целым числом периодов на ширину). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url('/assets/topo.svg') repeat;
  background-size: 1000px 1000px;
  opacity: .085;
}

/* На телефонах закреплённый фон заставляет браузер перерисовывать градиенты на
   каждый кадр скролла — там фон едет вместе со страницей. */
@media (max-width: 900px) {
  body { background-attachment: scroll; }
  body::before { position: absolute; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Декоративные стикеры на фоне — в боковых полях, под контентом, не мешают
   кликам. position: absolute (не fixed) — скроллятся вместе с лентой, а не
   висят поверх viewport. Раскладку считает site.js. ── */
.bg-stickers { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: -1; pointer-events: none; }
.deco-item {
  position: absolute; user-select: none;
  animation: deco-in .5s ease both;
}
@keyframes deco-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .deco-item { animation: none; } }

/* ── Header: капсула, плавающая над градиентным фоном страницы ──────────
   Сама .site-header прозрачна и ничего не красит — весь визуальный вес
   (фон, блюр, тень) несёт .capsule внутри неё, поэтому вокруг пилюли
   видно фон/подложку страницы, а не сплошную полосу во всю ширину. */
.site-header { position: sticky; top: 14px; z-index: 50; margin-bottom: 34px; }
.site-header .wrap { position: relative; }
.capsule {
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--bg-card) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 8px 8px 20px;
  box-shadow: 0 10px 30px -16px rgba(30, 110, 48, .35), 0 1px 2px rgba(20, 30, 15, .04);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.brand-mark { flex: none; }
.brand-word { font-family: var(--font-display); font-size: 18px; color: var(--text); white-space: nowrap; }
nav.main-nav { display: flex; gap: 2px; flex: 1; justify-content: center; padding: 0 8px; }
nav.main-nav a {
  padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
nav.main-nav a:hover { color: var(--text); background: var(--bg-elevated); }
nav.main-nav a.active { color: var(--accent-dark); background: var(--accent-soft); }

.header-cta {
  flex: none; font-size: 14px; font-weight: 700; color: #2A2205; background: var(--gold);
  padding: 9px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.header-cta:hover { background: var(--gold-dark); }

.menu-btn {
  display: none; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: none; color: var(--text); align-items: center; justify-content: center;
}
.menu-btn:hover { background: var(--bg-elevated); }
.menu-btn .menu-bar-top, .menu-btn .menu-bar-bot { transition: transform .18s ease, opacity .18s ease; transform-origin: center; }
.menu-btn.open .menu-bar-top { transform: translateY(5px) rotate(45deg); }
.menu-btn.open .menu-bar-mid { opacity: 0; }
.menu-btn.open .menu-bar-bot { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .menu-btn .menu-bar-top, .menu-btn .menu-bar-bot { transition: none; }
}

.mobile-menu {
  display: none; flex-direction: column; gap: 2px; margin-top: 8px; padding: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 10px 30px -16px rgba(30, 110, 48, .35);
}
.mobile-menu a {
  padding: 11px 14px; border-radius: 11px; font-size: 15px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--accent-dark); background: var(--accent-soft); }

@media (max-width: 900px) {
  nav.main-nav, .header-cta { display: none; }
  .menu-btn { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }
}

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 9px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* Кнопки клуба: те же фирменные пилюли, что в лид-магнитах (.magnet-pill) —
   голубая у Telegram, с градиентной каймой у MAX. Зелёным их красить нельзя:
   кнопки две, и акцент на одной делал бы вторую запасной. */
.btn-messenger {
  padding: 11px 22px 11px 12px; border-radius: 999px; border-width: 2px;
  color: #14170F; font-weight: 700;
}
.btn-messenger:hover { color: #14170F; box-shadow: 0 4px 12px rgba(28, 35, 28, .16); }
.btn-messenger img { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; }
.btn-tg { background: #E7F4FC; border-color: #6EC3EE; }
/* Каёмка-градиент: два фона — сплошной по padding-box и градиент по border-box,
   как в .magnet-pill-max. Иначе градиент в border не задать. */
.btn-max {
  background-image: linear-gradient(#F6EFFE, #F6EFFE), linear-gradient(120deg, #6E7BF2, #B36EF2, #4FA9F5);
  background-origin: border-box; background-clip: padding-box, border-box;
  border-color: transparent;
}

/* ── Hero / about ──────────────────────────────── */
.hero { padding: 48px 0 40px; }
/* Колонки расставлены явно, а не порядком в разметке: фото стоит в HTML перед
   текстом (иначе на телефоне не работает обтекание), но на широком экране
   должно остаться справа. */
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.hero-col { grid-column: 1; grid-row: 1; min-width: 0; }
.hero-grid > .hero-photo { grid-column: 2; grid-row: 1; }
.eyebrow {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
h1.page-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 42px);
  line-height: 1.14; margin: 0 0 16px; text-wrap: balance;
}
/* Заголовок статьи — отдельно от общего .page-title: жирный гротеск крупным
   кеглем, как в Т—Ж, только для статей (места/маршруты используют обычный
   .page-title засечками). */
h1.article-title {
  font-family: var(--font-body); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12; letter-spacing: -.01em; margin: 0 0 16px; text-wrap: balance;
  color: var(--text);
}
.about-text { font-size: 17.5px; color: var(--text-muted); max-width: 56ch; margin: 0 0 12px; }
.about-text:last-of-type { margin-bottom: 0; }

/* ── Шапка главной: счётчик пройденного и фото автора ──
   Раньше правую половину занимала колода со случайной карточкой. Гостю, который
   ещё ничего не открывал, случайность выбрать не помогает, поэтому место отдано
   автору: цифры под текстом и его фото — то самое «я прошёл это сам», ради
   которого сюда и приходят вместо десятка одинаковых сайтов про Адыгею. ── */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  margin: 20px 0 22px; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13.5px; color: var(--text-muted);
}
.hero-stats b {
  font-family: var(--font-display); font-weight: 400; font-size: 23px;
  color: var(--accent-dark); margin-right: 2px; font-variant-numeric: tabular-nums;
}
.hero-stats-note { font-style: italic; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Квадрат, а не портрет: фото стоит рядом с колонкой текста и вертикальным
   кадром вылезало за неё почти на треть. */
.hero-photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft));
}
/* Только прямой ребёнок: иконка внутри плашки — тоже <img> и тоже лежит
   внутри .hero-photo, а «.hero-photo img» специфичнее «.hero-photo-mark»
   и растягивал её на весь кадр. */
.hero-photo > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-photo-badge {
  position: absolute; left: 14px; bottom: 14px;
  max-width: calc(100% - 28px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  backdrop-filter: blur(6px);
  font-size: 13.5px; font-weight: 600; line-height: 1.35; text-wrap: balance;
  box-shadow: 0 2px 12px rgba(20, 30, 15, .18);
}
.hero-photo-badge .hero-photo-mark {
  flex: none; width: 22px; height: 22px; border-radius: 5px; display: block;
  object-fit: cover;
}

/* На телефоне фото не отдельным блоком под текстом (так первый экран уходил
   почти целиком на него и приходилось долго листать), а маленьким квадратом
   в углу, который текст обтекает. Плашка с подписью при этом переезжает под
   кадр: поверх снимка в 150 px она бы его закрыла. */
@media (max-width: 860px) {
  .hero { padding: 26px 0 30px; }
  .hero-grid { display: block; }
  .hero-photo {
    float: right; width: 42%; max-width: 168px;
    margin: 3px 0 10px 16px;
    /* Рамку и скругление забирает сама картинка — фигуре нужно место под
       подпись, а с overflow:hidden и жёстким квадратом её бы срезало. */
    aspect-ratio: auto; overflow: visible;
    border: none; box-shadow: none; background: none; border-radius: 0;
  }
  .hero-photo > img {
    aspect-ratio: 1 / 1; height: auto;
    border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .hero-photo-badge {
    position: static; max-width: none; margin-top: 8px; padding: 0;
    gap: 6px; align-items: flex-start;
    background: none; backdrop-filter: none; box-shadow: none;
    font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--text-muted);
  }
  .hero-photo-badge .hero-photo-mark { width: 16px; height: 16px; border-radius: 4px; }

  h1.page-title { font-size: clamp(25px, 6.6vw, 34px); margin-bottom: 12px; }
  .about-text { font-size: 15.5px; }
  /* Флекс-контейнер float не обтекает — он встаёт рядом и жмётся в остаток
     ширины. Счётчику это ломало бы верхнюю линейку, кнопкам — размер, поэтому
     оба пропускают фото и идут во всю ширину под ним. Обычно к этому месту
     float уже кончился, и clear ничего не двигает. */
  .hero-stats { clear: right; margin: 16px 0 18px; padding-top: 14px; font-size: 12.5px; gap: 6px 16px; }
  .hero-stats b { font-size: 20px; }
  .hero-ctas { clear: right; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Section headings ─────────────────────────────*/
.section { padding: 48px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 27px; margin: 0; }
.section-head .see-all { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.section-note { color: var(--text-muted); font-size: 14.5px; margin: -14px 0 22px; max-width: 60ch; }

/* ── Card grids ───────────────────────────────────*/
/* Три карточки в ряд, а не четыре: в путеводителе решает фотография, а на
   четверти ширины её толком не видно. На 1160 px колонки карточка выходит
   ~357 px шириной, обложка при 3:2 — ~238 px высотой. */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Две колонки держим до самых узких экранов: правило «ниже 560 px — одна
   карточка» превращало ленту в полноэкранный список, по которому не видно
   ничего, кроме текущей карточки. Под два столбца ниже (640 px) уже подогнаны
   размеры шрифтов и отступов. */
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--accent); }
.card .cover {
  /* 3:2 от ширины карточки — соотношение, под которое снимает почти любая
     камера, поэтому обложка обрезается минимально. */
  aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(135deg, var(--accent-soft), var(--bg-elevated));
  background-size: cover; background-position: center; position: relative;
}
/* Обложка лежит картинкой внутри .cover, а не фоном самого блока: так браузер
   умеет отложить загрузку тех, до которых человек ещё не доскроллил.
   Градиент под ней остаётся заглушкой на время загрузки и у карточек без фото. */
.card .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card .cover .top-badge {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px; background: var(--gold); color: #2A2205;
}
.card .body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin: 0; text-wrap: balance; }
.card .excerpt { font-size: 14.5px; color: var(--text-muted); margin: 0; flex: 1; }
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12.5px; padding: 3px 9px; border-radius: 6px; background: var(--bg-elevated);
  border: 1px solid var(--border); color: var(--text-muted);
}
.tag-likes { color: #e0554a; border-color: #f2c9c5; background: #fdf1f0; }

/* Категория в теге — со своей иконкой вместо системного эмодзи (см.
   site_app/icons.py: какой категории какая картинка). */
.tag-cat { display: inline-flex; align-items: center; gap: 5px; }
/* Иконка приходит либо картинкой (site_app/static/icons), либо вектором —
   размер задаём одинаковый, object-fit нужен растровому варианту. */
.cat-icon { width: 15px; height: 15px; flex: none; object-fit: contain; }
/* В шапке страницы места/маршрута строка набрана капслоком и крупнее —
   иконке нужен свой размер и поправка на базовую линию. */
.eyebrow .cat-icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; }

/* Плитка «ещё N мест/маршрутов» — последняя клетка сетки вместо пустого
   места, когда карточек в подборке меньше, чем всего есть на сайте. Ровно
   card по форме (сетке без разницы), но с обратными цветами акцента. */
.more-tile {
  align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 24px 18px; background: var(--accent-soft); border-style: dashed; border-color: var(--accent);
}
.more-tile:hover { background: #D7EFD9; }
.more-tile-count { font-family: var(--font-display); font-size: 34px; color: var(--accent-dark); line-height: 1; }
.more-tile-label { font-size: 14px; color: var(--text-muted); }
.more-tile-cta { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--accent); }

/* Случайное место — клетка сетки, а не колода в шапке, как было раньше.
   Карточка обычная, но помечена золотом: соседи в ряду выбраны по популярности,
   а эта выпала жребием, и это должно быть видно до клика. */
/* Через .card.random-card, а не просто .random-card: у «.card:hover» тот же
   вес, и порядок в файле решал бы, каким станет цвет рамки на наведении. */
.card.random-card { border-color: var(--gold); }
.card.random-card:hover { border-color: var(--gold-dark); }
.random-tag {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(20, 23, 15, .55); color: #fff;
}
/* Пара кнопок внизу карточки — «Смотреть» и «Ещё», как было у колоды в шапке.
   Карточка целиком не ссылка: две кнопки внутри ссылки браузер не разрешает. */
.random-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.random-actions .btn { padding: 9px 16px; font-size: 14px; }
.btn-gold { background: var(--gold); color: #2A2205; }
.btn-gold:hover { background: var(--gold-dark); color: #fff; }
.btn-gold-ghost { background: transparent; color: var(--gold-dark); border-color: #E6CE8E; }
.btn-gold-ghost:hover { border-color: var(--gold-dark); background: var(--gold-soft); }
/* Пока идёт перетасовка — содержимое притухает, но карточка не прыгает: она
   стоит в сетке, и любой сдвиг размера дёргал бы соседние клетки. Кнопки не
   гасим, чтобы «Ещё» под пальцем оставался на виду. */
.random-card .cover, .random-card h3, .random-card .excerpt { transition: opacity .15s ease; }
.random-card.rolling .cover,
.random-card.rolling h3,
.random-card.rolling .excerpt { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  .random-card .cover, .random-card h3, .random-card .excerpt { transition: none; }
}

/* Округ над заголовком карточки — общий стиль для мест, маршрутов и статей:
   раньше у мест и маршрутов округ был обычным серым тегом внизу и терялся
   среди «Платно» и «Для детей». */
.card .kicker { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }

/* На телефоне minmax(260px,1fr) оставлял ровно одну карточку на экран —
   лента превращалась в полноэкранный список без обзора. Два столбца плотнее
   и информативнее: превью меньше, но видно сразу и заголовок, и теги. */
@media (max-width: 640px) {
  .grid { gap: 12px; }
  .card .body { padding: 10px 11px 12px; gap: 5px; }
  .card h3 { font-size: 14.5px; line-height: 1.25; }
  .card .excerpt {
    font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden;
  }
  .card .tags { gap: 4px; }
  .tag { font-size: 11px; padding: 2px 7px; }
  .tag-cat { gap: 4px; }
  .cat-icon { width: 13px; height: 13px; }
  .card-relation { font-size: 11.5px; }
  .fav-btn-card { width: 28px; height: 28px; }
  .more-tile { padding: 16px 10px; }
  .more-tile-count { font-size: 24px; }
  .more-tile-label, .more-tile-cta { font-size: 12px; }
  .random-tag { font-size: 10px; padding: 3px 8px; top: 8px; left: 8px; }
  .random-again { right: 8px; bottom: 8px; padding: 6px 11px; font-size: 12px; }
  .card.random-card .body { padding-bottom: 44px; }
}
@media (max-width: 300px) {
  .grid { grid-template-columns: 1fr; }
}

/* ── Filter bar ───────────────────────────────────*/
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 16px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 28px;
}
.filters select {
  font-family: var(--font-body); font-size: 13.5px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.filters label.check {
  display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-muted);
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
}
.filters .reset { margin-left: auto; font-size: 13px; color: var(--accent); }
.result-count { font-size: 13.5px; color: var(--text-muted); margin: -14px 0 20px; }

/* ── Detail page ──────────────────────────────────*/
.detail-hero { height: clamp(280px, 38vw, 460px); border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-elevated)); background-size: cover; background-position: center; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.detail-body, .article-main { min-width: 0; }
/* На телефоне колонки справа нет, и спецификация (сложность, сезон, стоимость,
   кнопка в навигатор) улетала в самый конец — за описание, галерею и точки
   маршрута. Раскрываем .detail-body в display:contents, чтобы его дети стали
   клетками того же грида, и опускаем ниже спецификации только текст: заголовок
   с категорией остаются наверху, как и были. */
@media (max-width: 900px) {
  /* gap: 0 — у детей .detail-body свои отступы, и общий зазор грида добавился
     бы к ним сверху; спецификации задаём поля отдельно. */
  .detail-grid { grid-template-columns: 1fr; gap: 0; }
  .detail-body { display: contents; }
  .detail-grid > *, .detail-body > * { min-width: 0; }
  .detail-text { order: 1; }
  .spec-box { margin: 6px 0 24px; }
}
.detail-body p { font-size: 17px; color: var(--text); max-width: 68ch; margin: 0 0 16px; }
.detail-body .lede { font-size: 18.5px; color: var(--text-muted); }
.detail-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 23px; margin: 28px 0 12px; }
.detail-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin: 22px 0 10px; }
.detail-body ul, .detail-body ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.detail-body li { margin-bottom: 6px; }
.detail-body a { color: var(--accent); text-decoration: underline; }
.detail-body img { max-width: 100%; border-radius: 10px; margin: 4px 0 10px; }
.spec-box {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px;
}
.spec-box dl { margin: 0; }
.spec-box dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 12px; }
.spec-box dt:first-child { margin-top: 0; }
.spec-box dd { margin: 3px 0 0; font-size: 14.5px; }
.spec-box .btn { width: 100%; margin-top: 16px; }

/* ── Карусель фото места/маршрута — тот же почерк, что у .article-gallery
   (счётчик + подпись под фото), но одна большая витрина на всю ширину:
   здесь фото рассказывают само место, а не иллюстрируют абзац текста.
   Слайды — фиксированное соотношение сторон с object-fit:cover, поэтому
   горизонтальный и вертикальный кадр в ленте не прыгают по высоте. ── */
.pcar { position: relative; margin: 28px 0; outline: none; }
.pcar-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; border-radius: var(--radius);
  scrollbar-width: none;
}
.pcar-track::-webkit-scrollbar { display: none; }
.pcar-slide {
  flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 10;
  background: var(--bg-elevated);
}
.pcar-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .pcar-slide { aspect-ratio: 4 / 3; } }

.pcar-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 24, 20, .45); color: #fff; backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.pcar:hover .pcar-nav, .pcar:focus-within .pcar-nav { opacity: 1; }
.pcar-nav:hover { background: rgba(20, 24, 20, .7); }
.pcar-nav svg { width: 20px; height: 20px; }
.pcar-prev { left: 12px; }
.pcar-prev svg { transform: rotate(180deg); }
.pcar-next { right: 12px; }
.pcar-nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) and (pointer: coarse) { .pcar-nav { display: none; } }

.pcar-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 6px; padding: 5px 7px; border-radius: 999px; background: rgba(20, 24, 20, .4);
}
.pcar-dot { width: 6px; height: 6px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .5); padding: 0; }
.pcar-dot.active { background: #fff; width: 16px; border-radius: 3px; }

.pcar-info { display: flex; gap: 8px; margin-top: 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--text-muted); min-height: 20px; }
.pcar-counter { flex: none; font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 12.5px; padding-top: 1px; }
.pcar-caption { flex: 1; min-width: 0; }

.checkpoint-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.checkpoint-row:last-child { border-bottom: none; }
.checkpoint-row .num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.checkpoint-row .cname { font-weight: 600; font-size: 14.5px; }
.checkpoint-row .cmeta { font-size: 12.5px; color: var(--text-muted); }

/* ── Article body ─────────────────────────────────
   Типографика в духе Т—Ж: заголовки — жирный гротеск, тело текста — засечками
   (переиспользуем var(--font-display), тот же Georgia/PT Serif, что и в
   заголовках места/маршрута — просто здесь текст, а не только h1). ── */
.article-body {
  font-family: var(--font-display); font-size: 20px; line-height: 1.55;
  max-width: 68ch; color: var(--text);
}
.article-body p { margin: 0 0 22px; }
.article-body h2 {
  font-family: var(--font-body); font-weight: 800; font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.2; letter-spacing: -.005em; margin: 40px 0 16px;
}
.article-body h3 {
  font-family: var(--font-body); font-weight: 700; font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.25; margin: 30px 0 12px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body strong, .article-body b { font-family: var(--font-body); font-weight: 700; }
.article-body blockquote { margin: 0 0 22px; padding-left: 16px; border-left: 3px solid var(--accent); color: var(--text-muted); }
.article-body a {
  color: var(--accent-dark); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.article-body a:hover { color: var(--accent); }
.article-body img { max-width: 100%; border-radius: 10px; display: block; margin: 4px 0 10px; }
.article-body p img:only-child { width: 100%; margin: 0 0 4px; }

/* ── Фотоколлаж (2-4 фото в ряд, с подписью и счётчиком под каждым — как
   в галереях Т—Ж). Серверный рендер группирует подряд идущие <img> в один
   параграф в этот блок — см. _render_article_gallery в site_app/router.py.
   Прокрутка нативная (overflow-x + scroll-snap) — без JS-карусели. ── */
.article-gallery { margin: 36px 0; position: relative; }
/* Стрелки поверх ленты — появляются при наведении на десктопе, на телефоне
   не нужны: там листают пальцем и стрелки только закрывают кадр. */
.gal-nav {
  position: absolute; top: calc(50% - 22px); transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(6px); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .15s ease, border-color .15s ease;
  z-index: 2;
}
.gal-nav svg { width: 20px; height: 20px; }
.gal-prev { left: 10px; }
.gal-next { right: 10px; }
.article-gallery:hover .gal-nav, .gal-nav:focus-visible { opacity: 1; }
.gal-nav:hover { border-color: var(--accent); color: var(--accent); }
.gal-nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .gal-nav { display: none; } }
/* width:0 + min-width:100% — лента не участвует в расчёте «сколько места мне
   нужно», а берёт ширину колонки и прокручивается внутри себя. Без этого
   кадры произвольной ширины раздвигали саму колонку: на странице места
   коллаж вылезал поверх боковой панели. */
.article-gallery-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px; margin: 0 -2px;
  width: 0; min-width: 100%;
}
/* Кадры в коллаже сохраняют свои пропорции: высота у всех одна, а ширину
   задаёт само фото — горизонтальное занимает много места, вертикальное
   узкую полосу. Раньше всё резалось под 3:4, и панорама с плато выглядела
   так же, как портретный кадр водопада. */
.article-gallery-item {
  flex: 0 0 auto; scroll-snap-align: start; margin: 0;
}
.article-gallery-item img {
  height: 440px; width: auto;
  /* max-width глобально стоит 100% на всех img — здесь он мешает картинке
     стать шире колонки, а панораме это как раз нужно. Потолок оставляем,
     чтобы совсем широкий кадр не уезжал за экран. */
  max-width: 78vw; object-fit: cover;
  border-radius: 10px; display: block; margin: 0;
}
@media (max-width: 900px) { .article-gallery-item img { height: 340px; max-width: 88vw; } }
@media (max-width: 640px) { .article-gallery-item img { height: 260px; } }
.article-gallery-caption {
  display: flex; gap: 8px; margin-top: 12px; width: 0; min-width: 100%;
  font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--text-muted);
}
.article-gallery-counter { flex: none; font-weight: 700; color: var(--text); }
.article-gallery-text { flex: 1; min-width: 0; }

/* Одиночное фото с подписью — та же типографика подписи, что в коллаже */
.article-figure { margin: 36px 0; }
.article-figure img { width: 100%; border-radius: 10px; display: block; margin: 0; }
.article-figure figcaption {
  margin-top: 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--text-muted);
}

.featured-row { margin: 32px 0; }
.featured-row h4 { font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 14px; }

/* ── Дата проверки у заголовка ────────────────────*/
.updated-note {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  margin: -6px 0 18px; letter-spacing: .02em;
}

/* Пояснение связи на карточке маршрута («Место на этом маршруте») */
.card-relation {
  margin: 0; font-size: 12.5px; font-weight: 600; color: var(--accent-dark);
}

/* ── Развилка по ситуации — главный вход на сайт ──*/
.doors-section { padding-top: 8px; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.door {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.door:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.door-icon { font-size: 26px; line-height: 1; flex: none; }
.door-main { flex: 1; min-width: 0; }
.door-title { display: block; font-family: var(--font-display); font-size: 19px; }
.door-hint { display: block; font-size: 14px; color: var(--text-muted); margin-top: 3px; }
.door-arrow { color: var(--accent); font-size: 18px; flex: none; transition: transform .15s ease; }
.door:hover .door-arrow { transform: translateX(3px); }

/* Плитка сценария с обложкой — тот же .door, но вертикальная фотокарточка
   вместо ряда с эмодзи. Фото своё, отдельное от шапки страницы сценария
   (та — горизонтальная, для плитки нужен свой вертикальный кадр). Пока
   обложка плитки не загружена в админке, сценарий продолжает показываться
   обычным рядом (правило выше) — сетка не ждёт, пока все фото будут готовы. */
.door-photo {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  background-size: cover; background-position: center; border: none; padding: 0;
  box-shadow: var(--shadow);
}
.door-photo:hover { border-color: transparent; }
.door-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 6, 0) 28%, rgba(6, 10, 5, .55) 60%, rgba(4, 7, 3, .92) 100%);
}
.door-photo .door-main { position: absolute; left: 20px; right: 20px; bottom: 18px; flex: none; }
.door-photo .door-title { color: #fff; font-size: 21px; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.door-photo .door-hint { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .3); margin-top: 4px; }

/* На телефоне minmax(300px) оставлял одну дверь на всю ширину — сценарии
   листались по одному, как лента. Ставим ровно два столбца и разворачиваем
   строку в колонку: в половине ширины иконка, название и подпись в один ряд
   не помещаются. Стрелка уходит — на тач-экране она ничего не поясняет. */
@media (max-width: 640px) {
  .doors { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .door { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .door-icon { font-size: 22px; }
  .door-title { font-size: 16px; line-height: 1.25; }
  .door-hint { font-size: 12.5px; margin-top: 4px; }
  .door-arrow { display: none; }
  .door-photo { padding: 0; }
  .door-photo .door-main { left: 12px; right: 12px; bottom: 12px; }
  /* Длинные названия и подписи в плитке шириной в пол-экрана растягивались на
     6–8 строк и закрывали весь кадр — фото переставало быть фото. Режем по
     строкам: три на название, две на подпись, дальше многоточие. */
  .door-photo .door-title {
    font-size: 15.5px; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .door-photo .door-hint {
    font-size: 12px; line-height: 1.3; margin-top: 3px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  /* Затемнение поднимаем выше: текста теперь до пяти строк, и на светлом небе
     верхние из них не читались. */
  .door-photo-veil {
    background: linear-gradient(180deg, rgba(8, 12, 6, 0) 8%, rgba(6, 10, 5, .58) 42%, rgba(4, 7, 3, .94) 100%);
  }
}
@media (max-width: 300px) {
  .doors { grid-template-columns: 1fr; }
}

/* ── Переход в клуб ───────────────────────────────*/
.club-cta-section { padding: 32px 0; }
.club-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid #C6E4C8; border-radius: var(--radius);
  padding: 22px 26px;
}
.club-cta-text { font-size: 15.5px; color: var(--text); max-width: 62ch; }
.club-cta-text b { display: block; font-size: 18px; margin-bottom: 4px; }
.club-cta .btn { flex: none; }

/* ── «О чём спрашивают в клубе» ────────────────────
   Реплики из чата, а не рекламные тезисы: карточка — это одна живая фраза
   с пометкой темы. Кавычки рисуем псевдоэлементом, чтобы автор в админке
   набирал только сам вопрос и не думал про пунктуацию вокруг него. */
.club-questions { padding-top: 8px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.qcard {
  position: relative; padding: 18px 20px 18px 22px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 15px; color: var(--text);
}
.qcard::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); opacity: .45;
}
.qcard b {
  display: block; margin-bottom: 6px; font-weight: 700;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-dark);
}

/* ── Округа ───────────────────────────────────────*/
.district-card .body { padding: 20px; }
.district-card h3 { font-size: 20px; }
.district-lead { max-width: 68ch; margin-bottom: 24px; }
.facts {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; max-width: 68ch;
}
.facts h4 {
  font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 0 0 12px;
}
.facts ul { margin: 0; padding-left: 20px; }
.facts li { margin-bottom: 8px; font-size: 15px; }
.facts li:last-child { margin-bottom: 0; }

/* ── Empty state ──────────────────────────────────*/
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 15px;
  border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ── Footer ────────────────────────────────────────*/
.site-footer { border-top: 1px solid var(--border); margin-top: 60px; padding: 32px 0; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.footer-stats { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.footer-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
/* Раньше был в верхнем меню — переехал сюда, когда шапка сжалась до пяти
   основных пунктов; сама страница /voprosy никуда не делась. */
.footer-faq { font-size: 14px; color: var(--text-muted); text-decoration: none; margin-right: auto; }
.footer-faq:hover { color: var(--accent); }
.footer-club { font-size: 15px; }
.footer-club a { color: var(--accent); font-weight: 700; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .site-header { top: 10px; margin-bottom: 26px; }
  .capsule { padding: 6px 6px 6px 14px; gap: 4px; }
  .brand-word { font-size: 16px; }
}

/* ── Избранное — звёздочка, чисто клиентское состояние (localStorage) ──── */
.fav-icon { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.fav-btn.active .fav-icon { fill: currentColor; }
.fav-btn {
  border: none; background: rgba(28, 35, 28, .45); color: rgba(255,255,255,.85);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: color .15s ease, transform .12s ease, opacity .15s ease;
}
.fav-btn:hover { color: var(--gold); }
.fav-btn.active { color: var(--gold); }
.fav-btn:active { transform: scale(0.9); }

/* На карточках звёздочка не мозолит глаза каждому месту в подборке —
   видна только при наведении, либо постоянно, если место уже в избранном. */
.fav-btn-card { position: absolute; top: 10px; left: 10px; opacity: 0; }
.card:hover .fav-btn-card, .fav-btn-card.active { opacity: 1; }
.detail-hero { position: relative; }
/* Обложка детальной страницы тоже картинкой, а не фоном: браузер видит её
   в разметке сразу и начинает качать, не дожидаясь загрузки и разбора CSS. */
.detail-hero .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Более заметная кнопка избранного на детальной странице — рядом с
   заголовком, а не мелкой звёздочкой поверх фото. */
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fav-btn-lg {
  flex-shrink: 0; width: auto; height: auto; border-radius: 999px;
  background: var(--bg-card); border: 1.5px solid var(--border); color: var(--text-muted);
  padding: 9px 16px; font-size: 14px; font-weight: 600; gap: 7px; margin-top: 4px;
}
.fav-btn-lg .fav-icon { width: 17px; height: 17px; }
.fav-btn-lg:hover { border-color: var(--gold); color: var(--gold-dark); }
.fav-btn-lg.active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-dark); }

/* ── Лайк «Понравилось» ──────────────────────────────────────────────── */
.like-icon { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.like-btn.liked .like-icon { fill: currentColor; }
.like-row { margin: 8px 0 28px; }
.like-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px;
  border-radius: 999px; border: 2px solid #e0554a; background: var(--bg-card);
  font-size: 15.5px; font-weight: 600; color: #e0554a; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.like-btn:hover { background: rgba(224, 85, 74, .08); }
.like-btn.liked { background: #e0554a; color: #fff; }
.like-btn .like-count { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Шкала сложности — точки + подсказка со всеми уровнями ─────────────── */
.diff-widget { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.diff-dots { display: inline-flex; gap: 3px; }
.diff-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.diff-dots .dot.on { background: var(--gold); }
.diff-label { font-weight: 700; }
.diff-info-btn {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.diff-info-btn:hover { border-color: var(--accent); color: var(--accent); }
.diff-popover {
  display: none; position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 280px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  padding: 14px 16px;
}
.diff-popover.open { display: block; }
/* Наведение на всю подпись, а не только на «?»: попасть курсором в кружок
   14 px тяжело, а узнать, что значит уровень, хочется мимоходом. На тач-
   устройствах hover не срабатывает — там остаётся клик по «?». */
@media (hover: hover) {
  .diff-widget:hover .diff-popover { display: block; }
}
.diff-popover-title { font-weight: 700; font-size: 13.5px; margin: 0 0 6px; color: var(--text); }
.diff-popover-intro { font-size: 13px; line-height: 1.45; color: var(--text-muted); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.diff-popover ul { list-style: none; margin: 0; padding: 0; }
.diff-popover li { font-size: 13px; line-height: 1.45; color: var(--text-muted); margin-bottom: 10px; }
.diff-popover li:last-child { margin-bottom: 0; }
.diff-popover li.current { font-weight: 700; color: var(--text); }

/* ── Статья: оглавление ─────────────────────────────────────────────────── */
.article-layout { display: block; }
.article-layout.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 44px; align-items: start; }
.article-toc { position: sticky; top: 84px; }
.toc-label { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 12px; }

/* На широком экране это по-прежнему просто колонка справа: <details> раскрыт
   всегда, а его треугольник и реакция на клик убраны — сворачивать сайдбар,
   который и так помещается, незачем. */
@media (min-width: 901px) {
  .article-toc > summary { list-style: none; cursor: default; pointer-events: none; }
  .article-toc > summary::-webkit-details-marker { display: none; }
}
.article-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border); }
.article-toc nav a {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-muted);
  transition: color .12s ease;
}
/* Подпункты h3 — с отступом и легче по начертанию, чтобы структура читалась
   с одного взгляда, а не выглядела плоским списком. */
.article-toc nav a.toc-l3 { padding-left: 32px; font-size: 14px; font-weight: 600; }
.article-toc nav a:hover { color: var(--accent); }
.article-toc nav a.active { color: var(--accent-dark); }
.article-toc nav a.active::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--accent);
}

/* На телефоне колонки справа нет — оглавление переезжает наверх (order: -1,
   в разметке оно идёт после текста) и становится сворачиваемой полосой.
   Свёрнутым его делает site.js: в разметке стоит open, чтобы без скриптов
   содержание осталось на виду. */
@media (max-width: 900px) {
  .article-layout.has-toc { grid-template-columns: 1fr; gap: 0; }
  .article-toc {
    order: -1; position: static; margin: 0 0 26px; padding: 2px 16px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .article-toc > summary {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 13px 0; cursor: pointer; list-style: none;
  }
  .article-toc > summary::-webkit-details-marker { display: none; }
  .article-toc > summary::after {
    content: "⌄"; font-size: 17px; line-height: 1; color: var(--accent);
    transform: translateY(-3px); transition: transform .18s ease;
  }
  .article-toc[open] > summary::after { transform: rotate(180deg) translateY(-1px); }
  .article-toc nav { border-left: none; padding: 0 0 12px; gap: 0; }
  .article-toc nav a { padding: 8px 0 8px 12px; font-size: 15px; border-left: 2px solid var(--border); }
  .article-toc nav a.toc-l3 { padding-left: 26px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-toc > summary::after { transition: none; }
}

/* ── FAQ-блок в конце статьи ─────────────────────────────────────────────── */
.faq-block { margin: 36px 0; max-width: 68ch; }
.faq-block h4 { font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 14px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq-item summary { font-family: var(--font-body); font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; display: inline-block; width: 18px; color: var(--accent); font-weight: 700; }
.faq-item[open] summary::before { content: '−'; }
.faq-item p { margin: 10px 0 0 18px; font-size: 15px; color: var(--text-muted); }

/* ── Мастер подбора места на главной ────────────────────────────────────── */
.wizard { margin-top: 20px; }
.wizard-toggle {
  display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--accent);
  cursor: pointer; list-style: none;
}
.wizard-toggle::-webkit-details-marker { display: none; }
.wizard-form {
  margin-top: 14px; padding: 16px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); max-width: 480px;
}
.wizard-q { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.wizard-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); font-size: 13px; cursor: pointer;
}
.chip input { accent-color: var(--accent); }
.chip:has(input:checked) { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.chip-check { margin-bottom: 14px; }
.wizard-form .btn { width: 100%; }

/* ── Лид-магнит внутри статьи ─────────────────────
   Пиксельно по референсу (lid.png — цвета и пропорции сняты напрямую из
   картинки скриптом): ДВЕ отдельные скруглённые панели с зазором между
   ними (не одна общая рамка), сверху — крупная иконка подарка почти во всю
   высоту панели, снизу — салатовая CTA-полоса с кнопками мессенджеров,
   видимыми сразу. Иконки — настоящие картинки (gift/tg/max), не эмодзи. ── */
.magnet { margin: 36px 0; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-body); }

.magnet-top {
  display: flex; gap: 24px; align-items: center; padding: 20px 28px;
  background: #FBF0D8; border-radius: 16px;
}
.magnet-gift { flex: none; width: 128px; height: auto; }
.magnet-copy { min-width: 0; flex: 1; }
/* .article-body/.detail-body уже задают свои margin/color для <p> и <a> с более
   высокой специфичностью (класс+тег бьёт один класс) — без явного .magnet
   впереди эти правила молча проигрывали и утаскивали чужой отступ 22px и
   зелёный цвет ссылок статьи внутрь плашек. Держим специфичность выше здесь. */
.magnet .magnet-title {
  font-weight: 800; font-size: 24px; line-height: 1.3; margin: 0 0 8px; color: #14170F;
  text-wrap: balance;
}
.magnet .magnet-text {
  font-weight: 700; font-size: 16px; line-height: 1.4; color: #262B20;
  margin: 0; max-width: 46ch; text-align: center;
}

.magnet-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 14px 28px; background: #FBFF8F; border-radius: 16px;
}
.magnet-cta-copy { display: flex; flex-direction: column; line-height: 1.15; }
.magnet-cta-kicker { font-size: 17px; color: #262B20; }
.magnet-cta-text { font-weight: 800; font-size: 32px; color: #14170F; }
.magnet .magnet-note { font-size: 12px; color: #4B5230; margin: 4px 0 0; }
.magnet-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.magnet .magnet-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 26px 14px 16px; min-width: 190px;
  border-radius: 999px; font-weight: 700; font-size: 18px; color: #14170F;
  text-decoration: none; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
}
.magnet .magnet-pill:hover { color: #14170F; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28, 35, 28, .16); }
/* .article-body img красит все картинки статьи скруглением и отступами
   (border-radius:10px, margin:4px 0 10px) — та же специфичность (класс+тег),
   что и .magnet-pill img, побеждает по свойствам, которые здесь не заданы
   явно. Без сброса иконка съезжала вниз-влево и теряла форму круга. */
.magnet-pill img { width: 34px; height: 34px; object-fit: cover; flex: none; margin: 0; border-radius: 50%; }
.magnet-pill-tg { background: #E7F4FC; border-color: #6EC3EE; }
.magnet-pill-max {
  background-image: linear-gradient(#F6EFFE, #F6EFFE), linear-gradient(120deg, #6E7BF2, #B36EF2, #4FA9F5);
  background-origin: border-box; background-clip: padding-box, border-box;
}
@media (max-width: 560px) {
  .magnet-top { flex-direction: column; align-items: flex-start; text-align: left; }
  .magnet-gift { width: 92px; }
  .magnet .magnet-text { text-align: left; }
  .magnet-cta { flex-direction: column; align-items: flex-start; }
  .magnet-actions, .magnet .magnet-pill { width: 100%; }
}

/* ── FAQ-блок: аккордеон ──────────────────────────*/
.faq-page-block { margin-bottom: 36px; max-width: 68ch; }
.faq-item[open] .faq-answer { animation: faq-reveal .22s ease; }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.faq-answer p { margin: 10px 0 0 18px; font-size: 15px; color: var(--text-muted); }
.faq-answer ul, .faq-answer ol { margin: 10px 0 0 18px; padding-left: 20px; color: var(--text-muted); font-size: 15px; }
.faq-answer a { color: var(--accent); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-answer { animation: none; }
}

/* Кнопка «?» у сложности — на телефоне в неё было не попасть пальцем */
@media (hover: none) and (pointer: coarse) {
  .diff-info-btn { width: 28px; height: 28px; font-size: 13px; }
}

/* ── Страница 404 ─────────────────────────────────
   Битая ссылка раньше отдавала голый JSON от FastAPI. Теперь это обычная
   страница сайта: маскот во всю ширину колонки, короткое объяснение и
   выходы в основные разделы, чтобы человек не закрыл вкладку. */
.notfound { padding-top: 56px; }
.notfound-inner { max-width: 620px; text-align: center; }
/* display:block + auto-поля, а не text-align от родителя: <picture> — строчный
   элемент, и на узком экране картинка прижималась к левому краю. */
.notfound-cat {
  display: block; width: 100%; max-width: 260px; height: auto;
  border-radius: 24px; box-shadow: var(--shadow); margin: 0 auto 26px;
}
.notfound .page-title { margin: 6px 0 14px; }
.notfound-text { color: var(--text-muted); font-size: 17px; margin: 0 auto; max-width: 46ch; }
.notfound-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 0;
}
.notfound-links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border);
}
.notfound-links a { color: var(--text-muted); font-size: 15px; text-decoration: none; }
.notfound-links a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
  .notfound { padding-top: 32px; }
  .notfound-cat { max-width: 200px; margin-bottom: 20px; }
  .notfound-links { gap: 8px 16px; }
  .notfound-text { font-size: 16px; }
  .notfound-actions .btn { flex: 1 1 100%; }
}