/* Вид карточек, которые генерит движок админки в ленты блога, каталога
   экскурсий и списки гидов. Разметку движок отдаёт семантическую
   (.article-card и т.д.), а внешний вид задаётся здесь — под палитру Kidster.
   Так генерация не зависит от инлайновых стилей макета. */

:root {
  --k-cream: #FCF8F3;
  --k-ink: #3B2A1D;
  --k-muted: #55504A;
  --k-line: #E2D5C4;
  --k-accent: #D9613A;
  --k-accent-soft: #F8C9B4;
}

/* --- карточка записи ------------------------------------------------- */
.article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--k-line);
  border-radius: 20px;
  overflow: hidden;
  color: var(--k-ink);
  text-decoration: none;
  transition: box-shadow .28s ease, transform .22s ease, border-color .22s ease;
  min-width: 0;
}
.article-card:hover {
  box-shadow: 0 18px 40px rgba(59, 42, 29, .10);
  border-color: var(--k-accent-soft);
  transform: translateY(-2px);
}

.ac-visual {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(127, 127, 127, .08);
}
.ac-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-vis-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--k-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 100px;
}

.ac-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.ac-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--k-muted);
  flex-wrap: wrap;
}
.ac-cat { color: var(--k-accent); font-weight: 600; }
.ac-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--k-line); }

.article-title {
  font-family: 'Geologica', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.ac-excerpt {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--k-muted);
}
.ac-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.ac-tag {
  font-size: 12.5px;
  color: var(--k-muted);
  border: 1px solid var(--k-line);
  border-radius: 100px;
  padding: 3px 10px;
}

/* --- карточка второго вида (экскурсии, гиды) -------------------------- */
.case-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--k-ink);
  border: 1px solid var(--k-line);
  background: #fff;
  transition: box-shadow .28s ease, transform .22s ease;
  min-width: 0;
}
.case-card:hover {
  box-shadow: 0 18px 40px rgba(59, 42, 29, .10);
  transform: translateY(-2px);
}
.case-thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.case-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-thumb-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(59, 42, 29, .55) 100%);
}
.case-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(252, 248, 243, .92);
  color: var(--k-ink);
  font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
}
.case-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.case-body h3 {
  margin: 0;
  font-family: 'Geologica', sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
}
.case-body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--k-muted); }
.case-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 4px;
}
.case-meta-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.case-mtag {
  font-size: 12.5px; color: var(--k-muted);
  border: 1px solid var(--k-line); border-radius: 100px; padding: 3px 10px;
}
.case-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--k-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--k-ink); flex-shrink: 0;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.case-card:hover .case-arrow {
  background: var(--k-ink); color: #fff; border-color: var(--k-ink);
}
.case-arrow svg { width: 16px; height: 16px; }

/* --- мобильные ------------------------------------------------------- */
@media (max-width: 900px) {
  .ac-body, .case-body { padding: 16px 16px 18px; }
  .article-title { font-size: 17.5px; }
  .case-body h3 { font-size: 17px; }
}

/* ==================================================================== */
/*  Страница экскурсии                                                   */
/*                                                                       */
/*  Блоки собираются движком из полей записи, поэтому вид задаётся здесь, */
/*  а не инлайновыми стилями макета: сколько секций у экскурсии в         */
/*  оригинале, столько и отрисуется, и все они выглядят одинаково.        */
/* ==================================================================== */

/* --- плашки и факты в шапке ------------------------------------------ */
.ex-chip {
  background: #F4EDE4; border: 1px solid #EFE5D8; color: var(--k-muted);
  font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 100px;
}
/* Город и страна — отдельные плашки-ссылки на свои разделы. Вид тот же, что у
   неподвижных плашек: разница только в отклике на наведение, чтобы плашка не
   спорила с кнопками первого экрана. */
.ex-chip--link {
  color: var(--k-muted); display: inline-block;
  transition: background-color .22s, color .22s, border-color .22s;
}
.ex-chip--link:hover { background: #3B2A1D; border-color: #3B2A1D; color: #fff; }
.ex-fact { padding: 14px 16px; min-width: 0; border-left: 1px solid #EBDFD0; }
.ex-fact:first-child { border-left: none; }
.ex-fact-k {
  font-size: 12px; letter-spacing: .02em; line-height: 1.25;
  color: #8A8178; margin-bottom: 5px;
}
.ex-fact-v {
  font-family: 'Geologica', sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25;
}

/* --- галерея ---------------------------------------------------------- */
.ex-rail::-webkit-scrollbar { display: none; }
.ex-slide {
  flex: 0 0 100%; width: 100%; min-width: 0; height: 100%;
  scroll-snap-align: start; position: relative;
}
.ex-slide--empty {
  display: flex; align-items: center; justify-content: center;
  color: #8A8178; font-size: 14px; background: rgba(127, 127, 127, .08);
}
.ex-photo, .ex-slide img, .ex-thumb img, .ex-rel-pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
/* Лента миниатюр.
   В макете это грид, который делит всю ширину между кадрами: два фото
   растягивались в две широкие полосы, восемь — в узкие лоскуты, и ни один
   кадр не показывал, что на нём. Кадры теперь одинаковые квадраты, а лента
   при нехватке места прокручивается — стрелок ей не нужно, мышью её тянут
   (см. initDragScroll в app.js), пальцем листают, колесом крутят.
   Раскладка задана в атрибуте style прямо в макете, поэтому важность. */
.ex-thumbs {
  display: flex !important; gap: 8px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.ex-thumbs::-webkit-scrollbar { display: none; }
.ex-thumbs--drag { cursor: grab; }
.ex-thumbs--drag.is-dragging { cursor: grabbing; }
/* Пока тянут — гасим подсветку под курсором и запрет на выделение текста,
   иначе кадр «залипает» ярким и лента тащит за собой выделение. */
.ex-thumbs.is-dragging { user-select: none; }
.ex-thumbs.is-dragging .ex-thumb { opacity: .55; }
/* Притяжка кадров хороша для пальца, но мышь она дёргает: лента уезжает
   дальше курсора и тянется рывками. Пока тянут — выключаем. */
.ex-thumbs.is-dragging { scroll-snap-type: none; }
.ex-thumb {
  flex: 0 0 auto; width: 70px; height: 70px; aspect-ratio: 1;
  border-radius: 12px; overflow: hidden;
  display: block; opacity: .55; scroll-snap-align: start;
  transition: opacity .22s ease, outline-color .22s ease;
  outline: 2px solid transparent; outline-offset: -2px;
}
.ex-thumb:hover, .ex-thumb:focus { opacity: 1; outline-color: #EE7B52; }
/* Картинку внутри не даём тащить: браузер начинает своё перетаскивание
   файла и лента остаётся стоять. */
.ex-thumb img { -webkit-user-drag: none; user-select: none; }

/* «Читать полностью» под тизером. Внешне — как в макете, но это ссылка на
   блок «Об экскурсии», где лежит остаток вступления. */
/* Поля вместо части отступа: строка ссылки — 18 пикселей, для пальца мало.
   Внешний отступ уменьшен ровно на столько, сколько добавлено внутрь, поэтому
   на глаз ничего не сдвинулось, а нажимать стало во что. */
.ex-more {
  display: inline-block; width: fit-content; margin: 1px 0 15px;
  padding: 7px 0;
  font-size: 15px; font-weight: 600; color: #C4653A;
  transition: color .22s ease;
}
.ex-more:hover { color: #A94F28; }
/* Прыжок по якорю ставит раздел вплотную к верху окна, а сверху висит липкая
   шапка — она закрывала заголовок раздела на 39 пикселей. Оставляем ей место. */
#ex-about, #booking { scroll-margin-top: 96px; }

/* --- содержательные секции ------------------------------------------- */
.ex-sec { padding: 64px 48px 0; }
.ex-sec--intro {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: .72fr 1fr; gap: 80px; align-items: start;
}
.ex-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.ex-card {
  border: 1px solid #E7DFD5; border-radius: 22px; padding: 38px 40px;
  min-width: 0;
}
.ex-card:nth-child(odd) { background: #F4EDE4; border-color: transparent; }

/* Широкий блок разрывает ряд карточек: после двух колонок идёт полоса во всю
   ширину, и глазу есть за что зацепиться. Каждая вторая такая полоса с
   заливкой — видно, где кончается одна мысль и начинается следующая. */
.ex-card--wide {
  grid-column: 1 / -1; padding: 40px 44px;
}
.ex-card--wide .ex-prose { max-width: 900px; font-size: 17px; }
.ex-card--accent {
  background: #F7F0E6; border-color: transparent;
  border-left: 3px solid #C4653A; border-radius: 22px;
}

.ex-h2, .ex-h3 {
  font-family: 'Geologica', sans-serif; font-weight: 600;
  letter-spacing: -.035em; line-height: 1.12; margin: 0;
}
.ex-h2 { font-size: 34px; }
.ex-h3 { font-size: 24px; letter-spacing: -.025em; margin-bottom: 20px; }

.ex-prose { font-size: 16.5px; line-height: 1.7; color: #463F3A; }
.ex-sec--intro .ex-prose { font-size: 18px; line-height: 1.75; color: #3F3125; }
.ex-prose p { margin: 0 0 14px; }
.ex-prose p:last-child { margin-bottom: 0; }
.ex-prose ul, .ex-prose ol { margin: 0; padding: 0; list-style: none; }
.ex-prose ol { counter-reset: exn; }
.ex-prose li { position: relative; padding-left: 20px; margin-bottom: 12px; }
.ex-prose li:last-child { margin-bottom: 0; }
.ex-prose ul li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: #C08A5E;
}
.ex-prose ol li::before {
  counter-increment: exn; content: counter(exn) '.';
  position: absolute; left: 0; top: 0; color: #C4653A; font-weight: 600;
}

/* Перечень и текст вокруг него — одна мысль, но разного веса. Списку нужен
   воздух сверху только после абзаца-рассказа; после подводки с двоеточием
   он прижимается вплотную, иначе двоеточие висит в пустоте. */
.ex-prose ul + p, .ex-prose ol + p { margin-top: 18px; }
.ex-prose ul + ul, .ex-prose ul + ol { margin-top: 12px; }
.ex-prose .ex-lead { margin-bottom: 9px; color: #55504A; }

/* Пункты с галочкой. Галочка набрана в тексте символом «✔» и уезжала в первую
   строку слов; здесь она стоит в колонке маркера — иконкой той же формы, что
   и в списке «что входит» под ценой. */
.ex-prose li.ex-li--check { padding-left: 30px; }
.ex-prose ul li.ex-li--check::before {
  top: 5px; width: 16px; height: 16px; border-radius: 0; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4653A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px 16px;
}
/* Эмодзи автора — тоже маркер: свой буллит убираем, иначе их два в ряд. */
.ex-prose li.ex-li--ico { padding-left: 34px; }
.ex-prose ul li.ex-li--ico::before { content: none; }
.ex-li-ico {
  position: absolute; left: 0; top: 0; width: 24px;
  text-align: center; font-size: 16px; line-height: 1.72;
}

/* Предупреждение автора: в источнике это абзац со знаком «❗» в начале — среди
   остальных абзацев он теряется, хотя написан как раз чтобы его заметили. */
.ex-prose .ex-note {
  position: relative; margin: 20px 0 0; padding: 14px 18px 14px 46px;
  background: #FFFCF7; border: 1px solid #EEDFCB;
  border-left: 3px solid #D98B57; border-radius: 14px;
  font-size: 15.5px; color: #4A4239;
}
.ex-prose .ex-note:first-child { margin-top: 0; }
.ex-note-ico { position: absolute; left: 17px; top: 14px; font-size: 15px; }

/* Иконка у заголовка блока: подсказывает, о чём карточка, до чтения — пять
   заголовков подряд одним кеглем иначе сливаются в оглавление. */
.ex-h3--ico { display: flex; align-items: center; gap: 13px; }
.ex-h-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFDFA; border: 1px solid #E9DCCB; color: #C4653A;
}

/* --- условия внизу ---------------------------------------------------- */
.ex-terms { margin: 0; display: grid; gap: 0; }
.ex-term {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 13px 0; border-bottom: 1px solid #EFE5D8;
}
.ex-term:last-child { border-bottom: none; }
.ex-term dt { margin: 0; color: #6E675F; font-size: 15px; }
.ex-term dd {
  margin: 0; font-family: 'Geologica', sans-serif;
  font-size: 15px; font-weight: 500; text-align: right;
}

/* --- похожие ---------------------------------------------------------- */
.ex-rel {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid #E7DFD5; border-radius: 22px;
  overflow: hidden; color: var(--k-ink); text-decoration: none;
  transition: box-shadow .28s ease, transform .22s ease, border-color .22s ease;
}
.ex-rel:hover {
  box-shadow: 0 18px 40px rgba(59, 42, 29, .1);
  border-color: var(--k-accent-soft); transform: translateY(-2px);
}
.ex-rel-pic {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: rgba(127, 127, 127, .08);
}
.ex-rel-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 7px; }
.ex-rel-meta { font-size: 13px; color: #8A8178; }
.ex-rel-title {
  font-family: 'Geologica', sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em;
}
.ex-rel-price {
  font-family: 'Geologica', sans-serif; font-size: 16px; font-weight: 600;
  color: #C4653A; margin-top: 2px;
}

/* Блок «похожее» под записью.
   Движок отдаёт его классами rel-item / rel-title / rel-meta, а описания этих
   классов не было нигде: три ссылки ложились простыми строками по 20 пикселей
   во всю ширину — блок выглядел съехавшим. Оформляем как остальные карточки
   сайта и раскладываем в ряд, который на узком экране становится столбиком. */
.rel-item + .rel-item { margin-top: 0; }
.rel-item {
  display: block; padding: 16px 18px;
  background: #fff; border: 1px solid #E7DFD5; border-radius: 16px;
  color: var(--k-ink); text-decoration: none; min-width: 0;
  transition: box-shadow .28s ease, transform .22s ease, border-color .22s ease;
}
.rel-item:hover {
  box-shadow: 0 14px 30px rgba(59, 42, 29, .1);
  border-color: var(--k-accent-soft); transform: translateY(-2px);
}
.rel-title {
  font-family: 'Geologica', sans-serif;
  font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em;
}
.rel-meta { font-size: 13px; color: #8A8178; margin-top: 4px; }
/* Родителя движок не оформляет — раскладываем его сами, по числу карточек.
   Ширину задаём тут же: блок лежит прямо в секции, без обёртки с колонкой
   в 1280 пикселей, которая держит всё остальное на странице. Без неё ряд
   карточек шёл от края до края и не совпадал левым краем ни с заголовком, ни
   с текстом записи над ним. */
.rel-item:first-child { grid-column: auto; }
div:has(> .rel-item) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; align-items: stretch;
  max-width: 1280px; margin-left: auto; margin-right: auto;
}

/* Фон первого экрана главной поднят на 160 пикселей.
   Он собран из трёх слоёв — иллюстрация и два градиента поверх, — и поднимать
   надо все три вместе: если сдвинуть только градиент, световое пятно разъедется
   с картинкой. Высоту увеличиваем на те же 80, чтобы низ остался на месте и под
   блоком с преимуществами не появилась полоса фона страницы.
   Оба признака в селекторе обязательны: строка «min-height: 880px» у самого
   раздела содержит «height: 880px», и по одному признаку правило подняло бы
   вместе с фоном весь первый экран. */
[style*="top: 0px"][style*="height: 880px"] {
  top: -160px !important;
  height: 1040px !important;
}

/* Карточка «Главное» над лентой блога.
   В макете она в две колонки: текст с отступом 44 слева, картинка вплотную к
   правому краю — поэтому отступы и разные (44 слева, 14 справа). Ниже 1100
   пикселей responsive.js складывает её в одну колонку, картинка встаёт под
   текстом, а перекос отступов остаётся: содержимое сидит в 45 пикселях от
   левого края и в 15 от правого. Пока карточка сложена — отступы равные. */
@media (max-width: 1100px) {
  [style*="padding: 14px 14px 14px 44px"] { padding: 14px !important; }
}

/* Полноширинные полосы на планшете и небольшом ноутбуке.
   В макете такая полоса выходит за отступы приёмом margin: 0 -40px, потому что
   у раздела отступ 40. Ниже 1240 пикселей responsive.js уменьшает отступ до 28,
   а компенсацию правит только на 900 и 560 — в промежутке полоса вылезала на 12
   пикселей с каждой стороны. На 1024 это давало строку копирайта шириной 1048
   при окне 1024 и настоящую горизонтальную прокрутку на страницах рубрик. */
@media (max-width: 1240px) and (min-width: 901px) {
  [style*="margin: 0px -40px"] {
    margin-left: -28px !important; margin-right: -28px !important;
    padding-left: 28px !important; padding-right: 28px !important;
  }
}

/* --- мобильные -------------------------------------------------------- */
@media (max-width: 900px) {
  .ex-sec { padding: 40px 20px 0; }
  .ex-sec--intro { grid-template-columns: 1fr; gap: 18px; }
  .ex-grid { grid-template-columns: 1fr; gap: 16px; }
  .ex-card { padding: 26px 22px; }
  .ex-h2 { font-size: 26px; }
  /* Крошки. Последняя дословно повторяет заголовок, который стоит сразу под
     ней, и занимает две строки из трёх — на телефоне это 120 пикселей первого
     экрана впустую. Прячем её вместе с разделителем, а сам след держим одной
     строкой: длинное название города уезжает в прокрутку полоски, а не
     распирает страницу. 120 пикселей превращаются в 33.

     Важность здесь вынужденная, а не для красоты: отступ, кегль и зазор
     заданы в атрибуте style прямо в макете, а flex-wrap полоске навязывает
     responsive.js — он вставляет своё правило скриптом, и по весу селектора
     оно сильнее любого класса. */
  /* Поля дают самим крошкам, а не полосе: строчка 15 пикселей высотой, попасть
     в неё пальцем трудно, а поля контейнера лежат вне области содержимого —
     растяжка упиралась бы в те же 15. Теперь каждая крошка 29 пикселей, а весь
     блок занимает столько же, сколько занимал: ровно на эти поля уменьшен
     внешний отступ. Накладкой (::after поверх строки) это не решить: полоса
     прокручиваемая, значит обрезает всё, что выходит за её высоту. */
  .ex-crumbs {
    flex-wrap: nowrap !important; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    font-size: 12.5px !important; gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .ex-crumbs::-webkit-scrollbar { display: none; }
  .ex-crumbs > * {
    flex: 0 0 auto; display: flex; align-items: center;
    padding: 7px 0;
  }
  .ex-crumb-now, .ex-crumb-sep--last { display: none; }

  /* Полоска фактов. В четыре колонки на 375 пикселях каждая клетка выходит
     85 пикселей: «Длительность» не влезает в подпись, «от 6 лет» и «до 5 чел.»
     рвутся на две строки. Разворачиваем в два ряда — и раскладка, и обе линии
     задавлены в макете атрибутом style, поэтому важность. */
  .ex-facts {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .ex-facts .ex-fact:nth-child(odd) { border-left: none; }
  .ex-facts .ex-fact:nth-child(n+3) { border-top: 1px solid #EBDFD0; }

  /* Тёмный блок призыва внизу страницы свёрстан в макете жёсткой высотой 300px
     с overflow: hidden. На телефоне текст в нём переносится, содержимому нужно
     328 — и кнопку «Написать в WhatsApp» срезает по нижнему краю на 28
     пикселей. Отпускаем высоту, а накладку внутри возвращаем в поток: она
     растянута inset: 0, и при height: auto блок без этого сложился бы в
     ноль. Селектор по атрибуту — класса у блока нет, а идиома в проекте своя:
     так же устроены мобильные правки в responsive.js. */
  [style*="height: 300px"][style*="rgb(59, 42, 29)"] { height: auto !important; }
  [style*="height: 300px"][style*="rgb(59, 42, 29)"] > div { position: static !important; }
  /* Кнопки в этом блоке не влезают в строку рядом (175 + 12 + 224 против 317
     доступных) и переносятся — их переносит правило responsive.js. Но
     justify-content у ряда не задан, то есть flex-start: перенесённые кнопки
     прижимаются к левому краю, хотя сам ряд отцентрован, и блок выглядит
     съехавшим. Центрируем строки ряда. */
  [style*="height: 300px"][style*="rgb(59, 42, 29)"] [style*="pointer-events: auto"] {
    justify-content: center !important;
  }

  .ex-h3 { font-size: 20px; margin-bottom: 14px; }
  .ex-h3--ico { gap: 10px; }
  .ex-h-ico { width: 31px; height: 31px; border-radius: 9px; }
  .ex-h-ico svg { width: 17px; height: 17px; }
  .ex-sec--intro .ex-prose { font-size: 16.5px; }
  .ex-prose .ex-note { padding: 12px 15px 12px 42px; }
  .ex-term { flex-direction: column; gap: 2px; }
  .ex-term dd { text-align: left; }

  /* Правое выравнивание в одну колонку не работает. В макете условия брони
     («Бронь без предоплаты», «Отмена бесплатно за 24 ч») — правая половина
     ряда с ценой, поэтому прижаты вправо. На телефоне ряд переносится, блок
     встаёт под ценой, и две строки разной длины читаются как съехавшие.
     Исключение — узкие ячейки с числом: там правый край нужен и на телефоне,
     цифры выравниваются по разряду. */
  [style*="text-align: right"]:not([style*="width: 36px"]) {
    text-align: left !important;
  }

  /* Зоны нажатия в подвале. Строчка ссылки — 18 пикселей высотой, соседняя в
     7 пикселях: попасть пальцем в нужную трудно, промахи почти неизбежны.
     Добавляем ссылке вертикальные поля до 32 пикселей и на столько же убираем
     зазор колонки — рисунок остаётся тем же, растёт только область касания.
     Селектор берёт ровно текстовые ссылки: кнопки мессенджеров и квадратики
     соцсетей лежат в других контейнерах и своих размеров не теряют. */
  footer [style*="flex-direction: column"] { gap: 0 !important; }
  footer [style*="flex-direction: column"] > a {
    padding: 7px 0; display: block;
  }
  /* Правовые ссылки внизу идут в одну строку с переносом: там разводим только
     вертикаль, горизонтальный зазор между ними нужен как есть. */
  footer [style*="gap: 20px"][style*="flex-wrap: wrap"] {
    row-gap: 2px !important;
  }
  /* Кегль здесь на пункт меньше, поэтому и поля на пиксель больше: иначе
     строка выходит 31 пиксель — на один меньше нужного. */
  footer [style*="gap: 20px"][style*="flex-wrap: wrap"] > a {
    padding: 8px 0; display: block;
  }
}

@media (max-width: 560px) {
  /* Тёмный блок призыва на телефоне. Боковые отступы в макете 40 пикселей с
     каждой стороны — на экране 412 это 80 пикселей из 412, и заголовок
     ломается на четыре строки. Кнопки рядом всё равно не встают, поэтому
     ставим их друг под другом одной шириной: так и опрятнее, и попасть
     пальцем проще. */
  [style*="height: 300px"][style*="rgb(59, 42, 29)"] > div {
    padding: 30px 22px !important;
  }
  [style*="height: 300px"][style*="rgb(59, 42, 29)"] [style*="pointer-events: auto"] {
    flex-direction: column !important; align-items: stretch !important;
    width: 100%; max-width: 290px;
  }
  [style*="height: 300px"][style*="rgb(59, 42, 29)"] [style*="pointer-events: auto"] > a {
    text-align: center;
  }
}

/* --- слоты картинок ---------------------------------------------------- */
/* Обложку и фото автора движок отдаёт своим тегом <img class="tk-img">, чтобы
   их можно было менять в админке. Рамку задаёт макет, поэтому кадрирование
   описываем здесь: без этого картинка выпадала из круглой или широкой рамки. */
.tk-slot { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tk-slot .tk-img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
/* Картинки ещё нет: показываем ровную плашку с подписью вместо пустой дыры. */
.tk-slot .tk-img--empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 8px; box-sizing: border-box;
  background: #F4EDE4; color: #8A8177;
  font-size: 13px; line-height: 1.3; text-align: center;
}

/* --- вкладки фильтра ---------------------------------------------------- */
/* В макете состояние вкладки набрано прямо в атрибуте style, причём у
   выбранной: тень и белая цифра. Копии наследовали её, и весь ряд выглядел
   нажатым, а счётчики сливались с фоном. Состояние рисуем здесь. */
.k-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #F4EDE4; padding: 5px; border-radius: 100px;
}
.k-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: #3F3125; background: transparent;
  cursor: pointer; transition: background-color .18s, color .18s;
}
.k-tab:hover { background: #EBE0D2; }
.k-tab[data-k-active="1"] {
  background: #3B2A1D; color: #fff; box-shadow: 0 4px 12px rgba(59, 42, 29, .18);
}
.k-tab__n {
  display: flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700;
  background: rgba(59, 42, 29, .10); color: #7A6E60;
}
.k-tab[data-k-active="1"] .k-tab__n { background: rgba(255, 255, 255, .22); color: #fff; }

@media (max-width: 900px) { .k-favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .k-favorites-grid { grid-template-columns: 1fr !important; } }

/* На узком экране одиннадцать стран занимали пол-экрана. Ряд листается вбок
   и цепляется за края, а порядок — по числу экскурсий, популярные первыми. */
@media (max-width: 900px) {
  .k-tabs {
    flex-wrap: nowrap; overflow-x: auto; border-radius: 22px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .k-tabs::-webkit-scrollbar { display: none; }
  .k-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Баннер cookie — свой элемент. Его собственные стили лежат внутри теневого
   дерева и применяются только после того, как скрипт объявит элемент; до этого
   момента он стоит в потоке в конце страницы, а при подъёме вёрстка дёргается.
   Повторяем правило снаружи, чтобы он был вне потока с первой отрисовки:
   значения те же, что и у :host в cookie-banner.js. */
cookie-banner { position: fixed; left: 20px; bottom: 20px; z-index: 200; }

/* --- заявка ------------------------------------------------------------- */
.k-lead { margin-bottom: 18px; max-width: 460px; }
.k-lead__input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #E2D5C4; border-radius: 14px; padding: 16px 18px;
  font-family: inherit; font-size: 16px; background: #FCF8F3; color: #3B2A1D;
}
.k-lead__input:focus { outline: none; border-color: #C4653A; }
.k-lead__input--bad { border-color: #D9613A; background: #FDF1EC; }
.k-lead__note { margin-top: 10px; font-size: 14.5px; color: #6E675F; }
.k-lead__note--ok { color: #2F7A4F; font-weight: 600; }
.k-lead__note--bad { color: #C4432A; }

/* Телефон: код страны кнопкой слева, номер в поле, список по кнопке.
   Кнопка и поле смотрятся одной деталью — рамка общая, шов между ними
   рисуется границей кнопки. */
.k-phone { position: relative; display: flex; align-items: stretch; }
.k-phone__pick {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #E2D5C4; border-right: none;
  border-radius: 14px 0 0 14px; padding: 0 12px 0 16px;
  font-family: inherit; font-size: 16px; line-height: 1;
  background: #F7EFE4; color: #3B2A1D; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.k-phone__pick:hover { background: #F2E6D6; }
.k-phone__pick:focus-visible { outline: 2px solid #C4653A; outline-offset: -2px; }
.k-phone__code { font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-phone__chev { opacity: .55; }
.k-phone__pick[aria-expanded="true"] .k-phone__chev { transform: rotate(180deg); }
.k-phone__input { border-radius: 0 14px 14px 0 !important; min-width: 0; }

/* Список стран. Держим его над формой по месту и с прокруткой: стран больше
   двухсот, разворачивать их в высоту страницы нельзя. */
.k-phone__drop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: min(320px, 100%); box-sizing: border-box;
  background: #FFFDFA; border: 1px solid #E7DACA; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 33, 24, .16);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
/* Атрибут hidden прячет элемент правилом display: none из стилей браузера, а
   любое своё правило с display его перебивает: список висел открытым всегда,
   и щелчок мимо ничего не закрывал. Возвращаем атрибуту силу. */
.k-phone__drop[hidden] { display: none; }
.k-phone__search {
  width: 100%; box-sizing: border-box;
  border: 1px solid #E7DACA; border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: 15px; background: #FCF8F3; color: #3B2A1D;
}
.k-phone__search:focus { outline: none; border-color: #C4653A; }
.k-phone__list {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
/* Пустой результат поиска объясняем словами, а не пустотой. */
.k-phone__list[data-empty]:not([data-empty=""])::after {
  content: attr(data-empty);
  padding: 12px; font-size: 14.5px; color: #8A8178; text-align: center;
}
.k-phone__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 15px; color: #3B2A1D;
  padding: 9px 10px; border-radius: 9px;
}
.k-phone__row:hover, .k-phone__row:focus-visible { background: #F4EDE4; outline: none; }
.k-phone__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-phone__dial { flex: 0 0 auto; color: #8A8178; font-variant-numeric: tabular-nums; }

/* --- QR к мессенджерам -------------------------------------------------- */
/* Код — третий способ написать, наравне с двумя кнопками мессенджеров, а не
   сноска под ними. В прежнем виде это была узкая плашка с кодом в 72 пикселя:
   с экрана его наводили камерой с трудом, а взгляд он не останавливал вовсе.
   Даём код крупно, на белом поле во всю ширину колонки, с подписью сбоку. */
.k-qr {
  display: flex; align-items: center; gap: 22px;
  width: 100%; margin-top: 18px;
  padding: 20px 24px; border-radius: 20px;
  border: 1px solid #E2D5C4; background: #FFFFFF;
  color: #55504A; text-decoration: none;
  transition: border-color .18s, box-shadow .28s;
}
.k-qr:hover {
  border-color: #C4653A; box-shadow: 0 14px 30px rgba(59, 42, 29, .09);
}
/* Белое поле вокруг кода: сканеру нужна «тихая зона» по краям, иначе камера
   ловит рисунок хуже — особенно с экрана. */
.k-qr__img {
  width: 152px; height: 152px; display: block; flex: 0 0 auto;
  padding: 8px; background: #fff; border-radius: 10px;
}
.k-qr__text {
  font-family: 'Geologica', sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  letter-spacing: -.015em; color: #3B2A1D; min-width: 0;
}
/* На телефоне код показывать некому — человек уже в нём. Прячем весь блок,
   а не одну подпись: код без объяснения занимал полэкрана непонятно зачем. */
@media (max-width: 600px) { .k-qr { display: none; } }

/* --- Перечни в рассказе записи ------------------------------------------ */
/* Гиды, страны и достопримечательности пришли из WordPress абзацами: перечень
   там набран строками без разметки. Ядро собирает такие строки в <ul>, а здесь
   даём им вид: браузерный отступ в 40 пикселей уводил пункты вправо от абзаца,
   а нулевой зазор между строками слепляет их в полотно. */
.art-body ul, .art-body ol {
  margin: 18px 0; padding-left: 0; list-style: none;
}
.art-body li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
}
.art-body li:last-child { margin-bottom: 0; }
.art-body ul > li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: #EE7B52;
}
.art-body ol { counter-reset: art-num; }
.art-body ol > li { counter-increment: art-num; }
.art-body ol > li::before {
  content: counter(art-num) "."; position: absolute; left: 0; top: 0;
  color: #C4653A; font-weight: 600;
}

/* --- полосы фильтров на узком экране ------------------------------------ */
/* Ряд возрастов стоит рядом с фильтром стран и на широком экране держит свою
   ширину (flex: 0 0 auto), иначе он сжимался в пилюлю с многоточием. На узком
   же он оставался в 523 пикселя внутри 358: полоса вылезала за край экрана и
   листаться не могла — прокрутка нужна ей самой, а не родителю. */
@media (max-width: 900px) {
  .k-tabs, #tours .k-country-filter + .k-tabs {
    flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* --- прилипшая шапка ---------------------------------------------------- */
/* В макете фон шапки — тот же кремовый, но с прозрачностью 0.9 и размытием.
   Крупный тёмный заголовок первого экрана просвечивал через неё насквозь, и
   при прокрутке это читалось как «текст налез на меню». Оставляем размытие,
   но делаем фон почти глухим: полоса остаётся лёгкой, а буквы под ней больше
   не проступают. */
header[style*="position: sticky"] {
  background: rgba(252, 248, 243, 0.985) !important;
  -webkit-backdrop-filter: blur(12px);
}

/* --- ряды фильтров каталога --------------------------------------------- */
/* Возраст и цена стоят рядами под странами: подпись слева, полоса пилюль
   справа. На узком экране подпись уходит над полосой, а сама полоса листается
   вбок — так же, как ряд стран. */
.k-filter-row {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; min-width: 0;
}
.k-filter-label {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: #8A8178;
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .k-filter-row { flex-wrap: wrap; gap: 8px; }
  .k-filter-label { width: 100%; }
}

/* --- лид первого экрана ------------------------------------------------- */
/* В макете у лида не задан межстрочный интервал, и браузер ставил normal —
   на 16 пикселях строки шли слишком тесно для двух-трёх строк подряд. */
.k-lead { line-height: 1.6 !important; }

/* Подсветка раздела, к которому привела ссылка «Читать полностью»: без неё
   переход по якорю выглядел как «ничего не произошло». */
.ex-flash {
  animation: ex-flash 1.4s ease-out;
  border-radius: 10px;
}
@keyframes ex-flash {
  0%   { background: rgba(238, 123, 82, .22); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-flash { animation: none; }
}

/* --- статьи на главной -------------------------------------------------- */
/* В макете две карточки в ряд, каждая с картинкой в пол-экрана: на четыре
   статьи блок занимал полтора экрана прокрутки. Делаем компактный ряд:
   картинка по трём вторым, заголовок в три строки, тизер в две. */
.k-home-articles {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.k-home-articles > .article-card { min-width: 0; }
.k-home-articles .tk-slot,
.k-home-articles picture { aspect-ratio: 3 / 2; }
/* Обёртка картинки в макете держит жёсткие 300 пикселей высоты — на карточку
   в четверть ряда это половина её роста. Ведём по соотношению сторон. */
.k-home-articles > .article-card > div:first-child,
.k-home-articles > .article-card > div:first-child > div:first-child {
  height: auto !important; aspect-ratio: 3 / 2;
}
/* Внутренние отступы тоже от карточки в пол-экрана. */
.k-home-articles > .article-card > div:last-child {
  padding: 18px 20px 20px !important;
}
.k-home-articles > .article-card > div:last-child > div:first-child {
  font-size: 17.5px !important; line-height: 1.32 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-home-articles > .article-card p {
  font-size: 14.5px !important; line-height: 1.5 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .k-home-articles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .k-home-articles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .k-home-articles { grid-template-columns: 1fr !important; }
}

/* Сам блок статей тоже был на полтора экрана: 160 пикселей отступа сверху и по
   136–140 внутри. Для ряда компактных карточек это много — поджимаем именно
   этот блок, ритм остальных страниц не трогаем. */
#stories {
  margin-top: 96px !important;
  padding-top: 88px !important;
  padding-bottom: 96px !important;
}
#stories h2 { font-size: 32px !important; margin-bottom: 10px !important; }
#stories .k-home-articles { margin-top: 4px !important; }
@media (max-width: 900px) {
  #stories { margin-top: 56px !important; padding-top: 56px !important;
             padding-bottom: 60px !important; }
  #stories h2 { font-size: 26px !important; }
}

/* Между блоком гидов и блоком статей оставался просвет в цвет страницы: у обоих
   свой фон, и полоса читалась как сбой чередования. Секции ставим вплотную —
   ритм держат их собственные внутренние отступы. */
#stories { margin-top: 0 !important; }

/* Ответ в «вопрос-ответе» прижимался к вопросу. Отступ даём внутренний: внешний
   margin у гармошки меняет скрипт при раскрытии. */
.k-faq-answer { padding-top: 10px; }

/* --- фотографии гидов --------------------------------------------------- */
/* Снимки присланы разными: портрет 4:5, вертикаль 3:5, почти квадрат. Слот в
   макете широкий, и обрезка «по центру» съедала то плечи, то полголовы. Слот
   делаем портретным по большинству снимков и не режем: фотография вписывается
   целиком, свободное место — тем же тёплым фоном карточки. */
/* Кадр у всех один — 4:5, его ставит polish-ui (GUIDE_RATIO). Ряд из шести
   лиц читается как один список, а карточки под каждый снимок шли разной
   высоты: 514 и 643 пикселя вперемешку. Снимок вписываем обрезкой, а точку
   кадрирования берём из карты portrait'ов в polish-ui — она у каждого своя и
   приходится на лицо. Раньше здесь стояла общая точка 50% 50% с !important:
   она перебивала инлайновую и срезала лоб на узких снимках. */
.k-guide-slot > * { height: 100% !important; }
.k-guide-portrait { object-fit: cover !important; }
div:has(> .article-card) , div:has(> a[href^="/guide/"]) { align-items: start; }

/* --- теги под статьёй --------------------------------------------------- */
/* Ряд шёл без просветов: «Теги:ВатиканИталияПариж» читалось одним словом. */
.art-tags-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 26px 0 0;
}
.art-tags-label { font-size: 14px; color: #8A8178; margin-right: 2px; }
.art-tag {
  font-size: 14px; font-weight: 600; color: #55504A;
  border: 1px solid #E2D5C4; border-radius: 100px; padding: 6px 14px;
  background: #FFFDFA; transition: border-color .18s, color .18s;
}
.art-tag:hover { border-color: #C4653A; color: #C4653A; }

/* Выпадающий фильтр-поле (возраст) рядом с фильтром стран: список в одну
   колонку и прижат к левому краю кнопки — вариантов немного, и они короткие. */
.k-more--field { margin-left: 6px; }
.k-more--field .k-more-menu { right: auto; left: 0; width: 220px; }
.k-more--field[data-open="1"] .k-more-menu { grid-template-columns: 1fr; }

/* Фильтр стран и выпадающий возраст — одной строкой. Колонка страницы —
   обычный блок, поэтому строку собираем здесь: полоса стран растягивается,
   список возраста прижимается к ней справа. */
.k-filter-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0;
}
/* Полоса стран длиннее строки, поэтому её нужно и сжимать, и давать листать:
   без overflow её наименьшая ширина равна всей ленте пилюль, и строка
   переносилась — список возраста уезжал под неё. */
.k-filter-line > .k-country-filter { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.k-filter-line > .k-country-filter > .k-tabs {
  flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.k-filter-line > .k-country-filter > .k-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
  .k-filter-line { gap: 8px; flex-wrap: wrap; }
  .k-filter-line > .k-country-filter { flex: 1 1 100%; }
  .k-more--field { margin-left: 0; }
}

/* Полоса стран на телефоне.
   Было: узкая лента на треть экрана, в неё влезало две страны, а остальные
   прятались за кнопкой «Ещё · 4». Человек должен был догадаться и листать
   ленту, и раскрывать список — два разных жеста ради одного выбора.
   Стало: одна лента во всю ширину экрана, в ней все страны подряд. Кнопка
   «Ещё» на этой ширине не нужна: её пункты встают в ту же ленту. Лента
   выходит за поля страницы до самых краёв — так видно, что её листают. */
@media (max-width: 700px) {
  #tours .k-country-filter,
  .k-filter-line > .k-country-filter {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #F4EDE4; padding: 5px; border-radius: 22px;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    max-width: none; width: auto;
  }
  #tours .k-country-filter::-webkit-scrollbar,
  .k-filter-line > .k-country-filter::-webkit-scrollbar { display: none; }
  /* Обёртки распускаем: пилюли из «Ещё» должны встать в ту же строку, что и
     остальные, а не жить своим выпадающим списком. */
  #tours .k-country-filter > .k-tabs,
  #tours .k-country-filter > .k-more,
  #tours .k-country-filter > .k-more > .k-more-menu,
  .k-filter-line > .k-country-filter > .k-tabs,
  .k-filter-line > .k-country-filter > .k-more,
  .k-filter-line > .k-country-filter > .k-more > .k-more-menu {
    display: contents;
  }
  #tours .k-country-filter .k-more-toggle,
  .k-filter-line > .k-country-filter .k-more-toggle { display: none; }
  #tours .k-country-filter .k-tab,
  .k-filter-line > .k-country-filter .k-tab {
    flex: 0 0 auto; scroll-snap-align: start;
    position: static; visibility: visible; opacity: 1;
  }
}

/* --- блог: дизайн-система статьи ---------------------------------------- */
/* Статьи пришли из WordPress ровной лентой абзацев. Ядро расставляет по ним
   разметку (article_prose.php), а весь вид задаётся здесь — и только здесь.
   Раньше половина правил дублировалась во встроенном <style> страницы
   (polish-ui.py): два слоя спорили за одно и то же, и от этого «слипалось» —
   заголовок брал размер из одного слоя, а отступы и линейку из другого, а
   галочка получала в наследство ореол от круглого буллита и выглядела сжатой.
   Слой теперь один.

   Ступени размеров: 26 (h2) · 21 (h3 и шаг) · 18.5 (h4) · 18 (текст) ·
   16.5 (выноска) · 14.5 (боковик). Отступы кратны строке текста: 32 и 46.
   Цвета — палитра сайта: терракота #C4653A по тёплому песку, чернила #3B2A1D.
   Иконки — те же линейные знаки, что в экскурсиях (см. ex-li--check): эмодзи
   из выгрузки не выбрасываются, но встают в свою колонку одного размера.  */

/* Раскладка страницы: текст слева, боковик справа и на всю высоту статьи.
   Служебные слоты ({{TAGS}}, {{RELATED}}, {{FAQ}}, {{TOC}}) вставляются между
   статьёй и боковиком, поэтому при автоматической раскладке сетки боковик
   уезжал в третий ряд — под статью, в самый низ страницы. Оглавление там
   бесполезно: до него дочитывают те, кому оно больше не нужно. Ставим руками:
   всё, кроме боковика, — в первую колонку, боковик — во вторую и на все ряды.
   Только на большом экране: с 1100 px сетка складывается в одну колонку
   (responsive.js), и вторая колонка стала бы пустым столбцом. */
@media (min-width: 1101px) {
  div:has(> .art-body):has(> aside) > * { grid-column: 1; min-width: 0; }
  div:has(> .art-body):has(> aside) > aside {
    grid-column: 2; grid-row: 1 / -1; align-self: start;
    max-height: calc(100vh - 132px);
  }
  /* Колонка боковика выше экрана: оглавление на двадцать разделов и карточка
     экскурсий вместе не влезают, и нижняя карточка оказывалась за краем окна.
     Сжимаем оглавление — у него своя прокрутка, карточка остаётся видна.
     Второй селектор — по месту, а не по классу: класс k-article-toc ставит
     polish-ui.py в самом конце сборки, и между пересборкой записей и им
     страница живёт без класса. Правило должно работать и в этот промежуток. */
  div:has(> .art-body):has(> aside) > aside > .k-article-toc,
  div:has(> .art-body):has(> aside) > aside > div:first-child {
    min-height: 0; max-height: none; overflow: auto;
    scrollbar-width: thin; scrollbar-color: #E2D5C4 transparent;
  }
}
@media (max-width: 1100px) {
  div:has(> .art-body):has(> aside) > aside { position: static !important; max-height: none; }
}
/* Пустой слот — не блок: {{FAQ}} и {{TOC}} у статей без вопросов приходят
   пустыми и оставляли в сетке дырку высотой в ряд. */
div:has(> .art-body):has(> aside) > div:empty { display: none; }

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

   Порог здесь ОБЯЗАН совпадать с порогом двухколоночной раскладки (1101px).
   Было 900 — и между 901 и 1100 зияла дыра: боковика ещё нет, а прятать
   оглавление уже некому. На таком окне список из двенадцати разделов
   вываливался во всю ширину под статьёй, и читатель принимал его
   за случайный мусор. */
@media (max-width: 1100px) {
  .k-article-toc { display: none !important; }
}

/* Оглавление: текущий раздел подсвечен (подсветку ведёт скрипт страницы). */
.k-article-toc a { border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
.k-article-toc a:hover { background: #FBF1E7; color: #B94F2D !important; }
.k-article-toc a:hover span { color: #B94F2D !important; }
.k-article-toc a[aria-current="true"] {
  background: #FBF1E7; color: #B94F2D !important; font-weight: 600;
}
.k-article-toc a[aria-current="true"] span { color: #B94F2D !important; }

/* --- текст ---------------------------------------------------------------- */
/* Ширина строки: 740 px при 18 px — около 70 знаков, дальше глаз теряет
   строку. Ширину задаём с !important: в макете она стоит инлайном (760). */
/* Класс .art-body носят не только статьи: у страниц стран, городов, мест,
   гидов и у архивов рубрик прозаического блока в макете нет, и его заводит
   сам tools/make-templates.py — но внутри там витрина карточек, а не колонка
   текста. Ширину и кегль вешаем на .art-story: этот класс ставит статье
   polish-ui.py (и шаблон статьи), у витрин его нет. Всё остальное ниже —
   заголовки, списки, выноски — общее: рассказы о странах проходят через тот
   же разбор (geo_prose.php) и должны выглядеть так же. */
.art-body.art-story {
  max-width: 740px !important;
  font-size: 18px; line-height: 1.78; color: #3B2A1D;
}
.art-body > p { margin: 0 0 1.35em; }
/* Первый абзац — лид: крупнее и светлее, отделяет вступление от разбора. */
.art-body > p:first-child { font-size: 20px; line-height: 1.65; color: #55483D; }

.art-body h2 {
  font-family: Geologica, sans-serif; font-size: 26px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.02em; color: #3B2A1D;
  margin: 46px 0 16px; padding-top: 22px; border-top: 1px solid #EBE0D2;
  scroll-margin-top: 120px;
}
.art-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Заголовок сразу за заголовком: линейка между ними лишняя. */
.art-body h2 + h2 { margin-top: 26px; padding-top: 0; border-top: 0; }
.art-body h3 {
  font-family: Geologica, sans-serif; font-size: 21px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.015em; color: #3B2A1D;
  margin: 32px 0 12px; scroll-margin-top: 120px;
}
.art-body h4 {
  font-family: Geologica, sans-serif; font-size: 18.5px; font-weight: 600;
  line-height: 1.35; color: #3B2A1D; margin: 28px 0 10px;
  scroll-margin-top: 120px;
}
.art-body h2 + p, .art-body h3 + p, .art-body h4 + p { margin-top: 0; }
/* Абзац, набранный целиком полужирным, — почти заголовок: такие в выгрузке
   открывают раздел, и воздуха над ними нужно больше. (Те, что коротки и стоят
   отдельной строкой, polish-ui.py поднимает до h2; остаются длинные.) */
.art-body > p:has(> strong:first-child):not(:has(> strong ~ *:not(strong))) {
  margin-top: 2.1em;
}
/* Подпись автора над статьёй. */
.k-article-author {
  font-family: Geologica, sans-serif; font-size: 15px; font-weight: 600;
  color: #3B2A1D;
}

/* Ссылки в тексте должны быть видны ссылками. */
.art-body p a, .art-body li a, .art-body .art-note a {
  color: #C4653A; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; word-break: break-word;
}
.art-body p a:hover, .art-body li a:hover { color: #A94F28; }

/* --- перечни -------------------------------------------------------------- */
/* Списки бывают двух родов: собранные ядром из абзацев (art-list) и пришедшие
   из выгрузки готовыми <ul>. Вид у них один — иначе на одной странице два
   разных буллита. */
.art-body ul, .art-body ol { list-style: none; margin: 18px 0 24px; padding-left: 0; }
.art-body li { position: relative; margin: 10px 0; padding-left: 30px; }
.art-body ul > li::before {
  content: ""; position: absolute; left: 9px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: #EE7B52;
}
/* Нумерованный список: цифра терракотой, колонка той же ширины. */
.art-body ol { counter-reset: art-n; }
.art-body ol > li { counter-increment: art-n; }
.art-body ol > li::before {
  content: counter(art-n) "."; position: absolute; left: 0; top: 0;
  width: 22px; text-align: right;
  font-family: Geologica, sans-serif; font-weight: 600; color: #C4653A;
}
/* Галочка: линейный знак той же формы, что в списке «что входит» под ценой.
   Раньше это был текстовый символ и он получал ореол от буллита — галочка
   выглядела сжатой в кружке. */
.art-body li.art-li--check { padding-left: 32px; }
.art-body ul > li.art-li--check::before {
  content: ""; left: 5px; top: 0.35em; width: 17px; height: 17px;
  border-radius: 0; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4653A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 17px 17px;
}
/* Эмодзи автора — тоже маркер: свой буллит убираем, иначе их два в ряд. */
.art-body li.art-li--ico { padding-left: 34px; }
.art-body ul > li.art-li--ico::before { content: none; }
.art-li-ico {
  position: absolute; left: 0; top: 0; width: 24px;
  text-align: center; font-size: 16px; line-height: 1.78;
}
/* Подводка с двоеточием держится списка: между ними не нужен воздух абзаца. */
.art-lead-in { margin-bottom: 6px !important; }
.art-body .art-lead-in + ul, .art-body .art-lead-in + ol { margin-top: 6px; }

/* --- шаг инструкции ------------------------------------------------------- */
/* «Шаг 1 Откройте официальный сайт…» — номер плашкой над заголовком, а не в
   одну строку с ним: у половины шагов текст на две-три строки, и плашка,
   стоявшая слева, отжимала их в узкую колонку. Длинный шаг ядро делит: первая
   фраза — заголовок, остальное — обычный абзац под ним (art-step-text). */
.art-body .art-step {
  margin: 46px 0 10px; padding-top: 22px; border-top: 1px solid #F1E7DA;
}
.art-body .art-step:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.art-step__n {
  display: inline-block; margin-bottom: 10px;
  font-family: Geologica, sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  background: #C4653A; border-radius: 100px; padding: 5px 12px;
  white-space: nowrap;
}
.art-step__t { display: block; }
.art-body .art-step-text { margin-top: 0; }

/* Цифра из выгрузки («1 Перейдите на сайт») — кружком в стиле сайта:
   эмодзи-цифры рисуются в каждой системе по-своему и скакали по размеру. */
.art-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 10px; flex: 0 0 auto;
  border-radius: 50%; background: #F8E7DD; color: #B94F2D;
  font-family: Geologica, sans-serif; font-size: 14px; font-weight: 600;
  vertical-align: 2px;
}
.art-body h2 > .art-num, .art-body h3 > .art-num { vertical-align: 3px; }

/* Эмодзи в заголовке — знаком одного размера, а не глифом в строке текста. */
.art-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 12px; flex: 0 0 auto;
  border-radius: 11px; background: linear-gradient(145deg, #FFF8F1, #F8E4D4);
  box-shadow: inset 0 0 0 1px rgba(217, 97, 58, 0.10);
  font-size: 17px; line-height: 1; vertical-align: -6px;
}

/* Знакомая эмодзи переведена в контурную иконку дизайн-системы (SVG в тех же
   рамках). Обводка — терракота сайта, размер один и тот же в любой системе. */
.art-emoji svg { width: 18px; height: 18px; display: block; color: #C4653A; }
.art-emoji-in.art-ico--svg {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -3px; margin-right: 6px; color: #C4653A;
}
.art-emoji-in svg { width: 16px; height: 16px; display: block; }
.art-li-ico svg {
  width: 16px; height: 16px; display: inline-block;
  vertical-align: middle; color: #C4653A;
}

/* --- выноски -------------------------------------------------------------- */
/* Три голоса: предупреждение (нельзя пропустить), совет (можно сделать лучше),
   примечание (просто в стороне). Различаются знаком и цветом, не размером:
   иначе страница превращается в набор плакатов. */
.art-body .art-note {
  position: relative; margin: 26px 0; padding: 18px 22px 18px 54px;
  background: #FFF6EE; border: 1px solid #F3D9C4; border-radius: 16px;
  font-size: 16.5px; line-height: 1.65; color: #55504A;
}
.art-body .art-note::before {
  content: "!"; position: absolute; left: 19px; top: 19px;
  width: 22px; height: 22px; border-radius: 50%; background: #EE7B52;
  color: #fff; font-family: Geologica, sans-serif; font-weight: 600;
  font-size: 14px; line-height: 22px; text-align: center;
}
.art-body .art-note p { margin: 0 0 0.6em; }
.art-body .art-note p:last-child { margin-bottom: 0; }
.art-body .art-note--tip { background: #F7F4EC; border-color: #E6E0D0; }
.art-body .art-note--tip::before {
  content: ""; background: #E8A33D no-repeat center /
    14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9V16h7v-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.art-body .art-note--info { background: #F6F1EA; border-color: #E7DFD5; }
.art-body .art-note--info::before { content: "i"; background: #A08B74; }

/* --- цитата --------------------------------------------------------------- */
/* Прямая речь гида, набранная в записи отдельной строкой в «ёлочках». В
   сплошной колонке она ничем не отличалась от соседних строк, хотя ради неё
   абзац и написан. Выноска здесь не годится — это не предупреждение и не
   совет: тон другой, и знак «!» в кружке ему противоречит. Поэтому не
   плашка, а отбивка слева и кегль чуть крупнее основного текста. */
.art-body .art-quote {
  margin: 26px 0; padding: 2px 0 2px 26px;
  border-left: 3px solid #EE7B52;
  font-size: 20px; line-height: 1.6; color: #55483D;
  text-wrap: pretty;
}
.art-body .art-quote p { margin: 0; }
/* Подводка держится цитаты: между ними не нужен отступ целого абзаца — это
   одна фраза, разорванная переносом строки в записи. */
.art-body .art-lead-in + .art-quote { margin-top: 8px; }

/* Строки внутри абзаца, разделённые переносом. Так набрана часть статей: одна
   мысль — одна строка. Без отбивки строки слипались в сплошной блок и приём
   пропадал, а с отбивкой абзаца — рассыпался бы на отдельные абзацы. Немного
   воздуха: ритм виден, абзац остаётся абзацем. */
.art-body > p br { display: block; content: ""; margin-top: .3em; }

/* --- вопрос и ответ ------------------------------------------------------- */
/* «Я не могу найти письмо с ваучером. Что делать?» стояло обычным абзацем —
   вопрос было не отличить от ответа, и блок читался стеной. Вопрос —
   заголовком со знаком, ответ под ним обычным текстом. */
.art-body .art-q {
  display: flex; gap: 12px; align-items: baseline;
  font-family: Geologica, sans-serif; font-size: 19px; font-weight: 600;
  line-height: 1.4; color: #3B2A1D; margin: 32px 0 10px;
  scroll-margin-top: 120px;
}
.art-body .art-q::before {
  content: "?"; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: #F8E7DD; color: #B94F2D; font-size: 14px; font-weight: 600;
  line-height: 24px; text-align: center;
}
.art-body .art-q + p { margin-top: 0; }

/* --- строки «что сколько стоит» ------------------------------------------ */
/* «Взрослые (18+): 7 €», «Дети (7–18 лет): 4 €» — в выгрузке это строки одного
   абзаца через перенос, и цена тонула в тексте. Собираем табличкой: слева
   условие, справа цена, между строками пунктир. */
.art-body .art-specs {
  margin: 24px 0; padding: 6px 22px; background: #FBF6EF;
  border: 1px solid #EFE6D9; border-radius: 16px; font-size: 16.5px;
}
.art-body .art-spec {
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
  margin: 0; padding: 12px 0; border-top: 1px dashed #E7DCCB;
  line-height: 1.55;
}
.art-body .art-spec:first-child { border-top: 0; }
.art-spec__k { color: #55504A; }
.art-spec__v {
  font-family: Geologica, sans-serif; font-weight: 600; color: #3B2A1D;
}
/* Длинная цена — обычным весом: «4 € (при себе нужно иметь документ,
   подтверждающий возраст)», набранное полужирным, читается объявлением и
   перебивает саму цифру. */
.art-spec__v--long {
  font-family: inherit; font-weight: 400; color: #55504A;
}

/* --- ссылка абзацем — кнопкой -------------------------------------------- */
.art-body .art-cta { margin: 26px 0; }
.art-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #3B2A1D; color: #fff !important; text-decoration: none !important;
  font-family: Geologica, sans-serif; font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 100px; word-break: break-word;
}
.art-btn:hover { background: #C4653A; color: #fff !important; }

@media (max-width: 900px) {
  .art-body.art-story { font-size: 17px; line-height: 1.72; }
  .art-body > p:first-child { font-size: 18px; }
  .art-body h2 { font-size: 22px; margin-top: 36px; padding-top: 18px; }
  .art-body h3, .art-body .art-step { font-size: 19px; }
  .art-body .art-step { margin-top: 36px; padding-top: 18px; }
  .art-body .art-q { font-size: 17.5px; }
  .art-body .art-note { padding: 16px 18px 16px 48px; font-size: 16px; }
  .art-body .art-note::before { left: 16px; top: 17px; }
  .art-body .art-specs { padding: 4px 16px; font-size: 16px; }
  .art-emoji { width: 30px; height: 30px; margin-right: 10px; font-size: 15px; }
}

/* --- условия по цене ---------------------------------------------------- */
/* «Каждый дополнительный участник: +20 евро», «переводчик: 70 €», «билеты
   оплачиваются отдельно» — это про деньги, поэтому стоят у цены, а не в конце
   страницы. Список компактный: он поясняет, а не спорит с ценой. */
.ex-price-notes {
  list-style: none; margin: 10px 0 0; padding: 0;
  font-size: 13px; line-height: 1.5; color: #6E675F;
}
.ex-price-notes li { position: relative; padding-left: 15px; margin-top: 4px; }
.ex-price-notes li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  color: #C4653A; font-weight: 700;
}

/* Строка «Читать статью» в карточке статьи: даты убраны (в выгрузке они
   заглушки «1 января 2025»), ссылка остаётся одна и уходит вправо. */
.k-home-articles > .article-card > div:last-child > div:last-child {
  justify-content: flex-end !important;
}

/* Тёмная плашка-концовка ближе к содержимому: это точка, а не раздел. */
section.k-cta-compact {
  padding-top: 56px !important; padding-bottom: 96px !important;
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  section.k-cta-compact { padding-top: 36px !important; padding-bottom: 64px !important; }
}

/* Пилюли меток укладывает контейнер k-tabs, который им ставит движок
   архивов; отдельного правила им не нужно. Ряд с общим селектором по
   data-k здесь стоял и ломал колонку страницы — он превращал в флекс
   саму колонку вместе с крошками и заголовком. */

/* Полоса вкладок не тянется на всю ширину страницы: фон — по содержимому,
   иначе пустая бежевая лента через весь экран читалась как отдельный блок. */
.k-tabs { width: fit-content; max-width: 100%; }

/* Лента архива — на всю колонку страницы: сетку карточек зажимал контейнер
   прозы в 760 пикселей, и карточки стояли двумя тесными столбцами. */
article.art-body:has(.article-card) {
  max-width: 1280px !important;
}
article.art-body:has(.article-card) > p:first-child { max-width: 760px; }

/* Голый адрес-ссылка в заголовке шага не переносится сам по себе и на
   телефоне распирал строку за край экрана. */
.art-step a, .art-body h2 a, .art-body h3 a {
  word-break: break-all; overflow-wrap: anywhere; min-width: 0;
}

/* --- рассказ о стране, городе, месте и гиде ------------------------------ */
/* Обёртка .art-body у этих страниц шириной во всю колонку (1280): иначе блок
   вставал по центру и не совпадал левым краем ни с заголовком, ни с остальными
   разделами. Читаемую длину строки задаём здесь — и заодно отделяем рассказ от
   витрины карточек вокруг: собственный фон и рамка показывают, где он
   начинается и где кончается. Заголовки и разделительные линии тянем во всю
   карточку, а текст держим в границах строки, которую удобно читать. */
.art-prose {
  background: #fff; border: 1px solid #EBDFD0; border-radius: 22px;
  padding: 34px 40px 36px;
}
/* Карточка текста упиралась прямо в нижний край первого экрана: белый блок
   начинался там, где кончалась фотография, без воздуха между ними. */
.art-body > .art-prose:first-child { margin-top: 26px; }
.art-prose > p,
.art-prose > ul,
.art-prose > ol,
.art-prose > .art-note,
.art-prose > .art-cta { max-width: 68ch; }
.art-prose > *:first-child { margin-top: 0; }
.art-prose > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .art-prose { padding: 22px 20px 24px; border-radius: 18px; }
}


/* Заголовок полосы рубрик в ленте блога: подпись слева, ссылка «Все категории»
   справа у самого края страницы — а сама полоса пилюль шириной по содержимому
   и кончается много раньше. Ссылка висела над пустотой и выглядела отбившейся
   от блока. Ставим её сразу за подписью: тогда все четыре строки заголовка —
   название, лид, подпись со ссылкой и пилюли — идут от одного левого края. */
div:has(> a[href="/category/"]) {
  justify-content: flex-start !important; gap: 16px !important;
}


/* Блок «Смотрите также» под записью экскурсии.
   В макете под ним лежали восемь неподвижных ссылок — все на общий каталог и
   все про Рим, даже на странице барселонской экскурсии. Теперь чипы собирает
   движок по полям записи: свой город, своя страна, свои места. Класс у чипа
   собственный, а не kh-номер из запекания: номера раздаёт запекание заново на
   каждой сборке, и ссылаться на них из движка нельзя. */
.ex-also {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid #E7DFD5;
}
.ex-also-h {
  font-size: 14px; font-weight: 600; color: #8A8178;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px;
}
.ex-also-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ex-also-chip {
  font-size: 14.5px; color: #55504A; border: 1px solid #E7DFD5;
  padding: 9px 16px; border-radius: 100px;
  transition: background-color .22s, color .22s, border-color .22s;
}
.ex-also-chip:hover { background: #3B2A1D; color: #fff; border-color: #3B2A1D; }

/* --- вторая строка заголовка ------------------------------------------
   H1 записи состоит из двух строк: сверху название из макета, под ним —
   помельче — то, как этот же товар спрашивают в поиске («Экскурсии в Риме
   на русском языке»). Обе внутри одного <h1>, разметку кладёт tk_h1_html
   в admin-php/lib/records.php. Зачем — docs/seo/semanticheskoe-yadro.md.

   Размер в em, а не в пикселях: у h1 на разных шаблонах свой кегль —
   56px у страны и гида, 46px у экскурсии, 50px у статьи, — и одна доля
   даёт везде соразмерный подзаголовок вместо трёх правил. clamp держит
   его читаемым на телефоне и не даёт разрастись на широком экране.

   Цвет наследуется и приглушается прозрачностью: h1 страны белый на
   тёмной обложке, h1 экскурсии тёмный на светлой — своя пара цветов
   каждому шаблону не нужна.

   Межбуквенный интервал и высоту строки сбрасываем: у h1 они настроены
   под крупный кегль (-0.042em и 1.02), на 18 пикселях от них текст
   слипается. */
.cs-h1-key {
  display: block;
  margin-top: 12px;
  font-size: clamp(14px, 0.33em, 21px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  opacity: 0.72;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .cs-h1-key { margin-top: 9px; }
}

/* Геройский экран страны, гида и места свёрстан в макете жёсткой высотой
   520 пикселей с overflow: hidden: под фотографией лежит затемняющий
   градиент, а поверх — накладка с текстом, обе растянуты inset: 0 и
   прижаты к низу. На телефоне заголовок в 33 пикселя занимает пять-шесть
   строк, вторая строка добавляет ещё три — содержимому нужно больше 520,
   и лишнее уезжает ВВЕРХ под обрез: у Стамбула пропадало первое слово
   заголовка целиком.

   Лечим тем же приёмом, что и тёмный блок призыва выше: отпускаем высоту
   и возвращаем в поток ТОЛЬКО накладку с текстом — растянутая inset: 0,
   при height: auto она сложилась бы в ноль, и высоту карточке задаёт
   теперь она. Градиент остаётся абсолютным и потому кроет карточку целиком,
   какой бы высокой она ни выросла. Обёртке фотографии абсолютность,
   наоборот, приходится вернуть: в макете она держалась на height: 100% от
   жёсткой высоты, а при auto схлопывалась до своих трёх к двум — под
   заголовком оставалась пустая бежевая полоса.

   Селектор по атрибуту и важность — класса у блоков нет, разметка вся из
   макета; идиома в проекте своя. Различать накладки приходится по
   padding: без этого правило ловит и градиент, и он выдавливает карточку
   на лишние 500 пикселей. */
@media (max-width: 900px) {
  [style*="border-radius: 28px"][style*="height: 520px"] {
    height: auto !important;
    min-height: 520px;
  }
  [style*="border-radius: 28px"][style*="height: 520px"]
    > [style*="inset: 0px"][style*="padding: 52px 56px"] {
    position: relative !important;
  }
  [style*="border-radius: 28px"][style*="height: 520px"] > [style*="aspect-ratio"] {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
}

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

   Важно про этот файл: правится ТОЛЬКО tools/records.css. Шаг раскладки
   (layout.py) копирует его поверх site/assets/css/records.css, и правки,
   внесённые в копию, стираются на ближайшей сборке без следа. */

/* --- таблицы --------------------------------------------------------- */
.art-body .art-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
  border: 1px solid #EBE0D2;
  border-radius: 16px;
  background: #fff;
}
.art-body .art-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
  min-width: 460px;   /* уже этого таблица нечитаема — пусть лучше скроллится */
}
.art-body .art-table thead th {
  text-align: left;
  font-family: Geologica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #6B5B4A;
  background: #FBF1E7;
  padding: 13px 18px;
  border-bottom: 1px solid #EBE0D2;
}
.art-body .art-table tbody td {
  padding: 14px 18px;
  color: #55504A;
  border-bottom: 1px solid #F3EADD;
  vertical-align: top;
}
.art-body .art-table tbody tr:last-child td { border-bottom: 0; }
.art-body .art-table tbody tr:nth-child(even) td { background: #FDFAF6; }
.art-body .art-table tbody td:first-child {
  color: #3B2A1D;
  font-weight: 500;
}
/* Вторая колонка почти всегда число — цена или время. Пусть не переносится
   и стоит по цифрам ровно: «18 EUR» ломалось на две строки. */
.art-body .art-table tbody td:nth-child(2) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.art-body .art-table caption {
  caption-side: bottom;
  text-align: left;
  padding: 12px 18px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #7A6B5B;
  border-top: 1px solid #F3EADD;
}

/* --- врезка с экскурсией ---------------------------------------------
   Разметку внутри врезки движок нормализует сам: первая строка становится
   <h2>, вторая <h3>, ссылка — кнопкой .art-btn. Поэтому стилизуем то, что
   получается на выходе, а не то, что написано в записи. */
.art-body .art-offer {
  margin: 30px 0;
  padding: 24px 26px 22px;
  border: 1px solid #F0DCC6;
  border-left: 4px solid #D9613A;
  border-radius: 18px;
  background: linear-gradient(180deg, #FDF0E4 0%, #FBF1E7 100%);
  box-shadow: 0 10px 26px rgba(59, 42, 29, .06);
}
.art-body .art-offer > *:first-child { margin-top: 0; }
.art-body .art-offer h2,
.art-body .art-offer h3 {
  margin: 0 0 10px;
  padding-top: 0;
  border-top: 0;
}
.art-body .art-offer h2 {
  font-size: 20px;
  line-height: 1.3;
  color: #3B2A1D;
}
.art-body .art-offer h3 {
  font-family: "Golos Text", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: #6B5B4A;
}
.art-body .art-offer p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.art-body .art-offer .art-cta { margin: 16px 0 0; }
.art-body .art-offer .art-btn { font-size: 15px; padding: 12px 22px; }

/* --- блок «проверено» ------------------------------------------------ */
.art-body .art-checked {
  margin: 34px 0 0;
  padding: 16px 20px;
  border: 1px dashed #E0D2BE;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #6B5B4A;
  background: #fff;
}

/* --- схема ------------------------------------------------------------
   SVG, а не растр: текст в схеме настоящий, его читает поисковик
   и скринридер, и он не мылится на плотных экранах. */
.art-body .art-scheme {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #EBE0D2;
  border-radius: 16px;
  background: #FCF8F3;
}
.art-body .art-scheme img {
  display: block;
  width: 700px;
  max-width: none;   /* пусть скроллится, а не сжимается в нечитаемое */
  height: auto;
  border-radius: 0;
}
@media (min-width: 800px) {
  .art-body .art-scheme img { width: 100%; }
}

/* --- иллюстрации в тексте на всю ширину колонки ---------------------- */
.art-body figure { margin: 30px 0; }
.art-body figure picture,
.art-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.art-body figure figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #7A6B5B;
}

/* --- ссылки в тексте --------------------------------------------------
   Ссылка должна быть видна как ссылка: до этого адреса вроде
   ticketing.colosseo.it стояли жирным текстом, и читатель по ним не жал,
   потому что не понимал, что это ссылка. */
.art-body p a,
.art-body li a,
.art-body .art-checked a,
.art-body .art-table a {
  color: #C4522B;
  text-decoration: underline;
  text-decoration-color: rgba(196, 82, 43, .35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.art-body p a:hover,
.art-body li a:hover,
.art-body .art-checked a:hover,
.art-body .art-table a:hover {
  text-decoration-color: currentColor;
}
/* Внешняя ссылка помечается стрелкой: понятно, что уходишь с сайта. */
.art-body a[href^="http"]:not(.art-btn)::after {
  content: "↗";
  display: inline-block;
  margin-left: .18em;
  font-size: .82em;
  line-height: 1;
  vertical-align: baseline;
  opacity: .65;
  text-decoration: none;
}

/* --- дубль оглавления в потоке ----------------------------------------
   Оглавлений на странице записи два, и делают их независимо друг от друга:
   шаблон подставляет {{TOC}} прямо в поток (безклассовый div с .toc-item),
   а боковое собирает скрипт из заголовков — с нумерацией и подсветкой
   текущего раздела. Полезно боковое; подстановка из шаблона оказывалась
   лишним списком из двенадцати строк под статьёй, и читатель принимал его
   за случайный мусор.
   Прятать по классу нельзя — его у этого div нет, поэтому цепляем по тому,
   что внутри: сосед .art-body, у которого прямые дети — пункты оглавления. */
.art-body ~ div:has(> .toc-item) { display: none; }

/* Подпись к чужой фотографии под обложкой записи.
   Нужна по лицензии: у CC BY и CC BY-SA имя автора и название лицензии
   указывать обязательно. Держим её тихой — это юридическая пометка,
   а не часть рассказа: мелкий кегль, приглушённый цвет, без подчёркивания. */
.tk-credit{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--mute,#6b6259);
  opacity:.85;
}
.tk-credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.15)}
.tk-credit a:hover{opacity:1;border-bottom-color:currentColor}