/* floripa.info — «Флорипа по-русски».

   Третья версия, 01.11.2026. Две первые были справочником на бумаге: строки
   под линейку, потом карточки на закате. Владелец оба раза сказал одно:
   примитивно и не под телефон. Аудитория — не «переезжающий» вообще, а
   серферы, тусовщики, будущие мамы, семьи и те, кто разбирается с
   документами; приходят с телефона из Instagram и Telegram.

   Отсюда решения:
   - **Вход по цели.** Первый экран отвечает «я здесь, чтобы…» плитками
     с фотографиями острова — серф, тусовки, роды, врачи, документы, жильё.
   - **Как приложение.** Нижняя панель вкладок под большим пальцем, лента
     дат в афише, ленты карточек вбок. Широкий экран — те же блоки сеткой.
   - **Настоящий остров.** Фото с Wikimedia Commons под свободными
     лицензиями, авторы на странице «О проекте».
   - **Unbounded** — только заголовки (молодо, узнаётся), **Onest** — текст
     и интерфейс. Оба SIL OFL, раздаются отсюда же (`LICENSES/`).
   - Бирюза океана — действие и ссылки, коралл заката — наше (встречи,
     сроки, канал). Больше цветов нет.

   Скриптов на странице нет, кроме `webmcp.js` для ИИ-агентов в браузере.
   Всё, что раскрывается и движется, — CSS. */

@font-face { font-family: Onest; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Unbounded; font-weight: 200 900; font-display: swap;
  src: url("fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; font-weight: 200 900; font-display: swap;
  src: url("fonts/unbounded-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

/* ------------------------------------------------------------------ токены */

:root {
  color-scheme: light;
  --bg: #f3f6f5;
  --card: #ffffff;
  --sunk: #e9efed;
  --line: #dfe7e5;
  --ink: #0f1f1d;
  --dim: #556664;
  --faint: #7d8c8a;
  --sea: #008f87;          /* действие, ссылки */
  --on-sea: #ffffff;
  --sea-ink: #00716b;      /* ссылка на белом: контраст ≥ 4.5 */
  --deep: #0b3d3a;         /* тёмные врезки: переезд, вкладки */
  --on-deep: #f1f7f6;
  --coral: #ff6544;        /* наше: встречи, сроки, канал */
  --on-coral: #ffffff;
  --coral-ink: #c8412a;
  --scrim: rgba(7, 33, 31, .86);
  --shadow: 0 1px 2px rgba(15, 31, 29, .06), 0 10px 28px -12px rgba(15, 31, 29, .25);

  --display: Unbounded, "Arial Black", system-ui, sans-serif;
  --text: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-s: 12px; --r-m: 18px; --r-l: 24px; --r-xl: 30px;
  --gut: 16px;
  --page: 1180px;
  --top: 56px;
  --tabs: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Тема — по системе, а внутри Telegram — по клиенту: `tg.js` ставит
   `data-theme`, и он сильнее системной настройки (тема Telegram не обязана
   с ней совпадать). Поэтому тёмные токены записаны дважды. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1413;
    --card: #12201e;
    --sunk: #172826;
    --line: #223532;
    --ink: #edf4f3;
    --dim: #a6b6b4;
    --faint: #7f908e;
    --sea: #19c2b8;
    --on-sea: #04211f;
    --sea-ink: #4fd6cd;
    --deep: #0e2c2a;
    --coral-ink: #ff8a70;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1413;
  --card: #12201e;
  --sunk: #172826;
  --line: #223532;
  --ink: #edf4f3;
  --dim: #a6b6b4;
  --faint: #7f908e;
  --sea: #19c2b8;
  --on-sea: #04211f;
  --sea-ink: #4fd6cd;
  --deep: #0e2c2a;
  --coral-ink: #ff8a70;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------------- база */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--top) + 64px); }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased;
       padding-bottom: var(--tabs); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--sea); color: #fff; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
h3 { font-weight: 650; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); }
.icon { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- шапка */

.top { position: sticky; top: 0; z-index: 30;
       background: color-mix(in srgb, var(--bg) 86%, transparent);
       -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.top .wrap { height: var(--top); display: flex; align-items: center; gap: 20px; }
.logo { font: 700 18px/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.logo em { font-style: normal; color: var(--sea); }
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav a { padding: 9px 14px; border-radius: 99px; font-weight: 600; font-size: 15px; color: var(--dim); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--card); }
.top-act { margin-left: auto; display: flex; gap: 8px; }
.round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
         background: var(--card); box-shadow: var(--shadow); }
.round .icon { width: 20px; height: 20px; }

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

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       height: 48px; padding: 0 22px; border-radius: 99px; border: 0;
       font: 700 16px/1 var(--text); white-space: nowrap; cursor: pointer;
       transition: transform .2s var(--ease), filter .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.06); }
.btn .icon { width: 20px; height: 20px; }
.btn-sea { background: var(--sea); color: #fff; }
.btn-coral { background: var(--coral); color: var(--on-coral); }
.btn-white { background: #fff; color: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; }
.btn-line { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-s { height: 40px; padding: 0 16px; font-size: 15px; }

/* ---------------------------------------------------------------- обложка */

.cover { position: relative; margin: 4px var(--gut) 0; border-radius: var(--r-xl);
         overflow: hidden; color: #fff; min-height: 460px; display: flex;
         align-items: flex-end; isolation: isolate; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0;
                transition: opacity .9s var(--ease); }
.cover canvas.on { opacity: 1; }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1;
                 background: linear-gradient(180deg, rgba(7, 33, 31, .15) 20%, var(--scrim) 92%); }
.cover-body { padding: 24px 18px 20px; width: 100%; max-width: 680px; }
.kicker { display: inline-flex; gap: 8px; align-items: center; font-size: 13px;
          font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ffd8cf; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.cover h1 { font-size: 34px; margin-top: 10px; }
.cover p { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, .9); max-width: 34em; }

/* Поиск — внутри обложки, всегда светлый: на фото тёмная плашка
   читалась как дыра в картинке. */
.search { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
          margin-top: 20px; padding: 6px 6px 6px 18px;
          background: #fff; color: #0f1f1d; border-radius: 20px;
          box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); }
.search input { color: #0f1f1d; }
.search input::placeholder { color: #7d8c8a; }
.search > .icon { color: var(--faint); }
.search input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent;
                color: var(--ink); font: 400 17px/1 var(--text); }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .btn { height: 48px; width: 48px; padding: 0; border-radius: 15px; }
.search:focus-within { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--sea) 35%, transparent); }
.search.flat { margin: 14px 0 0; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.search.flat input { color: var(--ink); }

.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px calc(var(--gut) + 6px) 0;
         font-size: 13px; color: var(--dim); }
.facts b { color: var(--ink); font-weight: 700; }
.facts span { display: inline-flex; align-items: center; gap: 6px; }
.facts .icon { width: 16px; height: 16px; color: var(--sea); stroke-width: 2.4; }

/* ---------------------------------------------------------------- разделы */

.sec { padding-top: 36px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
        margin-bottom: 14px; }
.head h2 { font-size: 22px; }
.head p { color: var(--dim); font-size: 15px; margin-top: 6px; }
.more { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700;
        font-size: 15px; color: var(--sea-ink); padding: 6px 0; }
.more .icon { width: 18px; height: 18px; }

/* Лента вбок на телефоне: карточка выглядывает справа — видно, что их больше. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px;
        scroll-padding: 0 var(--gut); list-style: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ---------------------------------------------------------------- цели */

.intents { list-style: none; margin: 0; padding: 0; display: grid;
           grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.intent { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
          aspect-ratio: 1 / 1.06; padding: 14px; border-radius: var(--r-l); overflow: hidden;
          color: #fff; isolation: isolate; background: var(--deep);
          transition: transform .25s var(--ease); }
.intent:hover { transform: translateY(-3px); }
.intent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
              transition: transform .6s var(--ease); }
.intent:hover img { transform: scale(1.05); }
.intent::before { content: ""; position: absolute; inset: 0; z-index: -1;
                  background: linear-gradient(180deg, rgba(7, 33, 31, 0) 30%, rgba(7, 33, 31, .88)); }
.intent b { font: 700 16px/1.15 var(--display); letter-spacing: -.01em; }
.intent span { font-size: 13px; color: rgba(255, 255, 255, .85); margin-top: 4px; line-height: 1.3; }
.intent .n { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700;
             margin: 0; background: rgba(7, 33, 31, .72); padding: 3px 9px; border-radius: 99px;
             -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------------------------------------------------------------- события */

.ev { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px;
      background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow);
      transition: transform .25s var(--ease); }
a.ev:hover { transform: translateY(-2px); }
.ev-when { font-size: 13px; font-weight: 700; color: var(--sea-ink); display: flex; gap: 8px;
           align-items: center; flex-wrap: wrap; }
.kind { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
        color: var(--faint); }
.ev h3 { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
         overflow: hidden; }
.ev p { font-size: 13px; color: var(--dim); margin-top: auto; padding-top: 4px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.ours { background: var(--coral); color: var(--on-coral); box-shadow: none; }
.ev.ours .ev-when, .ev.ours .kind, .ev.ours p { color: rgba(255, 255, 255, .92); }
.ev.ours h3 { font: 700 20px/1.12 var(--display); -webkit-line-clamp: 2; }
.ev.ours .btn { align-self: flex-start; margin-top: 8px; color: var(--coral-ink); }

/* ---------------------------------------------------------------- переезд */

.route { margin-top: 36px; background: var(--deep); color: var(--on-deep);
         border-radius: var(--r-xl); padding: 22px 18px 10px; }
.route .head h2 { color: #fff; }
.route .head p { color: rgba(241, 247, 246, .75); }
.route .more { color: #7fe3dc; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { counter-increment: st; border-top: 1px solid rgba(255, 255, 255, .1); }
.steps a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
           padding: 13px 0; }
.steps a::before { content: counter(st); width: 32px; height: 32px; border-radius: 50%;
                   display: grid; place-items: center; font-weight: 800; font-size: 14px;
                   background: rgba(255, 255, 255, .1); }
.steps .due a::before { background: var(--coral); }
.steps b { font-weight: 600; line-height: 1.3; }
.steps small { display: block; font-size: 13px; color: rgba(241, 247, 246, .7); margin-top: 2px;
               font-weight: 400; }
.pill-due { flex: none; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px;
            background: var(--coral); color: #fff; white-space: nowrap; }
.route.page { margin-top: 18px; }

/* ---------------------------------------------------------------- правки */

.list { list-style: none; margin: 0; padding: 0; background: var(--card);
        border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.row { display: grid; gap: 4px; padding: 14px 16px; }
a.row:hover { background: var(--sunk); }
.row small { font-size: 12px; font-weight: 700; color: var(--sea-ink); letter-spacing: .02em; }
.row h3 { font-size: 16px; }
.row p { font-size: 14px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2;
         -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- канал */

.join { margin-top: 36px; border-radius: var(--r-xl); padding: 24px 20px;
        background: var(--coral); color: #fff; }
.join h2 { font-size: 24px; max-width: 18ch; }
.join p { margin-top: 10px; color: rgba(255, 255, 255, .92); max-width: 30em; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* Белая кнопка в обеих темах: цвет постоянный, а светлый `--coral-ink` тёмной темы на белом не читался. */
.join .btn-white { color: #c8412a; }

/* ---------------------------------------------------------------- страницы */

.page-top { padding: 14px 0 6px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--faint);
          margin-bottom: 10px; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--sea-ink); }
.page-top h1 { font-size: 28px; }
.page-top .lead { color: var(--dim); margin-top: 10px; font-size: 16px; max-width: 40em; }
.hub-intro { margin-top: 12px; font-size: 16px; line-height: 1.5; max-width: 40em; }
.hub-intro-src { margin-top: 6px; font-size: 13px; color: var(--dim); max-width: 40em; }
.hub-intro-src a { color: var(--sea-ink); }

.band { position: relative; margin: 4px var(--gut) 0; border-radius: var(--r-xl); overflow: hidden;
        color: #fff; min-height: 240px; display: flex; align-items: flex-end; isolation: isolate; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1;
                background: linear-gradient(180deg, rgba(7, 33, 31, .1), var(--scrim)); }
.band .page-top { padding: 20px; }
.band .crumbs, .band .crumbs a { color: rgba(255, 255, 255, .8); }
.band .lead { color: rgba(255, 255, 255, .88); }

/* Афиша: лента дат и виды — липкие под шапкой. */
.picker { position: sticky; top: var(--top); z-index: 20; background: var(--bg); padding: 8px 0 10px; }
.dates, .kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
                 margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.dates::-webkit-scrollbar, .kinds::-webkit-scrollbar { display: none; }
.date { flex: none; width: 56px; padding: 8px 0 7px; border-radius: 16px; text-align: center;
        background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 12px;
        font-weight: 600; color: var(--dim); line-height: 1.2; }
.date b { display: block; font: 700 19px/1.1 var(--display); color: var(--ink); margin-top: 2px; }
.date.we b { color: var(--coral-ink); }
.date:hover { box-shadow: inset 0 0 0 1.5px var(--sea); }
.kinds { margin-top: 8px; }
.chip { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px;
        border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
        font-weight: 650; font-size: 14px; white-space: nowrap; }
.chip i { font-style: normal; color: var(--faint); font-weight: 500; }
a.chip:hover { box-shadow: inset 0 0 0 1.5px var(--sea); }
.chip[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip[aria-current="page"] i { color: inherit; opacity: .7; }

.day { padding-top: 22px; }
.day-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.day-head h2 { font-size: 19px; }
.day-head span { font-size: 14px; color: var(--faint); }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card { display: grid; align-content: start; gap: 6px; padding: 16px 18px; background: var(--card);
        border-radius: var(--r-l); box-shadow: var(--shadow); height: 100%;
        transition: transform .25s var(--ease); }
a.card:hover { transform: translateY(-2px); }
.card small { font-size: 12px; font-weight: 700; color: var(--sea-ink); }
.card h3 { font-size: 17px; }
.card p { font-size: 14px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3;
          -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- запись */

.rec-head { padding: 14px 0 18px; }
.rec-head h1 { font-size: 27px; line-height: 1.12; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px;
        font-size: 13px; color: var(--dim); }
.ok { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px;
      border-radius: 99px; background: color-mix(in srgb, var(--sea) 14%, transparent);
      color: var(--sea-ink); font-weight: 700; }
.ok .icon { width: 16px; height: 16px; stroke-width: 2.6; }

.answer { padding: 18px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow);
          font-size: 16px; }
.answer-label { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 800;
                letter-spacing: .06em; text-transform: uppercase; color: var(--coral-ink); }
.answer p + p { margin-top: 8px; }
.answer a, .prose a { color: var(--sea-ink); text-decoration: underline;
                      text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.toc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
             margin: 14px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 4px; }
.toc-chips::-webkit-scrollbar { display: none; }
.toc { display: none; }
.toc b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em;
         text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 7px 12px; margin: 0 -12px; border-radius: 10px; color: var(--dim);
         font-size: 14px; line-height: 1.35; }
.toc a:hover { background: var(--card); color: var(--ink); }

.prose { font-size: 17px; line-height: 1.68; margin-top: 8px; }
.prose h2 { font-size: 20px; line-height: 1.2; margin: 34px 0 10px; letter-spacing: -.015em; }
.prose h3, .prose h4 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--sea); }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 16px 0; padding: 12px 16px; background: var(--sunk); border-radius: var(--r-s);
                    color: var(--dim); }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px;
               line-height: 1.45; margin: 16px 0; max-width: 100%; background: var(--card);
               border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); }
.prose th, .prose td { padding: 10px 12px; text-align: left; vertical-align: top;
                       border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; background: var(--sunk); }
.prose code { font-size: .9em; background: var(--sunk); padding: 1px 5px; border-radius: 6px; }
.prose .short { display: none; }

.sources { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; line-height: 1.45; }
.sources li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 0;
              border-bottom: 1px solid var(--line); }
.tier { justify-self: start; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px;
        background: var(--sunk); color: var(--dim); }
.tier.t1 { background: color-mix(in srgb, var(--sea) 16%, transparent); color: var(--sea-ink); }
.sources a { color: var(--dim); text-decoration: none; }
.sources a:hover { color: var(--sea-ink); }

.ask { margin-top: 30px; padding: 22px 20px; border-radius: var(--r-xl); background: var(--deep);
       color: var(--on-deep); }
.ask h2 { font-size: 20px; color: #fff; }
.ask p { margin-top: 8px; color: rgba(241, 247, 246, .8); }

/* ---------------------------------------------------------------- поиск, пусто */

.found { color: var(--dim); font-size: 14px; margin: 16px 0 10px; }
.empty { margin-top: 18px; padding: 28px 20px; text-align: center; border-radius: var(--r-xl);
         background: var(--card); box-shadow: var(--shadow); }
.empty h2 { font-size: 20px; }
.empty p { color: var(--dim); margin: 8px auto 18px; max-width: 28em; }
.note { color: var(--faint); font-size: 14px; }

/* ---------------------------------------------------------------- о проекте */

.about { font-size: 16px; line-height: 1.65; max-width: 720px; }
.about h2 { font-size: 20px; margin: 30px 0 10px; }
.about p { margin: 10px 0; }
.about a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; }
.privacy ul { margin: 10px 0; padding-left: 20px; }
.privacy li { margin: 6px 0; }
.privacy h3 { font-size: 16px; margin: 22px 0 8px; }
.privacy-item { padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.privacy-item dl { margin: 0; font-size: 15px; line-height: 1.55; }
.privacy-item dt { margin-top: 10px; font-size: 13px; font-weight: 650; color: var(--dim); }
.privacy-item dd { margin: 2px 0 0; }
.privacy-note { margin: 0; font-size: 13px; line-height: 1.45; }
.privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.credits { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: var(--dim); }
.credits li { padding: 8px 0; border-bottom: 1px solid var(--line); }

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

.foot { margin-top: 48px; padding: 28px 0 32px; border-top: 1px solid var(--line);
        font-size: 14px; color: var(--dim); }
.foot .wrap { display: grid; gap: 18px; }
.foot .logo { font-size: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot nav a:hover { color: var(--sea-ink); }
.family { font-size: 13px; color: var(--faint); }
.family a { color: var(--dim); font-weight: 650; }

/* Нижние вкладки: навигация под большим пальцем. */
.tabs { position: fixed; z-index: 40; left: 10px; right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; border-radius: 22px;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
        background: rgba(11, 30, 28, .94); color: rgba(241, 247, 246, .62);
        -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
        box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }
.tabs a { display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 650;
          padding: 8px 0; }
.tabs a[aria-current="page"] { color: #fff; }
.tabs a[aria-current="page"] .icon { color: #5fe0d6; }
.tabs .icon { width: 23px; height: 23px; }
body.has-tabs { --tabs: 92px; }

/* ---------------------------------------------------------------- ширина */

@media (min-width: 720px) {
  :root { --gut: 28px; }
  .cover { min-height: 500px; }
  .cover-body { padding: 40px 40px 40px; }
  .cover h1 { font-size: 52px; }
  .cover p { font-size: 18px; }
  .facts { margin-left: max(calc(var(--gut) + 40px), calc((100% - var(--page)) / 2 + var(--gut) + 40px)); }
  .intents { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
          overflow: visible; margin: 0; padding: 0; }
  .agenda, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head h2 { font-size: 28px; }
  .route { padding: 30px 30px 14px; }
  .steps { columns: 2; column-gap: 32px; }
  .steps li { break-inside: avoid; }
  .join { padding: 40px; }
  .join h2 { font-size: 34px; }
  .page-top h1 { font-size: 40px; }
  .band { min-height: 320px; }
  .band .page-top { padding: 32px; }
  .rec-head h1 { font-size: 40px; }
}

@media (min-width: 1024px) {
  .nav { display: flex; }
  .tabs { display: none; }
  body.has-tabs { --tabs: 0px; }
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .agenda, .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { columns: 3; }
  .article { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 0 56px;
             align-items: start; }
  .toc { display: block; position: sticky; top: calc(var(--top) + 16px); grid-column: 2;
         grid-row: 1 / span 4; }
  .article > :not(.toc) { grid-column: 1; }
  .toc-chips { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Сетки и ленты: длинная строка в одну линию (зал, площадка) не должна
   распирать колонку — иначе карточка уезжает за край экрана. */
.rail > li, .agenda > li, .cards > li, .intents > li { min-width: 0; }

/* Обложка и полоса — по ширине страницы, а не окна. */
.cover, .band { margin-left: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)));
                margin-right: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut))); }

/* Новость: текст пересказа и строка источника под ним. */
.news .prose { max-width: 720px; }
.prose .src { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line);
              font-size: 14px; color: var(--dim); }

/* Запись: опора короткого ответа и нумерованные источники. */
.answer .cite { margin-top: 10px; font-size: 13px; color: var(--dim); }
.answer .cite a { text-decoration: none; font-weight: 700; }
ol.sources { counter-reset: none; }
.sources li > span:last-child { display: grid; gap: 2px; }
.sources small { font-size: 12px; color: var(--faint); }
.sources li:target { background: color-mix(in srgb, var(--sea) 10%, transparent); border-radius: 8px; }

/* Переключатель языка в шапке: три буквы, текущий — залитый. */
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--card);
         box-shadow: var(--shadow); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.langs a { padding: 8px 9px; border-radius: 99px; color: var(--dim); line-height: 1; }
.langs a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.top-act { align-items: center; }

/* ================================================================ навигация
   Меню на весь экран — без скриптов: `#menu:target`. Открывается вкладкой
   «Меню» снизу и кнопкой в шапке; закрывается ссылкой на `#`. Внутри —
   все разделы, подборки, темы новостей и языки: и человеку за один тап, и
   поисковику — каждая страница в двух переходах от любой. */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto;
        display: none; padding: 0 0 calc(110px + env(safe-area-inset-bottom)); }
.menu:target { display: block; animation: menu-in .22s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.menu-top { position: sticky; top: 0; z-index: 2; background: var(--bg);
            display: flex; align-items: center; justify-content: space-between;
            height: var(--top); padding: 0 var(--gut); }
.menu-body { max-width: var(--page); margin: 0 auto; padding: 4px var(--gut) 0;
             display: grid; gap: 26px; }
.menu h2 { font-size: 13px; font-family: var(--text); font-weight: 800; letter-spacing: .08em;
           text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.menu-main { display: grid; gap: 4px; }
.menu-main a { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
               border-radius: 16px; background: var(--card); font: 700 18px/1.2 var(--display);
               letter-spacing: -.01em; }
.menu-main a .icon { color: var(--sea); }
.menu-main a small { margin-left: auto; font: 500 13px/1 var(--text); color: var(--faint); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-grid a { position: relative; display: flex; align-items: flex-end; min-height: 74px;
               padding: 10px 12px; border-radius: 16px; overflow: hidden; color: #fff;
               font-weight: 700; font-size: 14px; line-height: 1.2; isolation: isolate; }
.menu-grid a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                   z-index: -2; }
.menu-grid a::before { content: ""; position: absolute; inset: 0; z-index: -1;
                       background: linear-gradient(180deg, transparent 10%, rgba(7, 33, 31, .85)); }
.menu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.menu .acts { margin-top: 0; }
.menu .acts .btn-ghost { background: var(--card); color: var(--ink);
                         box-shadow: inset 0 0 0 1.5px var(--line); }
.menu .acts .btn-white { background: var(--sea); color: #fff; }

/* Полоса подразделов под шапкой: где я внутри раздела и куда рядом. */
.subnav { position: sticky; top: var(--top); z-index: 19; background: color-mix(in srgb, var(--bg) 92%, transparent);
          -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.subnav nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
              padding: 6px var(--gut) 10px; max-width: var(--page); margin: 0 auto; }
.subnav nav::-webkit-scrollbar { display: none; }

/* «Дальше»: следующий шаг вместо тупика в конце страницы. */
.next-step { display: grid; gap: 4px; margin-top: 30px; padding: 18px 20px; border-radius: var(--r-l);
             background: var(--card); box-shadow: var(--shadow); }
.next-step small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
                   color: var(--sea-ink); }
.next-step b { font: 700 18px/1.25 var(--display); }
.next-step:hover b { color: var(--sea-ink); }

/* Подвал — карта сайта: каждая подборка и тема в одном переходе. */
.foot-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.foot-map h3 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
               color: var(--faint); margin-bottom: 8px; }
.foot-map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-map a { color: var(--dim); }
.foot-map a:hover { color: var(--sea-ink); }
@media (min-width: 720px) { .foot-map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .menu-body { grid-template-columns: 1fr 1fr; align-items: start; gap: 30px 48px; }
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-wide { grid-column: 1 / -1; }
}

/* ================================================================ новости */

.topic { --h: 190; }
.t-alert { --c: #e5484d; } .t-transport { --c: #2f7fd6; } .t-law { --c: #8a5cf0; }
.t-money { --c: #c9881a; } .t-city { --c: var(--sea); }
.tdot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
        letter-spacing: .04em; text-transform: uppercase; color: var(--c); }
.tdot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.lead-grid { display: grid; gap: 12px; }
.lead-story { display: grid; gap: 10px; padding: 22px 20px; border-radius: var(--r-xl);
              background: var(--deep); color: var(--on-deep); }
.lead-story .tdot { color: #ffb3a3; }
.lead-story .tdot::before { background: #ff8a70; }
.lead-story.t-alert { background: #3a1416; }
.lead-story h2 { font-size: 26px; line-height: 1.12; color: #fff; }
.lead-story p { color: rgba(241, 247, 246, .82); font-size: 16px; display: -webkit-box;
                -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lead-story small, .side-story small, .nrow small { font-size: 12px; color: var(--faint); }
.lead-story small { color: rgba(241, 247, 246, .6); }
.side { display: grid; gap: 12px; }
.side-story { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r-l);
              background: var(--card); box-shadow: var(--shadow); }
.side-story h3 { font: 700 17px/1.25 var(--display); letter-spacing: -.01em; }
.side-story:hover h3, .nrow:hover h3, .lead-story:hover h2 { text-decoration: underline;
              text-decoration-thickness: 2px; text-underline-offset: 4px; }

.ndays { margin-top: 30px; }
.nday { padding-top: 6px; }
.nday > h2 { position: sticky; top: calc(var(--top) + 52px); z-index: 5; background: var(--bg);
             font-size: 18px; padding: 10px 0 8px; }
.nlist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; }
.nrow { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0;
        border-bottom: 1px solid var(--line); }
.nrow time { grid-row: span 3; font-size: 13px; font-weight: 700; color: var(--faint);
             font-variant-numeric: tabular-nums; padding-top: 2px; }
.nrow h3 { font-size: 17px; line-height: 1.3; font-weight: 700; }
.nrow p { font-size: 14px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; overflow: hidden; }
.alert-box { display: grid; gap: 4px; padding: 14px 16px; margin: 18px 0 6px; border-radius: var(--r-m);
             background: color-mix(in srgb, #e5484d 12%, var(--card)); }
.alert-box b { color: #c22d32; }

.story-head h1 { font-size: 30px; line-height: 1.1; margin: 10px 0 12px; }
.story-lead { font-size: 19px; line-height: 1.55; font-weight: 500; }
.source-card { display: grid; gap: 4px; margin-top: 24px; padding: 16px 18px; border-radius: var(--r-m);
               background: var(--sunk); font-size: 14px; }
.source-card small { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
                     color: var(--faint); }
.source-card a { font-weight: 700; color: var(--sea-ink); }
@media (min-width: 720px) {
  .lead-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .lead-story { padding: 30px; align-content: end; min-height: 360px; }
  .lead-story h2 { font-size: 34px; }
  .story-head h1 { font-size: 44px; }
  .nday > h2 { top: calc(var(--top) + 52px); }
}

/* ================================================================ афиша:
   у события нет своей картинки, а чужую брать нельзя. До 01.11.2026 обложкой
   был знак вида на градиенте — сорок процентов высоты карточки на картинку,
   которая ничего не сообщает. Теперь цвет вида несёт одна точка у метки, а
   место отдано названию, площадке и дню. */
.poster { display: grid; align-content: start; gap: 6px; height: 100%; padding: 14px 16px 15px;
          border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow);
          transition: transform .25s var(--ease); min-height: 44px; }
a.poster:hover { transform: translateY(-2px); }
a.poster:hover h3 { color: var(--sea-ink); }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 750;
       letter-spacing: .02em; color: var(--dim); }
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--a2); flex: none; }
.tag .icon { width: 16px; height: 16px; }
.poster h3 { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box;
             -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.poster-where { font-size: 13px; color: var(--dim); line-height: 1.35; display: -webkit-box;
                -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-when { font-size: 13px; font-weight: 700; color: var(--sea-ink); }
.k-cinema { --a2: #7a4fd6; } .k-kids { --a2: #e0a100; } .k-fest { --a2: #e5484d; }
.k-stage { --a2: #d9467f; } .k-music { --a2: #3d8bfd; } .k-learn { --a2: #22b38a; }
.k-fair { --a2: #e39b3c; } .k-show { --a2: #7d8ca8; } .k-other { --a2: #19837b; }
.poster.ours { background: var(--coral); color: var(--on-coral); box-shadow: none; }
.poster.ours .tag, .poster.ours .poster-where, .poster.ours .poster-when { color: rgba(255, 255, 255, .92); }
.poster.ours h3 { font: 700 18px/1.15 var(--display); }
.poster.ours .btn { justify-self: start; margin-top: 4px; color: var(--coral-ink); height: 44px; }
.agenda.posters { grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .agenda.posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .agenda.posters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Выставки — одна полоса над днями: на телефоне лента вбок, шире — сетка. */
.runs { padding-top: 22px; }
.runs-sub { color: var(--dim); font-size: 14px; margin: -4px 0 12px; max-width: 40em; }
.runs .rail { grid-auto-columns: 72%; }
.day-empty { padding: 12px 16px; border-radius: var(--r-m); background: var(--sunk); color: var(--dim); }

/* Главная ниже подборок. */
.change-grid { display: grid; gap: 12px; }
.change-grid .side-story small { display: -webkit-box; -webkit-line-clamp: 2;
                                 -webkit-box-orient: vertical; overflow: hidden; }
.route > .btn { margin: 14px 0 8px; }
.join.with-photo { display: grid; padding: 0; overflow: hidden; }
.join.with-photo img { width: 100%; height: 180px; object-fit: cover; }
.join.with-photo > div { padding: 24px 20px; }
.rail .poster { min-height: 100%; }
@media (min-width: 720px) {
  .change-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .join.with-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; }
  .join.with-photo img { height: 100%; min-height: 320px; order: 2; }
  .join.with-photo > div { padding: 40px; align-self: center; }
}

/* Телефон: в шапке только поиск и меню — языки и канал живут в меню. */
@media (max-width: 719.98px) {
  .top-act > .langs, .top-act > a[href^="https://t.me"] { display: none; }
}
.menu-body { grid-template-columns: minmax(0, 1fr); width: 100%; }
.menu-main a { min-width: 0; }
.menu .langs { display: inline-flex; box-shadow: none; background: var(--card); }

/* ---------------------------------------------------------------- атлас

   Карточка места — не ссылка целиком, как у записи: в ней несколько
   действий (позвонить, открыть сайт), и каждому нужна своя мишень под
   палец. Реклама отличается не цветом действия, а рамкой и подписью:
   коралл в проекте означает «наше», и чужое место им не красится. */

.atlas-grid { list-style: none; margin: 0; padding: 0; display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.atlas-grid > li { min-width: 0; }
.atlas-tile { display: grid; gap: 4px; height: 100%; padding: 14px 16px; background: var(--card);
              border-radius: var(--r-m); box-shadow: var(--shadow); }
.atlas-tile b { font-size: 15px; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.atlas-tile span { font-size: 13px; color: var(--faint); }

.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.places > li { min-width: 0; }
.place-tel { flex-wrap: wrap; gap: 4px 12px; font-weight: 600; }
.place-tel a { white-space: nowrap; }

.ad-slot { margin: 6px 0 18px; padding: 12px; border-radius: var(--r-xl);
           box-shadow: inset 0 0 0 1.5px var(--line); background: var(--sunk); }
.ad-label { display: inline-block; margin: 0 0 10px 6px; font-size: 11px; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.place-ad { box-shadow: none; }

.place-facts { display: grid; gap: 0; margin: 4px 0 0; background: var(--card);
               border-radius: var(--r-l); box-shadow: var(--shadow); }
.place-facts > div { display: grid; gap: 2px; padding: 12px 16px; min-width: 0; }
.place-facts > div + div { border-top: 1px solid var(--line); }
.place-facts dt { font-size: 12px; font-weight: 700; color: var(--faint); }
.place-facts dd { margin: 0; overflow-wrap: anywhere; }
.place-facts dd a { color: var(--sea-ink); }
.place-facts .place-tel { display: flex; }
.place-notes { margin: 12px 0 0; padding-left: 22px; color: var(--dim); }
.place-notes li { margin: 6px 0; }
.place-notes li::marker { color: var(--sea); }

@media (min-width: 720px) {
  .atlas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .place-facts > div { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
}

@media (min-width: 1024px) {
  .atlas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ================================================================ шапка, 01.11.2026
   На широком экране шапка — это меню сайта: пять разделов с текущим,
   короткий переключатель языка, поиск и одна подписанная кнопка канала.
   Гамбургер с меню на весь экран остаётся телефону и планшету: на
   большом экране его строки по 60 пикселей выглядят как ошибка вёрстки. */
.round { width: 44px; height: 44px; }
.top-search, .top-cta { display: none; }
.top-search { align-items: center; gap: 8px; height: 40px; padding: 0 14px; width: 210px;
              border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
              color: var(--faint); }
.top-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--sea); }
.top-search .icon { width: 18px; height: 18px; }
.top-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
                    color: var(--ink); font: 400 14px/1 var(--text); }
.top-search input:focus { outline: none; }
.top-search input::placeholder { color: var(--faint); }
.top-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.wide-only { display: none; }
.nav a { position: relative; }
.nav a[aria-current="page"] { color: var(--sea-ink); background: color-mix(in srgb, var(--sea) 11%, transparent); }

@media (min-width: 1024px) {
  .top .wrap { gap: 16px; }
  .nav { margin-left: 8px; gap: 2px; }
  .nav a { padding: 10px 13px; }
  .top-menu, .top-ch { display: none; }
  .top-cta { display: inline-flex; height: 40px; padding: 0 16px; font-size: 14px; gap: 7px; }
  .top-cta .icon { width: 17px; height: 17px; }
  /* Языки — тихий текст, а не таблетка с тенью: это настройка, а не действие. */
  .top-act > .langs { background: none; box-shadow: none; padding: 0; gap: 0; font-size: 12px; }
  .top-act > .langs a { padding: 12px 6px; border-radius: 6px; }
  .top-act > .langs a[aria-current="true"] { background: none; color: var(--ink);
                                             text-decoration: underline; text-underline-offset: 5px;
                                             text-decoration-thickness: 2px; }
  .top-act > .langs a:hover { color: var(--sea-ink); }
}
@media (min-width: 1200px) { .wide-only { display: inline; } }
@media (min-width: 1280px) {
  .top-search { display: flex; }
  .top-find { display: none; }
}

/* ---------------------------------------------------------------- афиша: фильтры
   Лента дат и видов липнет под шапкой; мишени — не меньше 44 пикселей. */
.picker { padding: 6px 0 8px; box-shadow: 0 8px 12px -12px rgba(15, 31, 29, .35); }
.date { width: 52px; min-height: 44px; padding: 5px 0 4px; font-size: 11px; }
.date b { font-size: 17px; }
.date[aria-disabled="true"] { opacity: .45; }
.kinds { margin-top: 6px; }
.kinds .chip { min-height: 44px; padding: 0 14px; }
.chip-we { color: var(--coral-ink); }
.chip-we[aria-current="page"] { background: var(--coral); color: #fff; }

/* ---------------------------------------------------------------- призывы
   Каждый — про то, что человек получит здесь и сейчас: изменения записи,
   план, звонок месту. Без счётчиков и «осталось мест». */
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.follow p { font-size: 13px; color: var(--dim); flex: 1 1 220px; }
.follow .btn { height: 44px; }
.ask .btn-ghost { background: rgba(255, 255, 255, .12); }
.strip { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 12px 0 4px;
         padding: 8px 14px; border-radius: var(--r-m); font-size: 14px; font-weight: 600;
         background: color-mix(in srgb, var(--coral) 12%, var(--card)); color: var(--ink); }
.strip .icon { width: 18px; height: 18px; color: var(--coral-ink); }
.strip span { flex: 1; min-width: 0; }
.strip b { flex: none; color: var(--coral-ink); font-weight: 750; }
@media (min-width: 1024px) { .strip { display: none; } }
p.place-own { margin-top: 12px; font-size: 14px; color: var(--dim); text-decoration: none; }
p.place-own a { color: var(--ink); font-weight: 650; text-decoration: underline;
                text-underline-offset: 3px; padding: 12px 0; }
@media (max-width: 479.98px) {
  .follow .btn { width: 100%; }
}
.runs .rail { align-items: start; }
.runs .poster h3 { font-size: 15px; -webkit-line-clamp: 2; }
.runs .poster-where { -webkit-line-clamp: 1; }

/* ---------------------------------------------------------------- атлас: карта и значки

   Атлас третьей редакции (ноябрь 2026). Владелец назвал вторую «мега-
   примитивной»: плитки без картинок, список без места на карте. Отсюда:
   силуэт острова из OpenStreetMap с районами-точками (песок на бирюзе,
   материк приглушён), значок у каждой из 27 рубрик, обложки блоков. Карта —
   инлайн-SVG без библиотек и запросов: тот же отпечаток, что у страницы. */

:root { --sand: #f1e4c6; --sand-line: #d9c69a; --sea-map: #cfe9e6; --land-mute: #e2e7e4;
        --lake: #9fd7d1;
        /* Блоки рубрик на живом острове: бирюза, коралл, охра, мох и ржавчина палитры. */
        --g0: #008f87; --g1: #0b3d3a; --g2: #9c6a12; --g3: #ff6544;
        --g4: #2f7a4d; --g5: #b44a2c; --g6: #f08f78; --g7: #45aaa2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sand: #3a3527; --sand-line: #5a5038; --sea-map: #0f2b29;
                                    --land-mute: #1a2624; --lake: #1d4a46;
                                    --g0: #19c2b8; --g1: #a7e8e2; --g2: #e6ae45; --g3: #ff6544;
                                    --g4: #6ebd8a; --g5: #d9502f; --g6: #ffb7a6; --g7: #62a8a2; }
}
:root[data-theme="dark"] { --sand: #3a3527; --sand-line: #5a5038; --sea-map: #0f2b29;
                           --land-mute: #1a2624; --lake: #1d4a46;
                           --g0: #19c2b8; --g1: #a7e8e2; --g2: #e6ae45; --g3: #ff6544;
                           --g4: #6ebd8a; --g5: #d9502f; --g6: #ffb7a6; --g7: #62a8a2; }

.aicon { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor;
         stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--sea-ink); }
.aicon-l { width: 34px; height: 34px; }
.title-icon { display: flex; align-items: center; gap: 12px; }

.island { margin: 0; position: relative; }
.island svg { display: block; width: 100%; height: auto; border-radius: var(--r-xl);
              background: var(--sea-map); touch-action: manipulation; }
.island-big svg { max-height: 78vh; }
.island-inset svg { aspect-ratio: 1; max-height: 260px; }
.island figcaption { margin-top: 6px; font-size: 11px; color: var(--faint); text-align: right; }
.island figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.island .sea { fill: var(--sea-map); }
.island .mainland { fill: var(--land-mute); }
.island .land { fill: var(--sand); stroke: var(--sand-line); stroke-width: 1.2; }
.island .lake { fill: var(--lake); }
.island .coast { fill: none; stroke: var(--sea); stroke-width: 1.6; opacity: .55; }
.island .dot .hit { fill: transparent; }
.island .dot .spot { fill: var(--sea); stroke: #fff; stroke-width: 2.5; opacity: .9;
                     transition: transform .2s var(--ease); transform-box: fill-box;
                     transform-origin: center; }
.island .dot:hover .spot, .island .dot:focus-visible .spot { transform: scale(1.18); opacity: 1; }
.island .dot text, .island .labels text { font: 700 17px/1 var(--text); fill: var(--ink);
                    paint-order: stroke; stroke: var(--sand); stroke-width: 5px;
                    stroke-linejoin: round; }
.island .labels { pointer-events: none; }
.island .dot-focus .spot { fill: var(--coral); }
.island .dot-focus .ring { fill: color-mix(in srgb, var(--coral) 22%, transparent); }
.island .dot-focus text { font-size: 14px; }
.island-inset .dot .spot { stroke-width: 1.2; }

/* Живой остров (`island.js`): море и суша уходят с карты-ссылок в слой под частицами, поэтому
   сверху вниз идут точки районов с подписями, частицы, суша. Ссылки остаются теми же. */
.island-stage { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;
                border-radius: var(--r-xl); background: var(--sea-map); pointer-events: none; }
.island-stage svg, .island-stage canvas { position: absolute; left: 0; top: 0; display: block;
                width: 100%; height: 100%; max-height: none; background: none; border-radius: 0; }
.island-live > svg { position: relative; z-index: 1; background: none; }
.island-live > svg .sea, .island-live > svg .mainland, .island-live > svg .land,
.island-live > svg .lake, .island-live > svg .coast { visibility: hidden; }
.island-live .dot .spot { fill-opacity: .14; stroke-width: 1.4; stroke-opacity: .75; opacity: 1; }
.island-key, .island-note { position: absolute; z-index: 2; margin: 0; font-size: 11px;
              line-height: 1.3; pointer-events: none; }
.island-key { left: 12px; top: 12px; width: min(37%, 170px); padding: 0; list-style: none;
              display: grid; gap: 2px; }
.island-note { right: 12px; bottom: 32px; width: min(42%, 190px); color: var(--dim); }
.island-key li { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.island-key li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
                         background: var(--k); transform: translateY(-1px); }
.k0 { --k: var(--g0); } .k1 { --k: var(--g1); } .k2 { --k: var(--g2); } .k3 { --k: var(--g3); }
.k4 { --k: var(--g4); } .k5 { --k: var(--g5); } .k6 { --k: var(--g6); } .k7 { --k: var(--g7); }

.atlas-hero { display: grid; gap: 14px; }
.atlas-hero .page-top { padding-bottom: 0; }

/* Шапка группы: иллюстрация квадратом и название рядом. Иллюстрация
   квадратная — в широкой полосе её срезало бы до середины. */
.atlas-group .group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.atlas-group .group-head img { flex: none; width: 76px; height: 76px; border-radius: var(--r-m);
                               object-fit: cover; box-shadow: var(--shadow); }
.atlas-group .group-head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.atlas-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px;
              min-height: 64px; }
.atlas-tile .aicon { grid-row: 1 / span 2; }
/* В узкой плитке значок сверху: сбоку он отнимал ширину, и слова рвались посередине. */
@media (max-width: 559px) {
  .atlas-tile { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px; }
  .atlas-tile .aicon { grid-row: auto; }
}
.atlas-tile:hover { transform: translateY(-2px); }
.atlas-tile { transition: transform .25s var(--ease); }

.districts { list-style: none; margin: 0; padding: 0; display: grid;
             grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.districts li { min-width: 0; }
.districts a { display: flex; flex-direction: column; justify-content: center; min-height: 52px;
               padding: 8px 14px; border-radius: var(--r-m); background: var(--card);
               box-shadow: inset 0 0 0 1.5px var(--line); }
.districts b { font-size: 15px; overflow-wrap: anywhere; }
.districts span { font-size: 12px; color: var(--faint); }

.district-top { display: grid; gap: 14px; }

.teaser-grid { display: grid; gap: 14px; }
.atlas-teaser .island svg { max-height: 360px; }

/* ---------------------------------------------------------------- «Спросить ИИ» и поиск */

.ask-box { position: relative; z-index: 2; margin-top: 12px; padding: 14px; border-radius: 20px;
           background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow);
           color: var(--ink); }
.ask-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.ask-label .icon { color: var(--coral); width: 18px; height: 18px; }
.ask-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask-row input { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 14px; border: 0;
                 border-radius: 14px; background: var(--sunk); color: var(--ink); font: inherit; }
.ask-row input:focus { outline: 3px solid color-mix(in srgb, var(--coral) 45%, transparent); }
.ask-row .btn { height: 48px; flex: 1 0 auto; }
.ask-note { margin-top: 8px; font-size: 12px; color: var(--dim); }
.ask-box[aria-busy="true"] .btn { opacity: .75; cursor: progress; }
.ask-problem { margin: 10px 0; padding: 12px 14px; border-radius: var(--r-m);
               background: color-mix(in srgb, var(--coral) 14%, var(--card)); }
.ai-answer { margin-top: 6px; font-size: 17px; line-height: 1.62; }
.ask-page .note { margin-top: 16px; }
.cover .ask-box { margin-top: 10px; }
.cover .ask-box .ask-note { color: var(--dim); font-size: 12px; margin-top: 8px; }

.found-sec h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sec-count { font-style: normal; font-family: var(--text); font-size: 13px; font-weight: 700;
             color: var(--faint); background: var(--sunk); padding: 2px 9px; border-radius: 999px; }

/* ---------------------------------------------------------------- бегущая строка */

.ticker { margin: 14px var(--gut) 0; overflow: hidden; border-radius: 999px; background: var(--card);
          box-shadow: inset 0 0 0 1.5px var(--line); }
.ticker-track { display: flex; width: max-content; }
.ticker ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0 14px; }
.ticker li { white-space: nowrap; }
.ticker a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px;
            font-weight: 600; }
/* Без анимации — обычная лента вбок: прокручивается пальцем. */
.ticker { overflow-x: auto; scrollbar-width: none; }
.ticker::-webkit-scrollbar { display: none; }
.ticker ul[aria-hidden="true"] { display: none; }

@media (min-width: 720px) {
  .atlas-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .atlas-group .group-head img { width: 96px; height: 96px; }
  .districts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .district-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .teaser-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  .atlas-teaser .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticker { margin-left: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)));
            margin-right: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut))); }
}
@media (min-width: 1024px) {
  .atlas-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .atlas-hero .island-big svg { max-height: 82vh; }
  .districts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- движение

   Только CSS, только сверху статичной страницы: без поддержки
   `animation-timeline` или при «уменьшить движение» всё стоит на месте и
   видно сразу. Анимируются прозрачность и transform — ни один кадр не
   сдвигает раскладку (CLS остаётся нулём). */

@view-transition { navigation: auto; }
.vt-title { view-transition-name: page-title; }
.cover img, .band img { view-transition-name: hero; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

  @supports (animation-timeline: view()) {
    .reveal, .cards > li, .places > li, .atlas-grid > li, .intents > li, .districts > li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
    .cards > li:nth-child(3n+2), .places > li:nth-child(3n+2),
    .atlas-grid > li:nth-child(3n+2), .intents > li:nth-child(4n+2) { animation-range: entry 4% entry 44%; }
    .cards > li:nth-child(3n), .places > li:nth-child(3n),
    .atlas-grid > li:nth-child(3n), .intents > li:nth-child(4n+3) { animation-range: entry 8% entry 50%; }
  }
  @supports (animation-timeline: scroll()) {
    .cover img, .cover canvas { animation: drift linear both; animation-timeline: scroll(root);
                 animation-range: 0 100vh; }
  }

  .island-big .dot-pulse .spot { animation: pulse 2.8s var(--ease) infinite; }
  .island-big .dot-pulse:nth-of-type(2n) .spot { animation-delay: .9s; }
  .island-big .coast { stroke-dasharray: 1; stroke-dashoffset: 1;
                       animation: draw 2.4s var(--ease) .2s forwards; }
  .island-big .island-stage .coast { stroke-dasharray: none; animation: none; }

  /* Маршрут переезда прорисовывается прокруткой. Только одной колонкой: на широком экране
     шаги разложены колонками и общей линии у них нет. Без поддержки список просто стоит. */
  @supports (animation-timeline: view()) {
    @media (max-width: 719px) {
      .steps { position: relative; }
      .steps::before, .steps::after { content: ""; position: absolute; left: 15px; top: 30px;
                                      bottom: 30px; width: 2px; border-radius: 2px; }
      .steps::before { background: rgba(255, 255, 255, .14); }
      .steps::after { background: #7fe3dc; transform-origin: top; animation: route-draw linear both;
                      animation-timeline: view(); animation-range: cover 18% cover 72%; }
      .steps a { position: relative; z-index: 1; }
      .steps a::before { background: color-mix(in srgb, var(--deep), #fff 12%);
                         animation: route-dot linear both; animation-timeline: view();
                         animation-range: entry 60% cover 42%; }
      .steps .due a::before { background: var(--coral); }
    }
  }

  .ticker { overflow: hidden; }
  .ticker ul[aria-hidden="true"] { display: flex; }
  .ticker-track { animation: marquee 48s linear infinite; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
}

@keyframes route-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes route-dot { from { transform: scale(.82); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.08); } to { transform: translateY(6%) scale(1.14); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }

.atlas-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.atlas-jump .chip { min-height: 44px; }

/* ---------------------------------------------------------------- рубрика Атласа

   Карточка справочника мест: имя, район меткой, одна строка «чем важно»,
   адрес, ряд равных действий у нижнего края — поэтому строки сетки одной
   высоты, и телефон не «плавает» посередине карточки. Сайт — кнопкой с
   доменом в подсказке, а не путём в четыре строки. */

.place-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
         background: color-mix(in srgb, var(--sea) 12%, var(--card)); color: var(--sea-ink);
         font-size: 12px; font-weight: 700; }
.pa { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      min-height: 44px; padding: 0 8px; border-radius: 12px; background: var(--sunk);
      color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pa .icon { width: 17px; height: 17px; margin: 0; color: var(--sea-ink); }
.pa-call { background: var(--sea); color: #fff; }
.pa-call .icon { color: #fff; }
.pa:hover { filter: brightness(.97); }

.aicon-s { width: 18px; height: 18px; color: inherit; }

.know { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l);
        background: color-mix(in srgb, var(--sea) 8%, var(--card));
        box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sea) 22%, transparent); }
.know h2 { font-size: 16px; font-family: var(--text); font-weight: 800; letter-spacing: 0; }
.know-item { display: grid; gap: 4px; padding: 10px 0; }
.know-item + .know-item { border-top: 1px solid var(--line); }
.know-item b { font-size: 15px; line-height: 1.3; }
.know-item span { font-size: 14px; color: var(--dim); }
.know-item em { font-style: normal; display: inline-flex; align-items: center; gap: 4px;
                font-size: 13px; font-weight: 700; color: var(--sea-ink); }
.know-item em .icon { width: 15px; height: 15px; }

.mentions { padding: 16px; border-radius: var(--r-l); background: var(--sunk); }
.mentions h2 { font-size: 16px; font-family: var(--text); font-weight: 800; letter-spacing: 0; }
.mentions ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.mentions li { min-height: 40px; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.mentions li a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mentions li span { color: var(--faint); font-size: 13px; }

.cat-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
           border-radius: var(--r-l); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.cat-cta > .icon { color: var(--sea-ink); }
.cat-cta p { flex: 1 1 220px; font-size: 14px; color: var(--dim); }

.districts a { box-shadow: none; background: transparent; border-bottom: 1px solid var(--line);
               border-radius: 0; padding: 8px 2px; }

.island .dot-on .spot { fill: var(--coral); }

.atlas-hero ~ .cat-cta, .wrap > .cat-cta { margin-top: 32px; }
.cat-map .dot text, .cat-map .labels text { font-size: 13px; stroke-width: 4px; }

/* ---------------------------------------------------------------- одно поле и подсказки

   Ноябрь 2026, второй заход: на обложке было два поля подряд (поиск и
   «Спросить ИИ») с мелким шрифтом про лимиты. Теперь поле одно — оно и
   поиск, и вопрос; ответ ИИ — панелью над выдачей. Подсказки — свой список
   (combobox), а не системный <datalist> с треугольником и одной строкой. */

/* Обложка больше не режет содержимое: подсказки под полем выходят за её
   край. Скругление держит обёртка снимка. */
.cover { overflow: visible; }
.cover-photo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: -2; }
.cover-photo img { z-index: 0; }
.cover::before { border-radius: inherit; }

.search.omni { padding-right: 6px; }
.search.omni .btn { width: auto; padding: 0 20px; flex: none; font-weight: 800; }
.search input[type="search"]::-webkit-search-decoration,
.top-search input::-webkit-search-decoration { -webkit-appearance: none; }
input[data-suggest]::-webkit-calendar-picker-indicator { display: none !important; }

.has-suggest { position: relative; }
.suggest { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
           min-width: min(100%, 360px); max-height: min(70vh, 520px); overflow-y: auto;
           padding: 6px; border-radius: var(--r-l); background: var(--card); color: var(--ink);
           box-shadow: 0 0 0 1px var(--line), 0 18px 48px -12px rgba(0, 0, 0, .35);
           text-align: left; overscroll-behavior: contain; }
.top-search .suggest { left: auto; right: 0; width: 420px; }
.sg-group + .sg-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.sg-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
           text-transform: uppercase; color: var(--faint); }
.sg-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center;
           gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; font-size: 15px; }
.sg-item[aria-selected="true"] { background: var(--sunk); }
.sg-icon { width: 20px; height: 20px; fill: none; stroke: var(--sea-ink); stroke-width: 1.7;
           stroke-linecap: round; stroke-linejoin: round; }
.sg-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-label mark { background: none; color: inherit; font-weight: 800; }
.sg-item small { font-size: 12px; color: var(--faint); white-space: nowrap; }
.sg-ask .sg-item { font-weight: 700; }
.sg-ask .sg-icon { stroke: var(--coral); }

/* Лист поиска на телефоне: поле сверху, подсказки — на весь экран. */
.search-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-content: start;
                grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px var(--gut);
                background: var(--bg); }
.sheet-open { overflow: hidden; }
.sheet-form { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px;
              border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--sea); }
.sheet-form .icon { width: 18px; height: 18px; color: var(--faint); }
.sheet-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
                    color: var(--ink); font: inherit; font-size: 17px; }
.sheet-form input:focus { outline: none; }
.sheet-form .suggest { position: fixed; top: 72px; left: var(--gut); right: var(--gut);
                       width: auto; max-height: calc(100vh - 90px); box-shadow: none;
                       background: transparent; padding: 0; }
.sheet-close { flex: none; }

/* Панель ответа над выдачей. */
.ai-panel { margin: 16px 0 8px; padding: 18px; border-radius: var(--r-l); background: var(--card);
            box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--coral) 30%, var(--line)); }
.ai-panel h2 { display: flex; align-items: center; gap: 8px; font-family: var(--text);
               font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
               color: var(--coral-ink); }
.ai-panel h2 .icon { width: 18px; height: 18px; color: var(--coral); }
.ai-panel .ai-text { margin-top: 10px; font-size: 17px; line-height: 1.6; }
.ai-panel .ai-text p + p { margin-top: 10px; }
.ai-panel .ai-text a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; }
.ai-sources { margin: 12px 0 0; padding-left: 22px; font-size: 14px; }
.ai-sources li { margin: 4px 0; }
.ai-sources a { color: var(--sea-ink); }
.ai-get { margin-top: 12px; }
.ai-capped, .ai-problem { margin: 10px 0 12px; }
.ai-skeleton { display: grid; gap: 10px; margin-top: 14px; }
.ai-skeleton i { display: block; height: 14px; border-radius: 7px; background: var(--sunk); }
.ai-skeleton i:nth-child(2) { width: 86%; }
.ai-skeleton i:nth-child(3) { width: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .ai-skeleton i { background: linear-gradient(90deg, var(--sunk) 0%, var(--line) 50%, var(--sunk) 100%);
                   background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Бегущая строка: края гаснут, а не режут слово. */
.ticker { mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* Поле-вопрос на обложке — textarea: длинная подсказка переносится, а не
   обрезается; высота растёт по тексту там, где браузер это умеет. */
.search.omni { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.search.omni > .icon { margin-top: 13px; }
.search.omni textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; border: 0;
                        padding: 12px 0; background: transparent; color: #0f1f1d; font: inherit;
                        font-size: 16px; line-height: 1.4; resize: none; field-sizing: content; }
.search.omni textarea:focus { outline: none; }
.search.omni textarea::placeholder { color: #66716f; }
@media (max-width: 719px) {
  .search.omni { flex-wrap: wrap; }
  .search.omni textarea { flex-basis: calc(100% - 40px); min-height: 72px; }
  .search.omni .btn { flex: 1 1 100%; }
}
/* Обложка — над следующими блоками: её подсказки не должны уходить под ленту. */
.cover { z-index: 3; }
.ai-skeleton[hidden] { display: none; }

/* ---------------------------------------------------------------- правки и находки (docs/CJM.md)

   Форма сложена: на странице с фактами она не должна спорить с самими
   фактами. Раскрывается по клику (<details>), работает без скрипта. На
   пустой выдаче поиска форма вопроса раскрыта — это самый ценный сигнал. */

.capture { margin: 24px 0 8px; border-radius: var(--r-l); background: var(--card);
           box-shadow: inset 0 0 0 1.5px var(--line); }
.capture summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
                   cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.capture summary::-webkit-details-marker { display: none; }
.capture summary .icon { width: 20px; height: 20px; color: var(--sea-ink); flex: none; }
.capture summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
                          border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
                          transform: rotate(45deg) translateY(-3px); }
.capture[open] summary::after { transform: rotate(-135deg) translateX(-3px); }
.capture-form { display: grid; gap: 12px; padding: 0 16px 16px; }
.capture-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dim); }
.capture-field textarea, .capture-field input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px;
  background: var(--sunk); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; }
.capture-field textarea { min-height: 96px; resize: vertical; }
.capture-field textarea:focus, .capture-field input:focus { outline: 3px solid color-mix(in srgb, var(--sea) 40%, transparent); }
.capture-form .btn { justify-self: start; }
.capture-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.capture-reasons legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--dim); }
.capture-reasons .chip { min-height: 44px; cursor: pointer; }
.capture-reasons input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.capture-reasons input:checked + span { color: var(--bg); }
.capture-reasons .chip:has(input:checked) { background: var(--ink); color: var(--bg); box-shadow: none; }
.capture-reasons .chip:has(input:focus-visible) { outline: 3px solid var(--sea); outline-offset: 2px; }
.capture-gap { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--coral) 35%, var(--line)); }
.capture-gap summary .icon { color: var(--coral); }
.capture-gap[open] { background: color-mix(in srgb, var(--coral) 6%, var(--card)); }
/* Ловушка для ботов: не видна человеку, не попадает в фокус. */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sent-panel { margin: 16px 0 4px; padding: 18px; border-radius: var(--r-l);
              background: color-mix(in srgb, var(--sea) 10%, var(--card));
              box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sea) 35%, transparent); }
.sent-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.sent-panel h2 .icon { color: var(--sea-ink); }
.sent-panel p { margin-top: 6px; color: var(--dim); }
.sent-panel .acts { margin-top: 12px; }

/* Можно ли купаться: замеры IMA SC у пляжа. Цвет — не единственный признак:
   статус написан словами. */
.water { margin: 18px 0 6px; padding: 16px; border-radius: var(--r-l); background: var(--card);
         border: 1px solid var(--line); }
.water h2 { font: 700 18px/1.2 var(--display); margin: 0 0 10px; }
.water ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.water li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px;
            background: var(--sunk); }
.water li.w-good { background: rgba(31, 138, 91, .11); }
.water li.w-bad { background: color-mix(in srgb, var(--coral) 12%, var(--card)); }
.water li b { font-size: 15px; }
.water li.w-good b { color: #1f7a52; }
.water li.w-bad b { color: #c23a22; }
.water li span { font-size: 13px; color: var(--dim); }
.water-note { font-size: 12px; color: var(--dim); margin: 10px 0 0; line-height: 1.45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .water li.w-good b { color: #5fd39b; }
  :root:not([data-theme="light"]) .water li.w-bad b { color: #ff8a70; }
}
:root[data-theme="dark"] .water li.w-good b { color: #5fd39b; }
:root[data-theme="dark"] .water li.w-bad b { color: #ff8a70; }
.wchip { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px;
         border-radius: 99px; }
.wchip.w-good { background: rgba(31, 138, 91, .13); color: #1f7a52; }
.wchip.w-bad { background: rgba(217, 69, 43, .12); color: #c23a22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wchip.w-good { color: #5fd39b; }
  :root:not([data-theme="light"]) .wchip.w-bad { color: #ff8a70; }
}
:root[data-theme="dark"] .wchip.w-good { color: #5fd39b; }
:root[data-theme="dark"] .wchip.w-bad { color: #ff8a70; }

/* ------------------------------------------------------- внутри Telegram

   Те же страницы, что в браузере (docs/MINIAPP.md, шаг 1). Класс `tg` ставит
   `tg.js` до первой отрисовки. Шапку сайта заменяет шапка клиента с родной
   «Назад», подвал в приложении не нужен; нижние вкладки остаются — в
   Telegram своих вкладок нет. Содержимое страниц не меняется ни на строку.
   Клиенты старше 6.1 (`tg-legacy`) без родной «Назад» и сохраняют шапку. */

:root.tg:not(.tg-legacy) {
  --top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}
.tg:not(.tg-legacy) .top, .tg .foot { display: none; }
.tg:not(.tg-legacy) body { padding-top: var(--top); }
/* Отступ снизу: полноэкранный режим (Bot API 8.0) сообщает зоны своими
   переменными, остальные клиенты — через env(). Берём большее. */
.tg .tabs { bottom: calc(10px + max(env(safe-area-inset-bottom),
                                    var(--tg-safe-area-inset-bottom, 0px)
                                    + var(--tg-content-safe-area-inset-bottom, 0px))); }
.tg:not(.tg-legacy) main { padding-top: 8px; }
.tg main { padding-bottom: 16px; }
/* Окно Telegram Desktop можно растянуть шире планшета, а верхнего меню в
   приложении нет: вкладки остаются на любой ширине. */
@media (min-width: 1024px) {
  .tg .tabs { display: grid; left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
  .tg body.has-tabs { --tabs: 92px; }
}

/* Вкладка «Моё» вместо «Меню»; родная нижняя кнопка вместо вкладок (docs/MINIAPP.md). */
.tabs .tab-mine { display: none; }
.tg .tabs .tab-mine { display: grid; }
.tg .tabs .tab-menu { display: none; }
.tg .follow-bot, .tg .cat-cta { display: none; }
.tg.tg-main .tabs { display: none; }
.tg .tg-main-own { display: none; }
.tg.tg-main body.has-tabs { --tabs: 0px; }

/* ================================================================ личное
   Шаги 3–5 docs/MINIAPP.md. Весь раздел — здесь, от этой линейки до следующей:
   `.my-*` — оболочка `/my…` и её фрагменты, `.kb-*` — оглавление базы, `.ai-rate` —
   оценка ответа. Экран рабочий: строки под линейку и только два акцента, бирюза —
   действие, коралл — срок. Карточка здесь только у услуги: их сравнивают. */

[data-mine][hidden] { display: none; }
.my-top { padding-bottom: 10px; }
.my-top h1 { font-size: 24px; }
.my-back { display: inline-block; margin-bottom: 6px; font-size: 14px; font-weight: 650; color: var(--sea-ink); }
.my-back::before { content: "\2039"; margin-right: 6px; }
.my-outside { display: grid; gap: 14px; justify-items: start; padding: 22px 20px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); }
.my-outside p { color: var(--dim); max-width: 34em; }
.tg .my-outside { display: none; }
.my-body { display: none; }
.tg .my-body { display: block; }
.my-body[hidden] { display: none; }
.my-wait { display: grid; gap: 1px; border-radius: var(--r-l); overflow: hidden; }
.my-wait i { display: block; height: 62px; background: var(--card); animation: my-wait 1.4s ease-in-out infinite alternate; }
@keyframes my-wait { to { background: var(--sunk); } }
.my-fail { display: grid; gap: 12px; justify-items: start; padding: 20px; border-radius: var(--r-l); background: var(--card); }
.my-fail[hidden], .my-fail [hidden] { display: none; }
.my-fail p { color: var(--dim); }
.my-probe { font-size: 13px; color: var(--faint); }
.my-probe summary { cursor: pointer; }
.my-probe dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.my-probe dd { margin: 0; overflow-wrap: anywhere; }
.my-hello { font-size: 17px; font-weight: 650; margin-bottom: 14px; }
.my-dev { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--coral); color: var(--on-coral); font-weight: 650; }
.my-sections { padding-top: 28px; }
.my-sections h2, .my-h2 { font-size: 17px; margin-bottom: 10px; }
.my-block { margin-top: 24px; }
.my-block:first-child { margin-top: 0; }

.my-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; }
.my-row:not(:has(> i)) { grid-template-columns: 24px minmax(0, 1fr); }
.my-row > .icon { width: 22px; height: 22px; color: var(--sea-ink); }
.my-row span { display: grid; gap: 2px; min-width: 0; }
.my-row b { font-size: 16px; font-weight: 650; }
.my-row small { font-size: 13px; color: var(--dim); }
.my-row > i { font-style: normal; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.my-soon, .my-row small.my-soon { color: var(--coral-ink); font-weight: 650; }

.my-item { display: grid; gap: 10px; padding: 14px 16px; }
.my-item-main { display: grid; gap: 3px; min-width: 0; }
.my-item-main b { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.my-item-main a { color: inherit; }
.my-item-main small { font-size: 13px; color: var(--dim); }
.my-item-main p { font-size: 14px; color: var(--dim); }
.my-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.my-links { display: flex; flex-wrap: wrap; gap: 6px; }
.my-links .chip { white-space: normal; text-align: left; }
.my-again { justify-self: start; font-size: 14px; font-weight: 650; color: var(--sea-ink); }
.my-note { font-size: 14px; color: var(--dim); margin-bottom: 12px; }
.my-note[hidden] { display: none; }
.my-error { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-s); background: var(--card); color: var(--coral-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--coral); }
.my-reply { margin-top: 4px; padding-left: 10px; box-shadow: inset 1px 0 0 var(--line); }
.my-state-accepted, .my-state-done { color: var(--sea-ink) !important; font-weight: 650; }
.my-state-rejected { color: var(--coral-ink) !important; font-weight: 650; }
.my-left { font-size: 13px; color: var(--dim); margin: 2px 0 10px; }
.my-follow { margin-top: 14px; }
.my-follow form { display: contents; }
.my-mine { margin-top: 14px; }
.my-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 40px; }
.my-mine-head h2 { font-size: 17px; }
.my-strip { display: grid; gap: 2px; margin: 14px 0 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--deep); color: var(--on-deep); }
.my-strip b { font-weight: 650; }
.my-strip small { font-size: 13px; opacity: .8; }

/* План — шкала времени: засечка цветом срочности, которую посчитал Python. */
.my-line { list-style: none; margin: 0 0 16px; padding: 0 0 0 18px; display: grid; gap: 16px; box-shadow: inset 1.5px 0 0 var(--line); }
.my-loose { box-shadow: none; padding-left: 0; }
.my-tick { position: relative; display: grid; gap: 3px; }
.my-tick::before { content: ""; position: absolute; left: -22.5px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px var(--bg); }
.my-loose .my-tick::before { display: none; }
.my-tick-overdue::before, .my-tick-today::before, .my-tick-soon::before { background: var(--coral); }
.my-tick-done::before { background: var(--sea); }
.my-tick b { font-weight: 600; }
.my-tick small { font-size: 13px; color: var(--dim); }
.my-tick p { font-size: 14px; color: var(--dim); }
.my-tick-overdue .my-soon-word, .my-tick-today .my-soon-word, .my-tick-soon .my-soon-word { color: var(--coral-ink); font-weight: 650; }
.my-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.my-step > div { display: grid; gap: 3px; justify-items: start; min-width: 0; padding-top: 2px; }
.my-check { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: transparent; }
.my-check::before { content: ""; grid-area: 1 / 1; width: 26px; height: 26px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--faint); }
.my-check .icon { grid-area: 1 / 1; width: 18px; height: 18px; z-index: 1; }
.my-check[aria-checked="true"]::before { background: var(--sea); box-shadow: none; }
.my-check[aria-checked="true"] { color: #fff; }
.my-step.is-done b { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.my-step .chip { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
.my-rest { font-size: 14px; color: var(--dim); margin: 6px 0 12px; }
.my-plan-title { font-size: 20px; margin-bottom: 8px; }
.my-preview { margin-top: 18px; }
.my-stamp { font-size: 13px; color: var(--faint); margin-top: 8px; }
.my-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.my-switch p { flex: 1 1 200px; font-size: 14px; color: var(--dim); }
.my-anchor { margin-bottom: 14px; }
.my-anchor label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }

.my-field input, .my-field textarea, .my-anchor input { width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.my-field input:focus-visible, .my-field textarea:focus-visible, .my-anchor input:focus-visible { outline: 2px solid var(--sea); outline-offset: 1px; }
.my-form { display: grid; gap: 16px; }
.my-form [data-main-hide][hidden] { display: none; }
.my-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.my-count { justify-self: end; font-size: 12px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.my-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.my-topics legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.my-topics label { position: relative; }
.my-topics input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.my-topics span { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.my-topics input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.my-topics input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }

.my-sheet { display: grid; gap: 6px; padding: 16px 18px; margin-bottom: 14px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); justify-items: start; }
.my-block + .my-sheet { margin-top: 24px; }
.my-sheet h2 { font-size: 14px; font-weight: 650; color: var(--dim); font-family: var(--text); }
.my-sheet .my-note { margin: 0; }
.my-big { font-size: 20px; font-weight: 650; }
.my-code { font-size: 13px; color: var(--dim); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.my-packs { display: grid; gap: 8px; }
.my-packs .btn { width: 100%; height: auto; min-height: 48px; }
.my-move { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; padding: 10px 16px; font-size: 14px; font-variant-numeric: tabular-nums; }
.my-move span:first-child { color: var(--faint); }

.my-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gut) * -1) 8px; padding: 2px var(--gut); scrollbar-width: none; }
.my-chips::-webkit-scrollbar { display: none; }
.my-add { margin: 6px 0 14px; }
.my-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.my-service { gap: 8px; }
.my-service p { -webkit-line-clamp: unset; display: block; }
.my-service small { font-weight: 600; color: var(--dim); }
.my-marks { display: flex; gap: 6px; }
.my-marks span { font-size: 12px; font-weight: 700; color: var(--coral-ink); }
.my-details { font-size: 14px; color: var(--dim); white-space: pre-line; }
.my-contact { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.my-contact a, .my-details a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 2px; }
.my-report summary { font-size: 13px; color: var(--faint); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.my-report .my-acts { margin-top: 6px; }

.kb-tree { display: grid; gap: 26px; padding-top: 14px; }
.kb-group h2 { font-size: 19px; }
.kb-group > p { font-size: 14px; color: var(--dim); margin: 4px 0 0; }
.kb-group .list { margin-top: 10px; }
.kb-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-weight: 650; color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; }

.ai-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-rate p { flex: 1 1 100%; font-size: 14px; color: var(--dim); }

@media (min-width: 720px) {
  .my-packs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .my-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .my-wait i { animation: none; }
}

/* ================================================================ афиша 2.0
   Весь раздел — здесь, от этой линейки до закрывающей: `.af2-*` — список и управление,
   `.ev2-*` — карточка события, `.run2-*` — долгие программы, `.evp-*` — страница события.
   Первым экраном по-прежнему список, но живой: у дня крупная карточка с названием поверх
   картинки, дальше строки с миниатюрой, время — опора взгляда. Рисунков в теме несколько
   (`afisha_art.py`), снимок площадки важнее рисунка. На телефоне одна липкая полоса, на широком —
   мозаика дня и липкая колонка с календарём. */

.k-comedy { --a2: #e8912d; } .k-sport { --a2: #2c9fd6; } .k-wellness { --a2: #5aa469; } .k-courses { --a2: #7d8b99; }
.ev-note { margin-top: 4px; color: var(--dim); }
.k-party { --a2: #e5484d; } .k-nature { --a2: #22b38a; } .k-culture { --a2: #8a63e0; }
.k-community { --a2: var(--coral); } .k-music { --a2: #2c7fd6; } .k-kids { --a2: #e0a72d; } .k-fair { --a2: #d97a2b; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Заголовок и единственное число на странице. Крошки на телефоне прячем: первый экран — список. */
.af2-top { padding: 10px 0 6px; }
/* На телефоне заголовку и числу и так тесно, настроение там держит крупная карточка. */
.af2-skyline { display: none; flex: 1 1 0; min-width: 0; max-width: 280px; height: 66px; margin: -32px 0 -2px auto; pointer-events: none; fill: none;
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.af2-skyline .sun { fill: var(--coral); opacity: .55; }
.af2-skyline .hill { fill: color-mix(in srgb, var(--sea) 14%, transparent); }
.af2-skyline .steel path { stroke: color-mix(in srgb, var(--sea-ink) 62%, transparent); stroke-width: 1.1; }
.af2-skyline .wave { stroke: color-mix(in srgb, var(--sea) 42%, transparent); stroke-width: 1.2; }
.af2-top .crumbs { display: none; }
.af2-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; }
.af2-top h1 { font-size: 21px; line-height: 1.16; text-wrap: balance; }
/* Заголовок подборки длинный, потому что его ищут; на телефоне он не должен съедать первый экран. */
.af2-title.is-long h1 { font-size: 17px; line-height: 1.22; }
.af2-count { font-size: 13px; font-weight: 650; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Лента дней и кнопка фильтров: одна полоса, под пальцем. Лента уходит за край, и обрез показывает,
   что там ещё есть. */
.af2-nav { position: sticky; top: var(--top); z-index: 20; display: flex; align-items: center; gap: 8px;
           height: 56px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 0 0; background: var(--bg);
           box-shadow: 0 1px 0 var(--line); }
.af2-strip { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
             padding: 0 12px 0 var(--gut);
             -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
             mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
.af2-strip::-webkit-scrollbar { display: none; }
.af2-strip a { flex: none; display: grid; justify-items: center; align-content: center; min-width: 42px; height: 46px;
               padding: 0 9px; border-radius: 12px; color: var(--ink); transition: background .2s var(--ease); }
.af2-strip a:hover { background: var(--sunk); }
.af2-strip small { font-size: 11px; line-height: 1.2; font-weight: 600; color: var(--dim); white-space: nowrap;
                   font-variant-numeric: tabular-nums; }
.af2-strip b { font-size: 14.5px; line-height: 1.2; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.af2-strip .is-we small { color: var(--coral-ink); }
.af2-strip .is-empty b { color: var(--faint); font-weight: 500; }
.af2-strip a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.af2-strip a[aria-current="page"] small, .af2-strip a[aria-current="page"] b { color: inherit; }
.af2-open { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 11px;
            border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
            font-size: 14px; font-weight: 650; }
.af2-open .icon { width: 19px; height: 19px; color: var(--sea-ink); }
.af2-open i { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
              background: var(--sea); color: var(--on-sea); font-style: normal; font-size: 12px; font-weight: 750; }
.af2-open:has(i) { box-shadow: inset 0 0 0 1.5px var(--sea); }

/* Выбранные фильтры: нажатие снимает. */
.af2-active { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
              margin: 0 calc(var(--gut) * -1); padding: 10px var(--gut) 0; }
.af2-active::-webkit-scrollbar { display: none; }
.af2-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 8px 0 12px;
            border-radius: 99px; background: color-mix(in srgb, var(--sea) 14%, transparent); color: var(--sea-ink);
            font-size: 13.5px; font-weight: 650; }
.af2-chip .icon { width: 15px; height: 15px; }
.af2-clear { flex: none; padding: 8px 4px; font-size: 13.5px; font-weight: 600; color: var(--dim);
             text-decoration: underline; text-underline-offset: 3px; }

/* День. */
.af2-day { padding-top: 12px; }
.af2-day + .af2-day, .af2-runs + .af2-day, .af2-oursline + .af2-day { padding-top: 22px; }
.af2-day .day-head { margin-bottom: 7px; justify-content: space-between; }
.af2-day .day-head h2 { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.af2-day .day-head span { display: none; font-size: 13px; font-weight: 600; color: var(--dim); white-space: nowrap; }

/* Карточка события. Строка: миниатюра, строка времени с ценой и билетом, название, зал. Где места
   хватает (`@container`), день становится мозаикой: карточка стоит и в узких блоках. */
.ev2-wrap { container: ev2 / inline-size; }
.ev2-list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); background: var(--card);
            box-shadow: var(--shadow); overflow: hidden; }
.ev2-li { min-width: 0; }
.ev2-li + .ev2-li { box-shadow: inset 0 1px 0 var(--line); }
.ev2 { position: relative; display: grid; grid-template-columns: 76px auto minmax(0, 1fr); grid-template-rows: auto auto 1fr;
       grid-template-areas: "art when foot" "art main main" "art meta meta"; column-gap: 12px; min-height: 96px;
       padding: 10px 12px; transition: background .2s var(--ease); }
.ev2:has(.ev2-link):hover { background: color-mix(in srgb, var(--sunk) 55%, transparent); }
/* Рисунок на миниатюре крупнее: нижняя треть у него тёмная, под заголовок крупной карточки. */
.ev2-art { grid-area: art; align-self: start; width: 76px; height: 76px; border-radius: 13px; overflow: hidden;
           background: color-mix(in srgb, var(--a2, var(--sea)) 26%, var(--sunk)); }
.ev2-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(1.22);
               transform-origin: 50% 26%; transition: transform .5s var(--ease); }
.ev2-art.is-photo img { object-position: 50% 50%; transform: none; }
.ev2:has(.ev2-link):hover .ev2-art img { transform: scale(1.3); }
.ev2:has(.ev2-link):hover .ev2-art.is-photo img { transform: scale(1.06); }
.ev2-when { grid-area: when; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.ev2-time { font: 700 15px/1.3 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ev2-day { font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--dim); }
.ev2-glyph { color: var(--a2, var(--sea-ink)); }
.ev2-glyph .icon { width: 20px; height: 20px; display: block; }
.ev2-main { grid-area: main; margin-top: 2px; min-width: 0; }
.ev2 h3 { font: 650 15.5px/1.24 var(--text); letter-spacing: -.005em; overflow-wrap: anywhere; display: -webkit-box;
          -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev2-link { display: block; color: inherit; }
.ev2-link::after { content: ""; position: absolute; inset: 0; }
.ev2-link:hover h3 { color: var(--sea-ink); }
.ev2-link:focus-visible { outline: none; }
.ev2-link:focus-visible::after { outline: 3px solid var(--sea); outline-offset: -3px; border-radius: var(--r-s); }
.ev2-note { margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--dim); display: -webkit-box;
            -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ev2-meta { grid-area: meta; display: flex; flex-wrap: nowrap; gap: 0 6px; margin-top: 2px; font-size: 12.5px; line-height: 1.35;
            color: var(--dim); min-width: 0; }
.ev2-meta span { flex: none; max-width: 100%; white-space: nowrap; }
.ev2-meta span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev2-meta span + span::before { content: "·"; margin-right: 6px; color: var(--faint); }
.ev2-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 8px; min-width: 0; min-height: 22px; }
.ev2-price { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev2-price.is-free { padding: 2px 8px; border-radius: 99px; background: var(--sea); color: var(--on-sea); font-size: 11.5px; }
/* Тема на строке видна по картинке; подпись остаётся для чтения вслух и на крупной карточке. */
.ev2-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.ev2-tag .icon { display: none; width: 15px; height: 15px; color: var(--a2, var(--sea-ink)); }
.ev2-tag > span, .ev2-act:not(.is-ticket) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Билет поверх ссылки всей строки. Поле нажатия шире самой надписи. */
.ev2-act { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
           min-height: 22px; font-size: 12.5px; font-weight: 700; color: var(--sea-ink); white-space: nowrap; }
.ev2-act::before { content: ""; position: absolute; inset: -11px -8px; }
.ev2-act .icon { width: 14px; height: 14px; }
.ev2-act:hover { text-decoration: underline; text-underline-offset: 3px; }
.ev2-act.is-ticket { padding: 0 9px; border-radius: 99px; background: color-mix(in srgb, var(--sea) 13%, transparent); }
.ev2-credits { margin-top: 6px; padding: 0 4px; font-size: 11px; line-height: 1.4; color: var(--faint); }
.ev2-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Крупная карточка дня: название поверх картинки. У рисунков низ и так тёмный, а снимок темнит
   подложка: белый текст читается на любой картинке. */
.ev2-li.is-lead .ev2 { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
                       grid-template-areas: "when foot" ". ." "main main" "meta meta"; min-height: 206px; padding: 12px 14px 12px;
                       color: #fff; isolation: isolate; overflow: hidden; background: #0d3b37; }
.ev2-li.is-lead .ev2-art { position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border-radius: 0; }
.ev2-li.is-lead .ev2-art img, .ev2-li.is-lead .ev2:hover .ev2-art img { object-position: 50% 42%; transform: none; }
.ev2-li.is-lead .ev2-art::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(6 32 30 / .32) 0, rgb(6 32 30 / 0) 30%, rgb(6 32 30 / .62) 50%, rgb(6 32 30 / .86) 68%, rgb(6 32 30 / .95) 100%); }
.ev2-li.is-lead .ev2-when { justify-self: start; align-self: start; align-items: center; padding: 3px 10px; border-radius: 99px; background: rgb(255 255 255 / .94); color: #0b2a27; }
.ev2-li.is-lead .ev2-day { color: inherit; }
.ev2-li.is-lead .ev2-time { font-size: 14px; }
.ev2-li.is-lead .ev-soon { color: #b23a1f; }
.ev2-li.is-lead .ev2-main { margin: 0; }
.ev2-li.is-lead h3 { color: #fff; font-size: 20px; line-height: 1.18; font-weight: 700; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.ev2-li.is-lead .ev2-link:hover h3 { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ev2-li.is-lead .ev2-note { margin-top: 3px; color: rgb(255 255 255 / .88); }
.ev2-li.is-lead .ev2-meta { margin-top: 3px; font-size: 13px; color: rgb(255 255 255 / .88); }
.ev2-li.is-lead .ev2-meta span + span::before { color: rgb(255 255 255 / .6); }
.ev2-li.is-lead .ev2-foot { align-self: start; gap: 4px 6px; }
.ev2-li.is-lead .ev2-price { padding: 3px 9px; border-radius: 99px; background: rgb(6 32 30 / .68); color: #fff; font-size: 12px; }
.ev2-li.is-lead .ev2-price.is-free { background: var(--sea); color: var(--on-sea); }
.ev2-li.is-lead .ev2-act { min-height: 26px; padding: 0 10px; border-radius: 99px; background: rgb(255 255 255 / .94); color: #0b2a27; }
.ev2-li.is-lead .ev2-act > span { position: static; width: auto; height: auto; clip-path: none; }
.ev2-li.is-lead .ev2-tag { display: none; }

.ev-soon { font-size: 11px; line-height: 1.2; font-weight: 700; color: var(--sea-ink); }
.ev-soon.is-now { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--coral-ink); }
.ev-soon.is-now::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: currentColor;
                          animation: ev-pulse 1.6s var(--ease) infinite; }
.ev-soon.is-off { display: none; }
@keyframes ev-pulse { 50% { opacity: .35; } }
/* Уже закончилось сегодня: остаётся в списке, но взгляд на нём не задерживается. */
.ev2-over { opacity: .6; }

/* Своя встреча — коралл, как везде на сайте: это наше. */
.ev2-ours { background: color-mix(in srgb, var(--coral) 11%, var(--card)); }
.ev2-ours .ev2-time, .ev2-ours .ev2-tag { color: var(--coral-ink); }
.ev2-ours .ev2-tag > span { position: static; width: auto; height: auto; clip-path: none; font-weight: 700; font-size: 12px; }
.ev2-going { height: 28px; padding: 0 10px; font-size: 13px; }
.ev2-going .icon { width: 15px; height: 15px; }

/* Широко: мозаика дня. Крупная карточка на две трети, рядом две поменьше тем же приёмом, остальное
   строками в две колонки. Строки не шире, а плотнее: ширина уходит в композицию. */
@container ev2 (min-width: 620px) {
  .ev2-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; border-radius: 0; background: none;
              box-shadow: none; overflow: visible; }
  .ev2-li, .ev2-li + .ev2-li { grid-column: span 3; display: grid; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
  .ev2-list:not(.has-lead) .ev2-li:last-child:nth-child(odd), .has-lead .ev2-li:last-child:nth-child(even):not(.is-second) { grid-column: 1 / -1; }
  .ev2-li.is-lead { grid-column: span 4; grid-row: span 2; }
  .ev2-li.is-lead:only-child { grid-column: 1 / -1; }
  .ev2-li.is-lead .ev2 { min-height: 300px; padding: 16px 18px; }
  .ev2-li.is-lead:only-child .ev2 { min-height: 280px; }
  .ev2-li.is-lead h3 { font-size: 27px; line-height: 1.14; }
  .ev2-li.is-lead .ev2-note { font-size: 14.5px; }
  .ev2-li.is-lead .ev2-meta { font-size: 14px; }
  .ev2-li.is-lead .ev2-tag { display: inline-flex; padding: 3px 9px; border-radius: 99px; background: rgb(6 32 30 / .68); color: #fff; }
  .ev2-li.is-lead .ev2-tag .icon { display: block; color: inherit; }
  .ev2-li.is-lead .ev2-tag > span { position: static; width: auto; height: auto; clip-path: none; }
  .ev2-li.is-second { grid-column: span 2; }
  .ev2-li.is-second .ev2 { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
                           grid-template-areas: "when foot" ". ." "main main" "meta meta"; min-height: 145px; padding: 10px 12px;
                           color: #fff; isolation: isolate; background: #0d3b37; }
  .ev2-li.is-second .ev2-art { position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border-radius: 0; }
  .ev2-li.is-second .ev2-art img, .ev2-li.is-second .ev2:hover .ev2-art img { object-position: 50% 40%; transform: none; }
  .ev2-li.is-second .ev2-art::after { content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgb(6 32 30 / .3) 0, rgb(6 32 30 / 0) 30%, rgb(6 32 30 / .68) 62%, rgb(6 32 30 / .94) 100%); }
  .ev2-li.is-second .ev2-when { justify-self: start; align-self: start; align-items: center; padding: 2px 9px; border-radius: 99px; background: rgb(255 255 255 / .94); color: #0b2a27; }
  .ev2-li.is-second .ev2-day { color: inherit; }
  .ev2-li.is-second .ev2-time { font-size: 13px; }
  .ev2-li.is-second .ev-soon { color: #b23a1f; }
  .ev2-li.is-second h3 { color: #fff; font-size: 15px; line-height: 1.2; text-shadow: 0 1px 10px rgb(0 0 0 / .4); }
  .ev2-li.is-second .ev2-link:hover h3 { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .ev2-li.is-second .ev2-note { display: none; }
  .ev2-li.is-second .ev2-meta { color: rgb(255 255 255 / .86); }
  .ev2-li.is-second .ev2-meta span + span::before { color: rgb(255 255 255 / .6); }
  .ev2-li.is-second .ev2-foot { align-self: start; }
  .ev2-li.is-second .ev2-price { padding: 2px 8px; border-radius: 99px; background: rgb(6 32 30 / .68); color: #fff; font-size: 11.5px; }
  .ev2-li.is-second .ev2-price.is-free { background: var(--sea); color: var(--on-sea); }
  .ev2-li.is-second .ev2-act { padding: 0 8px; border-radius: 99px; background: rgb(255 255 255 / .94); color: #0b2a27; }
}

/* Движение: класс `af-motion` ставит `portal.js`, только где движение уместно (те же правила, что
   у воды на главной). Без него и без поддержки браузера всё стоит на месте и ничего не теряет.
   Трогаем только transform и opacity картинок: раскладка не сдвигается ни на пиксель. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .af-motion .ev2-li.is-lead .ev2-art img, .af-motion .ev2-li.is-second .ev2-art img, .af-motion .evt-art img {
      height: 112%; animation: af-drift linear both; animation-timeline: view(); }
    .af-motion .ev2-li:not(.is-lead, .is-second) .ev2-art { animation: af-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes af-drift { from { transform: translateY(-10.7%); } to { transform: translateY(0); } }
    @keyframes af-rise { from { opacity: .35; } to { opacity: 1; } }
  }
}

.af2-empty { display: grid; margin-top: 12px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); overflow: hidden; color: var(--dim); }
.af2-empty-art { aspect-ratio: 2.4 / 1; background: color-mix(in srgb, var(--sea) 22%, var(--sunk)); }
.af2-empty-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.af2-empty-text { display: grid; justify-items: start; gap: 12px; padding: 14px 16px 16px; }
.af2-empty-text p { color: var(--ink); font-size: 15.5px; line-height: 1.4; }
.af2-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Выходные под списком будней: своя полоса, вне счёта. Вбок на телефоне, тремя карточками на широком. */
.af2-next { margin-top: 24px; }
.af2-next-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.af2-next-head h2 { font-size: 17px; line-height: 1.2; }
.af2-next-head a { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; font-size: 13.5px; font-weight: 650; color: var(--sea-ink); white-space: nowrap; }
.af2-next-head .icon { width: 16px; height: 16px; }
.evt-row { list-style: none; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 248px);
           gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: var(--gut); }
.evt-row::-webkit-scrollbar { display: none; }
.evt-row li { scroll-snap-align: start; min-width: 0; }
.evt { position: relative; isolation: isolate; display: grid; align-content: end; gap: 2px; height: 206px; padding: 12px; border-radius: var(--r-m); overflow: hidden;
       color: #fff; background: #0d3b37; box-shadow: var(--shadow); }
.evt-art { position: absolute; inset: 0; z-index: -1; }
.evt-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 32 30 / 0) 32%, rgb(6 32 30 / .72) 64%, rgb(6 32 30 / .94) 100%); }
.evt-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.evt-when { justify-self: start; margin-bottom: 4px; padding: 2px 9px; border-radius: 99px; background: rgb(255 255 255 / .94); color: #0b2a27; font-size: 12px; font-weight: 700; }
.evt b { font-size: 15.5px; line-height: 1.22; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evt small { font-size: 12.5px; color: rgb(255 255 255 / .86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Своя встреча не в показанных днях: тонкая подписанная строка. */
.af2-oursline { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
                margin-top: 10px; padding: 10px 12px; border-radius: var(--r-m); font-size: 14px; line-height: 1.3;
                background: color-mix(in srgb, var(--coral) 11%, var(--card)); }
.af2-oursline > .icon { color: var(--coral-ink); }
.af2-oursline > .icon:last-child { width: 18px; height: 18px; }
.af2-oursline b { color: var(--coral-ink); font-weight: 750; }
.af2-oursline small { display: block; font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Выставки и долгие программы: свёрнуты, число своё. */
.af2-runs { margin-top: 10px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.af2-runs summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 12px;
                    font-size: 14.5px; font-weight: 650; cursor: pointer; }
.af2-runs summary::-webkit-details-marker { display: none; }
.af2-runs summary .icon { width: 20px; height: 20px; color: var(--sea-ink); }
.af2-runs summary i { font-style: normal; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.af2-runs summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border: solid var(--dim);
                           border-width: 0 1.8px 1.8px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.af2-runs[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.af2-sub { padding: 0 14px 10px; color: var(--dim); font-size: 13px; }
.run2-list { list-style: none; margin: 0; padding: 0; display: grid; }
.run2-list li { box-shadow: inset 0 1px 0 var(--line); }
.run2 { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 14px 8px 12px; min-height: 60px; }
.run2-art { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--sea) 20%, var(--sunk)); }
.run2-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(1.22); transform-origin: 50% 26%; }
.run2-art.is-photo img { object-position: 50% 50%; transform: none; }
.af2-runs .ev2-credits { padding: 0 14px 10px; }
.run2:hover b { color: var(--sea-ink); }
.run2-text { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.run2-text b { font-size: 14.5px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run2-text small { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run2-until { font-size: 12px; font-weight: 700; color: var(--sea-ink); text-align: right; max-width: 8.5em; line-height: 1.25; }

/* Фильтры. Закрыт — невидим и недоступен с клавиатуры. Без скрипта открывается якорем (`:target`),
   со скриптом — классом, тогда работают ловушка фокуса и Esc (`portal.js`). */
.af2-panel { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none;
             transition: visibility 0s linear .28s; }
.af2-panel:target, .af2-panel.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.af2-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .28s var(--ease); }
.af2-panel:target .af2-scrim, .af2-panel.is-open .af2-scrim { opacity: 1; }
.af2-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh;
             max-width: 620px; margin: 0 auto; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--bg);
             transform: translateY(100%); transition: transform .28s var(--ease); }
.af2-panel:target .af2-sheet, .af2-panel.is-open .af2-sheet { transform: none; }
.af2-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 0 var(--gut); }
.af2-sheet-head h2 { font-size: 17px; }
.af2-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--dim); }
.af2-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.af2-groups { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut) 12px; }
.af2-facet { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.af2-facet legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--dim); }
.af2-facet > div { display: flex; flex-wrap: wrap; gap: 6px; }
.af2-opt { position: relative; cursor: pointer; }
.af2-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.af2-opt span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: 99px; background: var(--card);
                box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 600;
                transition: background .15s var(--ease), color .15s var(--ease); }
.af2-opt:hover span { box-shadow: inset 0 0 0 1.5px var(--sea); }
.af2-opt input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.af2-opt input:focus-visible + span { outline: 3px solid var(--sea); outline-offset: 2px; }
/* Районы — только Флорипы: выбран другой город, и группы нет. */
.af2-form:has(input[name="c"]:checked:not([value=""])) .af2-facet-r { display: none; }
.af2-apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px;
             padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--line); }
.af2-apply .btn { height: 46px; width: 100%; }
.af2-cal { display: none; }
html.af2-locked { overflow: hidden; }

/* Подборки и площадки: один блок внизу, обычные ссылки. */
.af2-links { margin-top: 32px; padding-top: 22px; box-shadow: 0 -1px 0 var(--line); }
.af2-links > h2 { font-size: 18px; }
.af2-about { margin-top: 8px; max-width: 68ch; font-size: 14px; line-height: 1.5; color: var(--dim); }
.af2-link-cols { display: grid; gap: 18px; margin-top: 16px; }
.af2-link-cols h3 { font: 700 13px/1.3 var(--text); color: var(--dim); margin-bottom: 4px; }
.af2-link-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
.af2-link-cols a { display: inline-flex; align-items: center; min-height: 34px; font-size: 14.5px; font-weight: 550; color: var(--sea-ink);
                   text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sea) 35%, transparent);
                   text-underline-offset: 3px; }
.af2-link-cols a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.af2-link-cols small { margin-left: 6px; font-size: 12.5px; color: var(--dim); }
.af2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af2-chips .chip { min-height: 40px; flex: 0 1 auto; max-width: 100%; white-space: normal; }
.af2-cut { margin-top: 14px; }

/* Подписка: тонко и по размеру, это не конец страницы, а её продолжение. */
.join-slim { margin-top: 24px; padding: 16px; border-radius: var(--r-m); }
.join-slim h2 { font-size: 16px; line-height: 1.25; max-width: none; }
.join-slim p { margin-top: 4px; font-size: 13.5px; line-height: 1.4; }
.join-slim .acts { margin-top: 12px; flex-wrap: nowrap; gap: 6px; }
.join-slim .acts .btn { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 10px; font-size: 13.5px; white-space: nowrap; }
.join-slim .acts .icon { display: none; }
.af2-main .capture-inbox { margin-top: 12px; }

/* Страница события. Телефон: картинка полосой, название, факты, действие: полоса низкая, чтобы
   цена и кнопка не уехали за первый экран. Шире — в левой колонке, рядом с кнопкой. */
.evp-art { position: relative; margin: 0; height: 132px; border-radius: var(--r-m); overflow: hidden; background: #0d3b37; }
.evp-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.evp-art figcaption { position: absolute; right: 8px; bottom: 6px; max-width: calc(100% - 16px); padding: 1px 7px; border-radius: 6px; font-size: 11px; line-height: 1.5;
                      background: rgb(6 32 30 / .68); color: rgb(255 255 255 / .92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evp-art figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.evp-crumbs { padding-bottom: 0; }
.evp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.evp-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.evp-lead, .evp-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.evp-info h1 { font-size: 26px; line-height: 1.12; overflow-wrap: anywhere; }
.evp-original { margin-top: -8px; color: var(--faint); font-size: 14px; }
.evp-past { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
            border-radius: 99px; background: var(--sunk); color: var(--dim); font-weight: 750; font-size: 13px; }
.evp-past .icon { width: 16px; height: 16px; }
.evp-facts { list-style: none; margin: 0; padding: 4px 16px; display: grid; border-radius: var(--r-m);
             background: var(--card); box-shadow: var(--shadow); }
.evp-facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 0;
                align-items: start; }
.evp-facts li + li { border-top: 1px solid var(--line); }
.evp-facts .icon { color: var(--sea-ink); margin-top: 1px; }
.evp-facts div { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.evp-facts b { font-weight: 700; overflow-wrap: anywhere; }
.evp-facts a b { color: var(--sea-ink); text-decoration: underline; text-decoration-thickness: 1.5px;
                 text-underline-offset: 3px;
                 text-decoration-color: color-mix(in srgb, var(--sea) 40%, transparent); }
.evp-facts small { font-size: 14px; color: var(--dim); }
.evp-price { font-weight: 750; }
.evp-price.is-free { padding: 3px 11px; border-radius: 99px; background: var(--sea); color: var(--on-sea); font-size: 14px; }
.evp-cta { width: 100%; height: 52px; font-size: 17px; }
.evp-cta .icon { width: 18px; height: 18px; }
.evp-source { margin-top: -6px; font-size: 13px; color: var(--faint); text-align: center; }
.evp-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.evp-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
           min-height: 64px; padding: 8px 6px; border: 0; border-radius: var(--r-m); background: var(--card);
           box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 700 14px/1.2 var(--text);
           text-align: center; cursor: pointer; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.evp-act:hover { box-shadow: inset 0 0 0 1.5px var(--sea); }
.evp-act:active { transform: scale(.97); }
.evp-act .icon { color: var(--sea-ink); }
.evp-act span { display: grid; }
.evp-act small { font-size: 11px; font-weight: 600; opacity: .85; }
.evp-act.is-going { background: var(--coral); color: var(--on-coral); box-shadow: none; }
.evp-act.is-going .icon { color: inherit; }
.evp-more { padding-top: 30px; }
.evp-back { margin-top: 22px; }

/* Страница события как посадочная: «Коротко», «Где это», подборки. */
.evp-summary { margin-top: 26px; padding: 16px; border-radius: var(--r-m); background: var(--card);
               box-shadow: var(--shadow); display: grid; gap: 8px; }
.evp-summary h2 { font-size: 17px; }
.evp-summary p { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.evp-summary-source { color: var(--dim); font-size: 14px; }
.evp-summary-source a { color: var(--sea-ink); text-decoration: underline; }
.evp-dates { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.evp-dates li { padding: 7px 12px; border-radius: 99px; background: var(--card);
                box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.evp-where { padding-top: 30px; }
.evp-where-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px;
                  border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.evp-where-card:has(.locator) { grid-template-columns: 84px minmax(0, 1fr); }
.evp-where-text { display: grid; gap: 4px; min-width: 0; align-content: start; }
.evp-where-text h2 { font-size: 17px; margin-bottom: 2px; }
.evp-where-text p { font-size: 14px; color: var(--dim); overflow-wrap: anywhere; }
.evp-where-text a { color: var(--sea-ink); }
.evp-where-text p.evp-where-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.evp-where-name a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.evp-where-about { margin-top: 4px; }
.evp-where-acts { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 4px; }
.evp-where-acts a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
                    font-size: 14px; font-weight: 600; }
.evp-where-acts .icon { width: 18px; height: 18px; }
.evp-where-near { font-size: 15px; margin: 18px 0 10px; }
.evp-links { margin-top: 26px; }
.pl-events-all { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--sea-ink); }

@media (min-width: 720px) {
  .af2-top .crumbs { display: flex; }
  .af2-day .day-head span { display: inline; }
  .af2-top h1, .af2-title.is-long h1 { font-size: 30px; line-height: 1.16; }
  .af2-title { flex-wrap: nowrap; align-items: flex-end; }
  .af2-title h1 { flex: 0 1 auto; min-width: 0; }
  .af2-skyline { display: block; }
  .af2-next-head h2 { font-size: 19px; }
  .af2-empty { grid-template-columns: 220px minmax(0, 1fr); align-items: center; }
  .af2-empty-art { aspect-ratio: auto; height: 100%; min-height: 140px; }
  .evp-art { height: 210px; }
  .af2-link-cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
  .af2-link-cols ul { display: grid; }
  .af2-link-cols small { display: block; margin: -4px 0 4px; }
  .join-slim { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
  .join-slim h2 { grid-column: 1; }
  .join-slim p { grid-column: 1; }
  .join-slim .acts { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .join-slim .acts .btn { padding: 0 14px; font-size: 14.5px; }
  .join-slim .acts .icon { display: block; width: 18px; height: 18px; }
  .join-slim > :not(h2, p, .acts) { grid-column: 1 / -1; }
  .evp-info h1 { font-size: 34px; }
}
@media (min-width: 960px) {
  .evp-info { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; align-items: start; padding-top: 8px; }
  .evp-side { position: sticky; top: calc(var(--top) + 16px); }
  .evp-info h1 { font-size: 38px; }
  .evp-art { height: 260px; }
  .evt-row { margin: 0; padding: 2px 0 6px; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
}
/* Широкий экран: список и липкая колонка с календарём и фильтрами. Лента не нужна: всё сразу на виду. */
@media (min-width: 1100px) {
  .af2-body { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 32px; align-items: start; }
  .af2-nav { display: none; }
  .af2-main { min-width: 0; }
  .af2-panel { position: sticky; inset: auto; top: calc(var(--top) + 12px); z-index: 1; visibility: visible; pointer-events: auto;
               max-height: calc(100vh - var(--top) - 24px); overflow-y: auto; margin-top: 14px; border-radius: var(--r-m);
               background: var(--card); box-shadow: var(--shadow); transition: none; scrollbar-width: thin; }
  .af2-scrim, .af2-close { display: none; }
  .af2-sheet { position: static; max-height: none; max-width: none; margin: 0; padding: 14px; border-radius: 0; background: none; transform: none; transition: none; }
  .af2-sheet-head { padding: 8px 0 0; }
  .af2-sheet-head h2 { font-size: 15px; }
  .af2-groups { overflow: visible; padding: 0 0 12px; }
  .af2-facet { margin-top: 10px; }
  .af2-facet legend { margin-bottom: 4px; font-size: 12.5px; }
  .af2-facet > div { gap: 4px; }
  .af2-opt span { min-height: 30px; padding: 0 10px; font-size: 13px; background: var(--bg); }
  .af2-apply { padding: 12px 0 0; }
  .af2-apply .btn { height: 40px; }
  /* Скрипт применяет фильтр по нажатию мышью; с клавиатуры кнопка остаётся. */
  .af2-form.is-auto .af2-apply { display: none; }
  .af2-form.is-auto:has(input:focus-visible) .af2-apply, .af2-form.is-auto .af2-apply:focus-within { display: grid; }
  .af2-cal { display: block; }
  .af2-windows { display: grid; grid-template-columns: repeat(4, auto); gap: 2px; padding: 3px; border-radius: 12px; background: var(--sunk); }
  .af2-windows a { display: grid; place-items: center; min-height: 34px; padding: 0 6px; border-radius: 10px; font-size: 12.5px; font-weight: 650; color: var(--dim); white-space: nowrap; }
  .af2-windows a:hover { color: var(--ink); }
  .af2-windows a[aria-current="page"] { background: var(--ink); color: var(--bg); }
  .af2-cal table { width: 100%; margin-top: 10px; border-collapse: collapse; table-layout: fixed; }
  .af2-cal th { padding-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--dim); text-align: center; }
  .af2-cal td { padding: 1px 0; text-align: center; vertical-align: top; font-variant-numeric: tabular-nums; }
  .af2-cal td > a, .af2-cal td > span { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; font-size: 13px; }
  .af2-cal td > span { color: var(--faint); }
  .af2-cal td.is-past > span { opacity: .5; }
  .af2-cal td > a { font-weight: 700; background: color-mix(in srgb, var(--sea) 13%, transparent); color: var(--sea-ink); transition: background .15s var(--ease); }
  .af2-cal td > a:hover { background: color-mix(in srgb, var(--sea) 26%, transparent); }
  .af2-cal td.is-we > a { background: color-mix(in srgb, var(--coral) 14%, transparent); color: var(--coral-ink); }
  .af2-cal td.is-today > a, .af2-cal td.is-today > span { box-shadow: inset 0 0 0 1.5px currentColor; }
  .af2-cal td > [aria-current="page"], .af2-cal td.is-we > a[aria-current="page"] { background: var(--ink); color: var(--bg); }
  .af2-cal small { display: block; margin-top: -2px; font-size: 10px; line-height: 1.1; color: var(--dim); }
  .af2-links { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .af2-panel, .af2-sheet, .af2-scrim { transition: none; }
  .ev-soon.is-now::before { animation: none; }
}
/* ================================================================ /афиша 2.0 */
/* ================================================================ гайд за подписку
   (01.11.2026, задача 2.11). Отдельным куском в конце файла — его правят
   параллельно с Атласом, а этот блок ни на что выше не опирается, кроме
   токенов и `.btn`. Слева обещание, справа — сама вещь: брошюра на тёмной
   бирюзе с тремя этапами чек-листа. На телефоне брошюра выглядывает сверху,
   как из конверта, — видно, что придёт, ещё до текста. */

.gcta { margin-top: 36px; display: grid; border-radius: var(--r-xl); overflow: hidden;
        background: var(--card); box-shadow: var(--shadow); }
.gcta-stage { order: -1; position: relative; height: 172px; overflow: hidden; display: flex;
              justify-content: center; align-items: flex-start; padding-top: 22px;
              background: radial-gradient(120% 100% at 72% 0%,
                          color-mix(in srgb, var(--sea) 50%, var(--deep)) 0%, var(--deep) 72%); }
.booklet { width: 156px; padding: 8px 10px 14px 15px; background: #fff; color: #0f1f1d;
           border-radius: 5px 10px 10px 5px; transform: rotate(-5deg);
           box-shadow: inset 5px 0 0 var(--coral), 0 22px 40px -14px rgba(0, 0, 0, .6);
           transition: transform .5s var(--ease); }
.gcta:hover .booklet { transform: rotate(-3deg) translateY(-4px); }
.booklet-art { margin: -8px -10px 9px -10px; aspect-ratio: 4 / 3; overflow: hidden;
               border-radius: 0 10px 0 0; }
.booklet-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.booklet b { display: block; font: 700 13px/1.1 var(--display); letter-spacing: -.01em; }
.booklet ol { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.booklet li { display: flex; gap: 6px; align-items: center; font-size: 10px; font-weight: 650;
              line-height: 1.2; color: #556664; }
.booklet li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2.5px;
                      box-shadow: inset 0 0 0 1.5px #008f87; }
.booklet li:first-child::before { background: #008f87; box-shadow: inset 0 0 0 1.5px #008f87,
                                  inset 0 0 0 3px #fff; }
.gcta-body { padding: 22px 20px 24px; }
.gcta-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
               font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
               color: var(--coral-ink); }
.gcta-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
                       background: var(--coral); }
.gcta h2 { margin-top: 10px; font-size: 22px; max-width: 20ch; }
.gcta p { margin-top: 10px; color: var(--dim); max-width: 34em; }
.gcta .btn { margin-top: 18px; }
.gcta small { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4;
              color: var(--faint); max-width: 34em; }
@media (max-width: 479.98px) {
  .gcta .btn { width: 100%; }
}
@media (min-width: 720px) {
  .gcta { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); }
  .gcta-stage { order: 2; height: auto; min-height: 320px; align-items: center; padding: 28px; }
  .gcta-body { padding: 40px; align-self: center; }
  .gcta h2 { font-size: 30px; }
  .booklet { width: 210px; padding: 10px 14px 18px 20px; }
  .booklet-art { margin: -10px -14px 12px -14px; }
  .booklet b { font-size: 17px; }
  .booklet li { font-size: 12.5px; gap: 8px; }
  .booklet li::before { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .gcta:hover .booklet { transform: rotate(-5deg); }
}

/* ================================================================ сезоны
   (01.11.2026, задача 2.12). `/season/<slug>` и ссылки на сезон с главной
   и из афиши. Свой кусок в конце файла по той же причине, что гайд. */

/* Ссылка на сезон: снимок квадратом, когда и название. Одна — во всю
   ширину, несколько — лентой вбок на телефоне. */
.slinks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.slink { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 12px;
         align-items: center; min-height: 72px; padding: 8px 14px 8px 8px;
         border-radius: var(--r-m); background: var(--deep); color: var(--on-deep);
         transition: transform .25s var(--ease); }
.slink:hover { transform: translateY(-2px); }
.slink img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.slink small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em;
               text-transform: uppercase; color: #ffb3a1; }
.slink b { display: block; margin-top: 2px; font: 700 16px/1.15 var(--display);
           letter-spacing: -.01em; color: #fff; }
.slink .icon { width: 20px; height: 20px; color: #7fe3dc; }
.wrap > .slinks, .page-top + .slinks { margin-top: 4px; }
@media (min-width: 720px) {
  .slinks { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Обложка сезона: окно дат — крупно, это первое, что ищут. */
.season-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
               margin-bottom: 10px; }
.season-when b { font: 700 13px/1 var(--text); letter-spacing: .02em; padding: 7px 12px;
                 border-radius: 99px; background: var(--coral); color: #fff;
                 font-variant-numeric: tabular-nums; }
.season-when span { font-size: 13px; font-weight: 700; letter-spacing: .04em;
                    text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.season-band { min-height: 300px; }

/* Честное «пока пусто»: почему и с какого дня появится. */
.season-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0;
               padding: 14px 16px; border-radius: var(--r-m); font-size: 15px;
               background: var(--sunk); color: var(--dim); }
.season-note .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--sea-ink); }

/* Вода: одно число крупно — сколько точек из скольких пригодны. */
.swater { margin-top: 36px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px;
          align-items: center; padding: 20px; border-radius: var(--r-l);
          background: color-mix(in srgb, var(--sea) 10%, var(--card));
          box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sea) 22%, transparent); }
.swater-num { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.swater-num b { font: 800 44px/1 var(--display); color: var(--sea-ink); letter-spacing: -.03em; }
.swater-num span { font-size: 17px; font-weight: 700; color: var(--dim); }
.swater h2 { font-size: 18px; }
.swater p { margin-top: 6px; font-size: 15px; color: var(--dim); max-width: 46em; }
@media (max-width: 479.98px) {
  .swater { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Места рубрики строками: имя и район. Карточки Атласа живут в Атласе. */
.splaces { list-style: none; margin: 0; padding: 0; background: var(--card);
           border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.splaces li + li { border-top: 1px solid var(--line); }
.splaces a { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px;
             flex-wrap: wrap; min-height: 52px; padding: 12px 16px; }
.splaces a:hover { background: var(--sunk); }
.splaces b { font-weight: 650; font-size: 16px; }
.splaces span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
                color: var(--dim); }
.splaces .wchip { margin-left: 0; font-style: normal; }
@media (min-width: 720px) {
  .splaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .splaces li + li { border-top: 0; }
  .splaces li { border-bottom: 1px solid var(--line); }
  .splaces li:nth-child(odd) { border-right: 1px solid var(--line); }
  .season-band { min-height: 360px; }
}

/* ------------------------------------------------------- Атлас, четвёртая редакция

   Ноябрь 2026. Владелец назвал внутренние страницы Атласа уродливыми: на
   телефоне список мест начинался на втором-третьем экране (карта и «что
   важно знать» стояли выше), карточки — сплошной текст, а у пляжа не было
   ни одного снимка. Отсюда:
   - **Список первым.** Над ним одна строка фильтра; карта — под списком
     (на широком — липкой колонкой), рубрики — в конце страницы.
   - **Обложка у каждой карточки.** Снимок места с Wikimedia Commons, а нет
     снимка — рисунок рубрики. Серых заглушек нет нигде.
   - **Приметы значками.** «Спокойная вода», «автобус 266», «2,3 км» —
     только то, что сказано в записи (`portal/atlas_facts.py`).
   - **Место — как приложение.** Галерея листается пальцем (scroll-snap, без
     скрипта), под каждым снимком автор и лицензия; действия кнопками под
     большим пальцем; вода — одной строкой, точки замера — раскрываются. */

/* Строка фильтра: «На карте», подборки, районы — одна лента вбок. */
.cat-lead { margin-top: 8px; font-size: 14px; color: var(--dim); }
.cat-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
              margin: 2px calc(-1 * var(--gut)) 14px; padding: 4px var(--gut);
              scroll-padding-inline: var(--gut); }
.cat-filter::-webkit-scrollbar { display: none; }
.cat-filter .chip { min-height: 44px; }
.chip-map { color: var(--sea-ink);
            box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sea) 45%, var(--line)); }
.chip-map .icon { width: 18px; height: 18px; }

.cat-layout { display: grid; gap: 18px; }
.cat-list { display: grid; gap: 18px; align-content: start; min-width: 0; }
.cat-map { scroll-margin-top: calc(var(--top) + 12px); }
.cat-map .island svg { width: 100%; height: auto; max-height: 70vh; }
.cat-map .dot text, .cat-map .labels text { font-size: 13px; stroke-width: 4px; }

/* Карточка: вся — одна ссылка, кнопки лежат поверх. */
.places-media { gap: 14px; }
.place { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
         background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow);
         color: var(--dim); font-size: 14px; transition: transform .25s var(--ease); }
.place:hover { transform: translateY(-2px); }
.place:has(.place-link:focus-visible) { outline: 3px solid var(--sea); outline-offset: 2px; }
.place-link { color: var(--ink); }
.place-link:focus-visible { outline: none; }
.place-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.place-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0;
              padding: 14px 16px 16px; }
.place h3 { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.place-cover { position: relative; overflow: hidden; background: var(--sunk); }
.place-cover img { display: block; width: 100%; height: 100%; object-fit: cover;
                   transition: transform .6s var(--ease); }
.place:hover .place-cover img { transform: scale(1.04); }
.place-media .place-cover { aspect-ratio: 16 / 10; }
.place-glyph { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; padding: 6px;
               border-radius: 50%; background: var(--card); color: var(--sea-ink);
               box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.place-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px;
             padding: 14px; }
.place-row .place-cover { width: 72px; height: 72px; border-radius: 16px; }
.place-row .place-body { padding: 0; }
.place-row .place-glyph { display: none; }
.place-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.place-meta .fchips { display: contents; }
.place-meta .wchip, .place-meta .dchip { display: inline-flex; align-items: center; margin-left: 0;
                                         padding: 3px 9px; font-size: 12.5px; font-weight: 700; }
.place-why { color: var(--ink); font-size: 14px; line-height: 1.45; display: -webkit-box;
             -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.place-row .place-why { -webkit-line-clamp: 3; }
.place-addr { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--dim);
              overflow-wrap: anywhere; }
.place-addr .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--faint); }
.place-acts { position: relative; z-index: 2; display: grid; gap: 6px; margin-top: auto;
              padding-top: 4px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.place .pa { color: var(--ink); }
.place .pa-call, .place .pa-call .icon { color: #fff; }
.place-checked { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); }
.place-checked .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.place-ad { box-shadow: none; }

/* Приметы: значок и слово. Мелкие — на карточке, крупнее — на странице. */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px;
      border-radius: 999px; background: var(--sunk); color: var(--ink); font-size: 14px;
      font-weight: 650; line-height: 1.2; }
.fc .icon { flex: none; width: 18px; height: 18px; color: var(--sea-ink); }
.fc-good { background: color-mix(in srgb, var(--sea) 13%, var(--card)); color: var(--sea-ink); }
.fc-warn { background: color-mix(in srgb, var(--coral) 14%, var(--card)); color: var(--coral-ink); }
.fc-warn .icon { color: var(--coral-ink); }
.fchips-s .fc { gap: 4px; padding: 3px 9px 3px 7px; font-size: 12.5px; }
.fchips-s .fc .icon { width: 15px; height: 15px; }

/* Все рубрики — в конце страницы рубрики. */
.cat-others h2 { font-size: 20px; margin-bottom: 12px; }
.cats-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cats-all a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
              border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
              font-size: 14px; font-weight: 600; line-height: 1.25; }
.cats-all a:hover { box-shadow: inset 0 0 0 1.5px var(--sea); }
.cats-all a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.cats-all .aicon { color: var(--sea-ink); }
.cats-all a[aria-current="page"] .aicon { color: inherit; }

/* ------------------------------------------- страница места */

.pl { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 8px; }
.pl > .crumbs { order: 0; }
.pl-side, .pl-main { display: contents; }
.gal { order: 1; }
.pl-head { order: 2; }
.pl-chips { order: 3; }
.pl-acts { order: 4; }
.pl-about { order: 5; }
.pl-side .place-facts { order: 6; }
.water { order: 7; }
.pl-notes { order: 8; }
.pl-map { order: 9; }
.place-own { order: 10; }
.pl-sources { order: 11; }
.pl-signs { order: 12; }
.pl-main > .capture { order: 13; }

.gal { margin: 0 calc(-1 * var(--gut)); }
.gal-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
             padding: 0 var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none;
             overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; }
.gal-slide { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
             border-radius: var(--r-l); background: var(--sunk); scroll-snap-align: start; }
.gal:not(.gal-n1) .gal-slide { flex-basis: 88%; }
.gal-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 8px;
                        background: linear-gradient(transparent, rgba(4, 18, 17, .62));
                        color: rgba(255, 255, 255, .86); font-size: 11px; line-height: 1.3;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-slide figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 2px;
                          text-decoration-color: rgba(255, 255, 255, .5); }
.gal-count { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 99px;
             background: rgba(4, 18, 17, .55); color: #fff; font-size: 12px; font-weight: 700;
             font-variant-numeric: tabular-nums; }

.pl-head { display: flex; align-items: center; gap: 14px; }
.pl-illus { flex: none; width: 76px; height: 76px; overflow: hidden; border-radius: var(--r-m);
            box-shadow: var(--shadow); }
.pl-illus img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-title { min-width: 0; }
.place-kind { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px;
              font-weight: 700; color: var(--sea-ink); }
.place-kind a { color: inherit; }
.place-kind .aicon { width: 22px; height: 22px; }
.pl-head h1 { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.pl-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px;
            font-size: 14px; color: var(--dim); }
.pl-where > .icon { width: 16px; height: 16px; color: var(--faint); margin-right: -4px; }
.pl-where a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
              text-decoration-color: var(--line); }
.pl-where .ok { padding: 3px 10px 3px 6px; font-size: 12.5px; }
.pl-where .ok .icon { width: 14px; height: 14px; }

.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chips .fchips { display: contents; }
a.fc-water { min-height: 34px; }
.fc-water.w-good { background: rgba(31, 138, 91, .13); color: #1f7a52; }
.fc-water.w-bad { background: color-mix(in srgb, var(--coral) 14%, var(--card));
                  color: var(--coral-ink); }
.fc-water.w-good .icon, .fc-water.w-bad .icon { color: currentColor; }

.pl-acts { display: grid; gap: 8px; }
.pl-main-act { width: 100%; height: 54px; font-size: 16px; }
.pl-main-act .tel-num { font-weight: 600; opacity: .9; }
.pl-minor { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.pl-minor .pa { flex-direction: column; gap: 4px; min-height: 62px; padding: 8px 6px; border: 0;
                font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
                white-space: normal; text-align: center; line-height: 1.2; cursor: pointer; }
.pl-minor .pa .icon { width: 20px; height: 20px; }
.pa[hidden], .tg .pa-tg { display: none; }
.pa.is-done { background: color-mix(in srgb, var(--sea) 18%, var(--card)); }

.pl-about { font-size: 17px; line-height: 1.55; color: var(--ink); }
.pl h2 { font-size: 19px; line-height: 1.2; }
.pl-notes h2, .pl-sources h2 { margin-bottom: 10px; }
.pl-notes .place-notes { margin: 0; }
.pl-sources .note { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px;
                    font-size: 13px; }
.pl-sources .note .icon { flex: none; width: 15px; height: 15px; margin-top: 2px;
                          color: var(--sea-ink); }
/* Три знака доверия: разные значки и разные слова, общего балла нет (DESIGN.md). */
.pl-signs h2 { margin-bottom: 10px; }
.signs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.signs li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.signs .icon { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.signs b { font-weight: 650; }
.sign-source .icon, .sign-owner .icon { color: var(--sea-ink); }
.sign-people .icon { color: var(--coral-ink); }
.signs time { white-space: nowrap; }
.pc-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.pc-mine:not([hidden]) { margin-top: 14px; }
.pc-mine:not([hidden]) ~ .pc-bot { display: none; }
.pc-bot { margin: 12px 0 0; font-size: 14px; }
.pc-bot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink);
            font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.pc-bot .icon { flex: none; width: 17px; height: 17px; color: var(--sea-ink); }
.pc form { display: contents; }
.pc-wrong form.capture-form { display: grid; padding: 12px 0 4px; }
.pc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-acts .btn { min-height: 44px; }
.pc-said { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-s); background: var(--sunk);
           font-size: 14px; line-height: 1.45; }
.pc-said.is-failed { color: var(--coral-ink); box-shadow: inset 0 0 0 1.5px var(--coral); }
.pc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
          gap: 8px 12px; }
.pc-row p { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 200px; margin: 0;
            font-size: 15px; line-height: 1.45; }
.pc-row .icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--sea-ink); }
.pc-row .btn { min-height: 44px; }
.pc-wrong { margin-top: 8px; }
.pc-wrong summary { display: flex; align-items: center; min-height: 44px; font-size: 14px;
                    font-weight: 650; cursor: pointer; text-decoration: underline;
                    text-underline-offset: 3px; }
.pc-facts { display: grid; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; list-style: none;
            border-top: 1px solid var(--line); }
.place-own { margin: 0; font-size: 14px; color: var(--dim); }
.place-own a { color: var(--ink); font-weight: 650; text-decoration: underline;
               text-underline-offset: 3px; }

/* Вода: одна строка сводки, точки замера — по нажатию. */
.water { margin: 0; padding: 16px; border: 0; border-radius: var(--r-l); background: var(--card);
         box-shadow: inset 0 0 0 1.5px var(--line); scroll-margin-top: calc(var(--top) + 12px); }
.water h2 { margin: 0 0 10px; font-size: 19px; }
.water-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px;
             border-radius: 14px; background: var(--sunk); }
.water-sum .icon { flex: none; width: 22px; height: 22px; color: var(--faint); }
.water-sum b { font-size: 16px; color: var(--ink); }
.water-sum small { flex-basis: 100%; padding-left: 32px; font-size: 12.5px; color: var(--dim); }
.water.w-good .water-sum { background: rgba(31, 138, 91, .11); }
.water.w-good .water-sum .icon, .water.w-good .water-sum b { color: #1f7a52; }
.water.w-bad .water-sum { background: color-mix(in srgb, var(--coral) 12%, var(--card)); }
.water.w-bad .water-sum .icon, .water.w-bad .water-sum b { color: var(--coral-ink); }
.water-more summary { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px;
                      cursor: pointer; list-style: none; font-size: 14px; font-weight: 700;
                      color: var(--sea-ink); }
.water-more summary::-webkit-details-marker { display: none; }
.water-more summary i { font-style: normal; color: var(--faint); font-weight: 600; }
.water-more summary::after { content: ""; width: 8px; height: 8px; margin-left: 2px;
                             border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                             transform: rotate(45deg) translateY(-3px); }
.water-more[open] summary::after { transform: rotate(-135deg) translateX(-3px); }
.water li { padding: 8px 12px; }
.water li span { font-size: 13px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fc-water.w-good,
  :root:not([data-theme="light"]) .water.w-good .water-sum .icon,
  :root:not([data-theme="light"]) .water.w-good .water-sum b { color: #5fd39b; }
  :root:not([data-theme="light"]) .fc-water.w-good,
  :root:not([data-theme="light"]) .water.w-good .water-sum { background: rgba(95, 211, 155, .12); }
}
:root[data-theme="dark"] .fc-water.w-good,
:root[data-theme="dark"] .water.w-good .water-sum .icon,
:root[data-theme="dark"] .water.w-good .water-sum b { color: #5fd39b; }
:root[data-theme="dark"] .fc-water.w-good,
:root[data-theme="dark"] .water.w-good .water-sum { background: rgba(95, 211, 155, .12); }

/* Где это: весь остров и точка, рядом — ссылка на настоящую карту. */
.pl-map { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center;
          padding: 14px; border-radius: var(--r-l); background: var(--card);
          box-shadow: inset 0 0 0 1.5px var(--line); }
.locator { display: block; width: 84px; height: auto; aspect-ratio: 470 / 1037; border-radius: 14px;
           background: var(--sea-map); }
.locator .sea { fill: var(--sea-map); }
.locator .mainland { fill: var(--land-mute); }
.locator .land { fill: var(--sand); stroke: var(--sand-line); stroke-width: 3; }
.locator .lake { fill: var(--lake); }
.loc-ring { fill: color-mix(in srgb, var(--coral) 28%, transparent); }
.loc-dot { fill: var(--coral); stroke: #fff; stroke-width: 8; }
.pl-map-text { display: grid; gap: 4px; min-width: 0; }
.pl-map h2 { font-size: 17px; }
.pl-map-text p { font-size: 14px; color: var(--ink); }
.pl-map-text .note { font-size: 12.5px; color: var(--faint); }
.pl-map-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
               font-weight: 700; color: var(--sea-ink); }
.pl-map-link .icon { width: 18px; height: 18px; }

@media (min-width: 720px) {
  .places-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gal-slide { aspect-ratio: 16 / 10; }
  .gal:not(.gal-n1) .gal-slide { flex-basis: 70%; }
  .pl-head h1 { font-size: 36px; }
}
@media (min-width: 1024px) {
  .chip-map { display: none; }
  .cat-filter { margin-inline: 0; padding-inline: 0; scrollbar-width: thin;
                scrollbar-color: var(--line) transparent; }
  .cat-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 28px; }
  .cat-map { position: sticky; top: calc(var(--top) + 16px); }
  .cat-map .island svg { max-height: calc(100vh - var(--top) - 60px); }
  .places-media, .cat-layout .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats-all { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pl { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; row-gap: 18px;
        grid-template-areas: "crumbs crumbs" "gal gal" "head side" "chips side" "main side";
        grid-template-rows: auto auto auto auto 1fr; }
  .pl > .crumbs { grid-area: crumbs; }
  .gal { grid-area: gal; margin: 0; }
  .pl-head { grid-area: head; }
  .pl-chips { grid-area: chips; align-self: start; }
  .pl-side { grid-area: side; display: grid; gap: 14px; align-self: start; position: sticky;
             top: calc(var(--top) + 16px); }
  .pl-main { grid-area: main; display: grid; gap: 22px; align-content: start; }
  .pl-head h1 { font-size: 44px; }
  .gal-track { display: grid; height: 460px; padding: 0; overflow: visible; gap: 8px; }
  .gal-slide, .gal:not(.gal-n1) .gal-slide { aspect-ratio: auto; height: 100%; }
  .gal-count { display: none; }
  .gal-n2 .gal-track { grid-template-columns: 1fr 1fr; }
  .gal-n3 .gal-track { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .gal-n3 .gal-slide:first-child { grid-row: 1 / span 2; }
  .gal-n4 .gal-track { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .gal-n4 .gal-slide:first-child { grid-row: 1 / span 2; }
  .gal-n4 .gal-slide:nth-child(2) { grid-column: 2 / span 2; }
  .gal-n1 .gal-track { height: 480px; }
}
@media (min-width: 1280px) {
  .places-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .place, .place-cover img { transition: none; }
  .place:hover, .place:hover .place-cover img { transform: none; }
}
/* ------------------------------------------------- заявка владельца без Telegram */
.claim-place { margin: 0 0 6px; font-size: 14px; color: var(--dim); }
.claim-place a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.claim-form { padding: 0; margin: 16px 0; }
.claim-form select { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px;
  background: var(--sunk); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; }
.claim-form small { font-weight: 400; }
.claim-consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.claim-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sea); }
.claim-problem { padding: 10px 12px; border-radius: 10px; color: var(--ink);
  background: color-mix(in srgb, var(--coral) 14%, var(--card)); }
.claim-ok { padding: 10px 12px; border-radius: 10px; color: var(--ink);
  background: color-mix(in srgb, var(--sea) 14%, var(--card)); }
.claim form + form { margin-top: 12px; }
.claim .btn { white-space: normal; height: auto; min-height: 44px; padding-block: 10px; text-align: left; }
.claim .capture-reasons .chip { flex: 0 1 auto; max-width: 100%; white-space: normal; padding-block: 8px; }
/* ------------------------------------------------- подборки, гид по району, партнёры */
.chip-col { color: var(--sea-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 45%, transparent); }
.chip-col[aria-current="page"] { color: var(--bg); }
.coll-why { display: flex; gap: 8px; align-items: flex-start; max-width: 46em; margin-top: 12px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.coll-why .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--sea-ink); }
.coll-note { max-width: 46em; margin-bottom: 14px; }
.hub-sec > .note { max-width: 46em; margin-bottom: 12px; }
.hub-sec .head .icon { width: 26px; height: 26px; color: var(--sea-ink); flex: none; }
.hub-water { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px;
  padding: 12px 14px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.hub-water .icon { flex: none; width: 20px; height: 20px; color: var(--sea-ink); }
.hub-water b { font-size: 15px; }
.hub-water small { font-size: 13px; color: var(--dim); }
.hub-water small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hub-water.w-bad .icon { color: var(--coral-ink); }
.hub-more { margin-top: 12px; }
.hub-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--sunk); font-size: 14.5px; font-weight: 650; cursor: pointer;
  list-style: none; }
.hub-more > summary::-webkit-details-marker { display: none; }
.hub-more[open] > summary { margin-bottom: 12px; }
.hub-notes { padding: 4px 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); }
.hub-buses { list-style: none; margin: 0; padding: 4px 16px; display: grid; border-radius: var(--r-l);
  background: var(--card); box-shadow: var(--shadow); }
.hub-buses li + li { border-top: 1px solid var(--line); }
.hub-buses a { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px; padding: 8px 0; font-size: 15px; }
.hub-buses b { flex: none; color: var(--sea-ink); font-variant-numeric: tabular-nums; }
.hub-near { margin: 22px 0 4px; font-size: 17px; }
.hub-all { margin-top: 12px; font-weight: 650; }
.hub-all a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--sea-ink); }
.hub-all .icon { width: 16px; height: 16px; }
.mentions-wrap { padding-top: 24px; }
.pof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; line-height: 1.4; }
.pof-tag { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--coral); color: #fff;
  font-size: 12px; font-weight: 700; }
.pof-text { color: var(--ink); overflow-wrap: anywhere; }
.pof small { font-size: 13px; color: var(--dim); }
.pof-s { font-size: 13.5px; }
.pof-s .pof-tag { font-size: 11.5px; padding: 1px 8px; }
.pof-box { order: 5; display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--coral) 10%, var(--card)); }
.pl-colls { order: 11; }
.pl-colls h2 { margin-bottom: 8px; font-size: 16px; font-family: var(--text); font-weight: 800; letter-spacing: 0; }
.pl-colls-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-colls-row .chip { min-height: 44px; }
.pof-owner { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.pof-owner h2 { margin-bottom: 8px; font-size: 20px; }
.pof-rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.pof-rows li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); font-size: 14px; }
.pof-rows small { color: var(--dim); }
@media (min-width: 1024px) {
  .hub-buses { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .hub-buses li:nth-child(2) { border-top: 0; }
}

/* ---------------------------------------------------------------- письма и следующий шаг
   `.mail-*` — подписка на письма: главный блок там, где нет Telegram (/pt, /en), и
   свёрнутый запасной путь под призывом в бота. `.ai-next` — шаг под ответом ИИ.
   Внутри Telegram письма не предлагаем: человек уже там, где пишет бот. */
.mail-box { margin-top: 36px; display: grid; gap: 18px; padding: 24px 20px;
            border-radius: var(--r-xl); background: var(--card);
            box-shadow: inset 0 0 0 1px var(--line); }
.mail-box h2 { font-size: 22px; max-width: 22ch; }
.mail-box p { margin-top: 10px; color: var(--dim); max-width: 34em; }
.mail-form { display: grid; gap: 12px; }
.mail-form .btn { justify-self: start; }
.mail-form .claim-consent { font-size: 13px; line-height: 1.45; color: var(--dim); }
.mail-alt { margin-top: 14px; font-size: 14px; }
.mail-alt summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
                    font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.mail-alt[open] summary { margin-bottom: 8px; }
.join .mail-form .capture-field, .ask .mail-form .capture-field,
.join .mail-form .claim-consent, .ask .mail-form .claim-consent { color: inherit; }
.join .mail-form .btn { background: #fff; color: #c8412a; box-shadow: none; }
.gcta-alt { margin-top: 14px; font-size: 14px; }
.gcta-alt a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650;
              color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gcta-alt .icon { width: 18px; height: 18px; color: var(--sea-ink); }
.mail-page .mail-form { margin-top: 16px; }
.ai-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
           padding-top: 12px; border-top: 1px solid var(--line); }
.ai-next p { flex: 1 1 100%; font-size: 13px; color: var(--dim); }
.ai-next .mail-alt { flex: 1 1 100%; margin-top: 0; }
.tg .mail-box, .tg .mail-alt, .tg .ai-next { display: none; }
@media (max-width: 479.98px) {
  .mail-form .btn { width: 100%; justify-self: stretch; }
}
@media (min-width: 720px) {
  .mail-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 36px 40px;
              align-items: start; }
  .mail-box h2 { font-size: 28px; }
}

/* ---------------------------------------------------------------- админка
   Рабочий экран владельца (`/my/admin…`, docs/MINIAPP.md, шаг 6): строки под линейку,
   счётчики столбцом, тот же словарь кнопок и полей, что у `/my`. Коралл значит «ждёт
   вас», бирюза — действие. Меню: лента вбок на телефоне, колонка на широком. */
.my-wide { --page: 1180px; }
.adm { display: grid; gap: 16px; min-width: 0; }
.adm-main { display: grid; gap: 0; min-width: 0; align-content: start; }
.adm-main > * { min-width: 0; }
.adm-nav { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 8px; scrollbar-width: none; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.adm-tab i, .adm-count { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--coral); color: var(--on-coral); text-align: center; }
.adm-count { margin-left: 8px; display: inline-block; font-family: var(--text); background: var(--sunk); color: var(--ink); }
.adm-tab[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.adm-sec { margin-top: 24px; }
.adm-sec:first-child { margin-top: 0; }
.adm-gap { margin-top: 12px; }
.adm-h { margin: 0 0 8px; font-family: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.adm-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--text); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.adm-back { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.adm-back a { color: var(--sea-ink); }
.adm-back a::before { content: "\2039"; margin-right: 6px; }
.adm-note { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--dim); overflow-wrap: anywhere; }
.adm-note a { color: var(--sea-ink); font-weight: 600; }
.adm-warn { color: var(--coral-ink); font-weight: 600; }
.adm-para { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.adm-para a, .adm-lines a, .adm-facts a, .adm-card-title a { color: var(--sea-ink); }
.adm-alert { position: sticky; top: 8px; z-index: 5; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--deep); color: var(--on-deep); font-weight: 600; font-size: 14px; }
.adm-notice { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--deep); color: var(--on-deep); font-weight: 600; font-size: 14px; }
.adm-notice a { color: inherit; text-decoration: underline; }
.adm-alert.is-failed, .adm-notice.is-failed { background: var(--coral-ink); color: var(--bg); }
.adm-msg { margin: 0; padding: 8px 12px; border-radius: var(--r-s); background: var(--sunk); font-size: 14px; font-weight: 600; }
.adm-msg.is-failed { color: var(--coral-ink); box-shadow: inset 0 0 0 1.5px var(--coral); background: var(--card); }
.adm-empty { margin: 0; padding: 20px 16px; border-radius: var(--r-m); background: var(--card); color: var(--dim); font-size: 14px; }
.adm-empty[hidden], .adm-sec[hidden], [data-filter][hidden] { display: none; }
.adm-sheet { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.adm-facts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.adm-facts dt { color: var(--dim); }
.adm-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.adm-quote { margin: 0; padding: 8px 12px; border-radius: var(--r-s); background: var(--sunk); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-pre { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--sunk); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); vertical-align: 1px; }
.adm-dot-ready { background: var(--sea); }
.adm-dot-blocked, .adm-dot-warn { background: #d99a00; }
.adm-dot-broken { background: var(--coral-ink); }
.adm-rows { display: grid; gap: 8px; }
.adm-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.adm-acts form { display: contents; }
.adm-acts .btn { white-space: normal; min-height: 40px; height: auto; padding-block: 8px; text-align: center; }
.adm-inline { display: flex !important; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.adm-note-field { flex: 1 1 160px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--r-s); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
form[aria-busy] button { opacity: .55; pointer-events: none; }
.adm-sure { display: contents; }
.adm-sure > summary { list-style: none; cursor: pointer; }
.adm-sure > summary::-webkit-details-marker { display: none; }
.adm-sure-no { display: none; }
.adm-sure[open] > summary { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.adm-sure[open] .adm-sure-go { display: none; }
.adm-sure[open] .adm-sure-no { display: inline; }
.adm-sure-box { flex: 1 1 100%; order: 5; display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: var(--r-s); background: var(--sunk); font-size: 14px; line-height: 1.45; }
.adm-sure-box p { margin: 0; }
.adm-sure-box form { display: block; }
.adm-card { display: grid; gap: 8px; padding: 14px 16px; }
.adm-card-title { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.adm-meta { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-venue { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 16px; color: inherit; }
.adm-venue span { display: grid; gap: 2px; min-width: 0; }
.adm-venue b { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.adm-venue small { font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.adm-post { display: grid; gap: 0; margin-bottom: 10px; border-radius: var(--r-m); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.adm-post-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sunk); }
.adm-post-main { display: grid; gap: 8px; padding: 14px 16px; min-width: 0; }
.adm-text { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-demand { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.adm-demand .adm-lines { margin-top: 6px; font-size: 13px; }
.adm-diff { display: grid; gap: 10px; }
.adm-diff section { padding: 12px 14px; border-radius: var(--r-s); background: var(--card); }
.adm-diff h3 { margin: 0 0 6px; font-family: var(--text); font-size: 13px; font-weight: 700; color: var(--dim); }
.adm-diff p, .adm-diff blockquote { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-was p { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.adm-now { box-shadow: inset 0 0 0 1.5px var(--sea); }
.adm-src { background: var(--sunk) !important; }
.adm-search { position: sticky; top: 0; z-index: 6; padding: 0 0 10px; background: var(--bg); }
.my-field select.adm-select, .adm-select { width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.adm-sheet .my-field input, .adm-sheet .my-field textarea, .adm-sheet .adm-select { background: var(--bg); }
.adm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.adm-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.adm-check input { width: 20px; height: 20px; accent-color: var(--sea); flex: none; }
.adm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-split { display: grid; gap: 0; margin-top: 20px; }
.adm-opt > summary { list-style: none; cursor: pointer; }
.adm-opt > summary::-webkit-details-marker { display: none; }
.adm-opt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px; align-items: center; min-height: 52px; padding: 8px 16px; }
.adm-opt-name { display: grid; gap: 1px; min-width: 0; }
.adm-opt-name b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.adm-opt-name small { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.adm-opt-val { max-width: 42vw; font-size: 13px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-opt-val.is-changed { color: var(--coral-ink); font-weight: 650; }
.adm-opt-body { display: grid; gap: 10px; padding: 0 16px 14px; }
.adm-opt-form { display: grid; gap: 10px; justify-items: start; }
.adm-opt-form .my-field { width: 100%; }
.adm-opt-form .my-field input, .adm-opt-form .my-field textarea, .adm-opt-form .adm-select { background: var(--bg); }
@media (min-width: 900px) {
  .adm { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
  .adm-nav { position: sticky; top: calc(var(--top) + 12px); flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .tg .adm-nav { top: 12px; }
  .adm-tab { justify-content: space-between; border-radius: var(--r-s); background: transparent; box-shadow: none; }
  .adm-post:has(.adm-post-photo) { grid-template-columns: 220px minmax(0, 1fr); }
  .adm-post-photo { height: 100%; aspect-ratio: auto; }
  .adm-split { grid-template-columns: 1fr 1fr; gap: 24px; }
  .adm-diff { grid-template-columns: 1fr 1fr; }
  .adm-src { grid-column: 1 / -1; }
  .adm-opt-val { max-width: 320px; }
  .adm-pair { grid-template-columns: repeat(4, 1fr); }
}

/* «Запуск»: состояния подключений, план и расход, проверка на телефоне. */
.adm-dot.lch-dot-ready { background: var(--sea); }
.adm-dot.lch-dot-waiting { background: #d99a00; }
.adm-dot.lch-dot-missing { background: var(--coral-ink); }
.adm-dot.lch-dot-unknown, .adm-dot.lch-dot-optional { background: transparent; box-shadow: inset 0 0 0 2px var(--faint); }
.lch-next { padding: 14px 16px; border-radius: var(--r-s); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--sea); }
.lch-next-what { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.lch-next-go { margin: 8px 0 0; }
.lch-next + .adm-note { margin-top: 12px; }
.lch-limit { border-radius: var(--r-s); background: var(--card); }
.lch-group { margin-top: 10px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.lch-group > summary { list-style: none; cursor: pointer; }
.lch-group > summary::-webkit-details-marker { display: none; }
.lch-group-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; font-size: 15px; }
.lch-group-head b { flex: 1; min-width: 0; font-weight: 650; }
.lch-state { flex: none; font-size: 13px; color: var(--dim); }
.lch-items { margin: 0; padding: 0 16px 6px; list-style: none; }
.lch-item { padding: 10px 0; border-top: 1px solid var(--line); }
.lch-item .adm-note { margin: 2px 0 0; }
.lch-item-top { display: flex; align-items: center; gap: 10px; }
.lch-item-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.lch-value { margin: 2px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lch-words { display: grid; gap: 10px; }
.lch-words section { padding: 12px 14px; border-radius: var(--r-s); background: var(--card); }
.lch-words .adm-note:last-child { margin-bottom: 0; }
.lch-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--card); }
.lch-totals div { min-width: 0; }
.lch-totals dt { font-size: 13px; color: var(--dim); }
.lch-totals dd { margin: 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.is-over { color: var(--coral-ink); }
.lch-camp-labels { display: none; }
.lch-camp > summary.lch-camp-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 16px; }
.lch-camp-name { grid-column: 1 / -1; display: grid; gap: 1px; min-width: 0; }
.lch-camp-name b { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.lch-camp-name small { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.lch-num { display: grid; min-width: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.lch-num small { font-size: 12px; line-height: 1.25; color: var(--dim); }
.lch-cabinet, .lch-spend, .lch-moves { padding-top: 10px; border-top: 1px solid var(--line); }
.lch-spend .adm-pair { width: 100%; }
.lch-moves .adm-note { margin: 0; }
.lch-device { display: grid; gap: 2px; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.lch-device small { font-size: 12px; font-weight: 400; color: var(--faint); overflow-wrap: anywhere; }
.lch-check.is-failed { box-shadow: inset 3px 0 0 var(--coral-ink); }
.lch-check.is-passed { box-shadow: inset 3px 0 0 var(--sea); }
.lch-check .adm-note, .lch-open { margin: 0; }
.lch-results { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.lch-results .is-fail b { color: var(--coral-ink); }
.lch-results .is-ok b { color: var(--sea-ink); }
.lch-result-note { display: block; overflow-wrap: anywhere; }
.lch-mark { display: grid; gap: 8px; }
.lch-mark input { background: var(--bg) !important; }
@media (min-width: 900px) {
  .lch-words { grid-template-columns: 1fr 1fr; }
  .lch-totals { grid-template-columns: repeat(4, 1fr); }
  .lch-camp-labels, .lch-camp > summary.lch-camp-head { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; }
  .lch-camp-labels { padding: 0 16px 6px; font-size: 12px; color: var(--dim); }
  .lch-camp-labels span:not(:first-child), .lch-num { text-align: right; }
  .lch-camp-name { grid-column: auto; }
  .lch-num small { display: none; }
}

/* ---------------------------------------------- рассказы читателей (.story-*)
   Чужой опыт, а не сверенная запись: песочная метка коралловой линейкой слева, другой
   фон. Рядом с записью блок обязан читаться как врезка, а не как её продолжение. */

.story-label { display: inline-flex; gap: 6px; align-items: center; width: fit-content; font-size: 12.5px; font-weight: 700; color: var(--coral-ink); }
.story-label .icon { width: 15px; height: 15px; }
.story-warn { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--coral); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--sunk); font-size: 14px; line-height: 1.5; color: var(--dim); }
.story-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.story-card { display: grid; gap: 6px; padding: 14px 16px; border-left: 3px solid var(--coral); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--sunk); color: inherit; }
.story-card b { font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.story-excerpt { font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.story-card small { font-size: 12.5px; color: var(--dim); }
a.story-card:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.story-numbers { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.story-block { display: grid; gap: 10px; margin: 26px 0; padding: 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--line); }
.story-block h2 { margin: 0; font-size: 19px; }
.story-block .note { margin: 0; }
.story-invite { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 15px; line-height: 1.45; color: var(--dim); }
.story-invite .icon { flex: none; width: 20px; height: 20px; color: var(--coral-ink); }
.story-invite a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; }
.story-tile { display: flex; gap: 12px; align-items: center; margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--coral); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--sunk); color: inherit; }
.story-tile .icon { flex: none; width: 22px; height: 22px; color: var(--coral-ink); }
.story-tile span { display: grid; gap: 2px; min-width: 0; }
.story-tile b { font-size: 15.5px; font-weight: 650; }
.story-tile small { font-size: 13px; color: var(--dim); }
.story-cta { margin: 22px 0; }
.story-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; color: var(--dim); font-variant-numeric: tabular-nums; }
.story-text { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.story-text p { margin: 0 0 14px; }
.story-article, .story-form-page, .story-my { max-width: 720px; }
.story-form { padding: 0; margin: 14px 0 32px; }
.story-form select, .story-my select { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.story-pair { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; align-items: end; }
.story-draft { margin: 14px 0; padding: 16px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.story-draft h2 { margin: 0 0 10px; font-size: 20px; overflow-wrap: anywhere; }
.story-alert { margin: 12px 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--sunk); box-shadow: inset 0 0 0 1.5px var(--coral); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.story-my .capture { margin: 10px 0; }
.story-my .capture-form { padding: 0 16px 16px; }
.story-confirm { margin: 22px 0 14px; padding: 16px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.story-confirm h2 { margin: 0 0 10px; font-size: 19px; }
.story-confirm .capture-form { padding: 0; grid-template-columns: minmax(0, 1fr); }
.story-confirm .claim-consent { grid-template-columns: 24px minmax(0, 1fr); }
.story-confirm .btn { justify-self: start; max-width: 100%; white-space: normal; }
.story-who { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.story-who legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--dim); }
.story-public-fields { display: grid; gap: 10px; margin: 4px 0 8px; }
@supports selector(:has(a)) {
  .story-who:not(:has(input[value="public"]:checked)) .story-public-fields { display: none; }
}
.story-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 28px; }
.adm-story-diff .adm-src { grid-column: auto; }
.story-mark { padding: 0 2px; border-radius: 3px; background: var(--sunk); color: var(--coral-ink); font-weight: 650; }
.story-answer { margin: 0 0 8px !important; font-size: 14px !important; }
@media (min-width: 720px) {
  .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-block .story-list { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------- личный план переезда

   Форма под содержимое (DESIGN.md): у шагов есть даты, поэтому шкала с засечками цветом срочности,
   время идёт вперёд, шаги без срока отдельным куском. Коралл — сроки, бирюза — действие и ссылки. */

.plan-entry { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px;
              border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); }
.plan-entry b { display: block; font-weight: 700; line-height: 1.25; }
.plan-entry small { display: block; color: var(--dim); font-size: 14px; margin-top: 2px; }
.plan-entry > span:nth-child(2) { flex: 1; min-width: 0; }
.plan-entry-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid;
                   place-items: center; background: var(--coral); color: var(--on-coral); }
.plan-entry > .icon { color: var(--sea-ink); }
.plan-route-go { margin-top: 16px; }
.plan-record { margin-top: 20px; }
.plan-record a, .home-faq a { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
                              border-radius: var(--r-m); background: var(--sunk); font-weight: 600;
                              color: var(--sea-ink); }
.plan-record span, .home-faq span { flex: 1; min-width: 0; line-height: 1.3; }
.home-faq { margin-top: 12px; }

.plan-wrap { max-width: 720px; }
.plan-form { display: grid; gap: 20px; margin-top: 18px; padding-bottom: 24px; }
.plan-q { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.plan-q legend { display: flex; gap: 10px; align-items: baseline; padding: 0; font: 700 18px/1.25 var(--text); }
.plan-q-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid;
            place-items: center; background: var(--deep); color: var(--on-deep); font-size: 13px;
            transform: translateY(-1px); }
.plan-q-hint { color: var(--dim); font-size: 14px; margin: 2px 0 2px 36px; }
.plan-opt { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; min-height: 48px;
            border-radius: var(--r-m); background: var(--card); cursor: pointer;
            box-shadow: inset 0 0 0 1.5px var(--line); }
.plan-opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sea); }
.plan-opt b { display: block; font-weight: 600; line-height: 1.3; }
.plan-opt small { display: block; color: var(--dim); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.plan-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--sea); }
.plan-opt:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }
.plan-date { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sunk);
             font-size: 14px; font-weight: 600; }
.plan-date[hidden] { display: none; }
.plan-date input { width: 100%; height: 46px; padding: 0 12px; border: 0; border-radius: var(--r-s);
                   background: var(--card); color: var(--ink); font: 500 16px var(--text);
                   box-shadow: inset 0 0 0 1.5px var(--line); }
.plan-go { width: 100%; }
.plan-private { display: flex; gap: 8px; font-size: 14px; color: var(--dim); }
.plan-private .icon { width: 18px; height: 18px; color: var(--sea); }
.plan-error { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sunk);
              color: var(--coral-ink); font-weight: 600; }

.plan-summary { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-summary li { padding: 6px 12px; border-radius: 99px; background: var(--sunk); font-size: 13px; line-height: 1.3; }
.plan-change { margin-top: 10px; font-size: 14px; }
.plan-change a { color: var(--sea-ink); text-decoration: underline; }
.plan-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-m);
             background: var(--sunk); font-size: 14px; line-height: 1.4; }
.plan-note .icon { width: 20px; height: 20px; color: var(--dim); }
.plan-progress { position: relative; margin-top: 14px; padding: 10px 14px; border-radius: var(--r-m);
                 background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700;
                 overflow: hidden; isolation: isolate; }
.plan-progress::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sunk);
                         transform-origin: left; transform: scaleX(var(--done, 0));
                         transition: transform .25s var(--ease); }
.plan-together { margin-top: 12px; }
.plan-sec { margin-top: 26px; }
.plan-sec h2 { font-size: 20px; }
.plan-sec > .note { margin-top: 4px; }
.plan-line { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.plan-line::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px;
                     background: var(--line); }
.plan-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px;
             padding-bottom: 18px; }
.plan-step:last-child { padding-bottom: 0; }
.plan-check { display: grid; place-items: start center; cursor: pointer; }
.plan-check input { position: absolute; opacity: 0; width: 32px; height: 32px; margin: 0; cursor: pointer; }
.plan-box { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
            background: var(--card); box-shadow: inset 0 0 0 2px var(--line); color: transparent; }
.plan-box .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.plan-later .plan-box { box-shadow: inset 0 0 0 2px var(--sea); }
.plan-soon .plan-box, .plan-today .plan-box, .plan-overdue .plan-box { box-shadow: inset 0 0 0 2px var(--coral); }
.plan-check input:focus-visible + .plan-box { outline: 2px solid var(--sea); outline-offset: 2px; }
.plan-check input:checked + .plan-box { background: var(--sea); box-shadow: none; color: #fff; }
.plan-step-body { min-width: 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--card);
                  box-shadow: var(--shadow); }
.plan-step h3 { font: 700 16px/1.3 var(--text); }
.plan-due { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-bottom: 4px;
            font-size: 14px; font-variant-numeric: tabular-nums; }
.plan-due b { color: var(--coral-ink); font-weight: 800; }
.plan-due span { color: var(--dim); }
.plan-overdue .plan-due span { color: var(--coral-ink); font-weight: 600; }
.plan-why { margin-top: 6px; color: var(--dim); font-size: 14px; line-height: 1.4; }
.plan-rec { display: flex; gap: 6px; margin-top: 8px; color: var(--sea-ink); font-size: 14px; font-weight: 600;
            line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; }
.plan-rec .icon { width: 16px; height: 16px; margin-top: 1px; }
.plan-checked { margin-top: 4px; color: var(--faint); font-size: 12px; }
.plan-checked em { font-style: normal; color: var(--coral-ink); }
.plan-step.is-done .plan-step-body { opacity: .62; box-shadow: none; }
.plan-step.is-done h3 { text-decoration: line-through; }
.plan-save { margin-top: 28px; padding: 20px; border-radius: var(--r-l); background: var(--deep);
             color: var(--on-deep); display: grid; gap: 10px; justify-items: start; }
.plan-save h2 { font-size: 20px; color: #fff; }
.plan-save small { font-size: 13px; color: rgba(241, 247, 246, .78); line-height: 1.4; }
.plan-only-ru { margin-top: 24px; }
.plan-link-note { margin: 18px 0 24px; }

/* ------------------------------------------------------------- вопросы /faq */

.faq-wrap { max-width: 860px; }
.faq-sec { scroll-margin-top: calc(var(--top) + 12px); }
.faq-list { display: grid; gap: 10px; }
.faq-item { overflow-wrap: anywhere; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow);
            scroll-margin-top: calc(var(--top) + 12px); }
.faq-item h3 { font: 700 17px/1.3 var(--text); }
.faq-item > p:not(.faq-more) { margin-top: 6px; font-size: 15px; line-height: 1.45; }
.faq-more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
            margin-top: 10px; }
.faq-more a { display: inline-flex; gap: 4px; align-items: center; color: var(--sea-ink); font-weight: 600;
              font-size: 14px; }
.faq-more .icon { width: 16px; height: 16px; }
.faq-more small { color: var(--faint); font-size: 12px; }
.faq-note { margin: 20px 0 24px; }

/* ------------------------------------------------------ сравнения районов */

.cmp-wrap { max-width: 980px; }
.cmp-scroll { margin-top: 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow);
              overflow: hidden; }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.cmp-table thead th { padding: 14px 10px 12px; text-align: left; vertical-align: bottom; font: 700 15px/1.2 var(--text);
                      overflow-wrap: anywhere; }
.cmp-table thead a { color: var(--sea-ink); }
.cmp-table thead small { display: block; margin-top: 3px; font: 500 12px var(--text); color: var(--dim); }
.cmp-table tbody th { padding: 11px 10px 11px 14px; text-align: left; font-weight: 500; color: var(--dim);
                      font-size: 13px; line-height: 1.3; }
.cmp-table td { padding: 11px 10px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: top;
                overflow-wrap: anywhere; line-height: 1.3; }
.cmp-table td a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 2px; }
.cmp-table tbody tr { border-top: 1px solid var(--line); }
.cmp-none { color: var(--faint); font-weight: 400; font-size: 13px; }
.cmp-basis { margin-top: 10px; }
.cmp-leads { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cmp-leads li { padding: 11px 14px; border-radius: var(--r-m); background: var(--sunk); line-height: 1.4; font-size: 15px; }
.cmp-leads + .note { margin-top: 8px; }
.cmp-intros { display: grid; gap: 10px; }
.cmp-intro { padding: 14px 16px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow);
             display: grid; gap: 8px; justify-items: start; align-content: start; }
.cmp-intro h3 { font: 700 17px/1.25 var(--text); }
.cmp-intro h3 a { color: inherit; }
.cmp-others { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-others .chip { flex: 0 1 auto; white-space: normal; line-height: 1.25; }
.cmp-hub { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cmp-hub a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 22px; gap: 10px; align-items: center;
             padding: 14px 16px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.cmp-hub-side { min-width: 0; }
.cmp-hub-side b { display: block; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.cmp-hub-side small { color: var(--dim); font-size: 12px; }
.cmp-vs { color: var(--faint); font-size: 13px; }
.cmp-hub .icon { color: var(--sea-ink); }

@media (min-width: 768px) {
  .plan-form { gap: 26px; }
  .plan-save { padding: 28px; }
  .cmp-intros { grid-template-columns: 1fr 1fr; }
  .cmp-hub { grid-template-columns: 1fr 1fr; }
  .cmp-table { font-size: 16px; }
  .cmp-table tbody th { font-size: 15px; padding-left: 20px; }
  .cmp-table thead th { font-size: 18px; padding-top: 18px; }
}

/* Заголовок источника бывает длинным словом без пробелов (адрес): не распирает страницу. */
.sources li > span { min-width: 0; overflow-wrap: anywhere; }
.prose p, .prose li, .answer p { overflow-wrap: break-word; }


/* -------------------------------------------- публичные вопросы (.q-*)
   Вопрос читателя, ответ из сверенных записей: морская линейка, а не коралловая у рассказов.
   Это не чужой опыт, а справка, но и не запись: метка и источники с датами всегда на виду. */

.q-page { max-width: 760px; }
.q-article { display: block; }
.q-article h2 { margin: 26px 0 10px; }
.q-page .sec h2 { margin-bottom: 12px; }
.q-label { display: inline-flex; gap: 6px; align-items: center; width: fit-content; font-size: 12.5px; font-weight: 700; color: var(--sea-ink); }
.q-label .icon { width: 15px; height: 15px; }
.q-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.q-card { display: grid; gap: 6px; padding: 14px 16px; border-left: 3px solid var(--sea); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--sunk); color: inherit; }
a.q-card:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.q-card b { font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.q-excerpt { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.q-card small { font-size: 12.5px; color: var(--dim); }
.q-block { display: grid; gap: 10px; margin: 26px 0; padding: 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--line); }
.q-block h2 { margin: 0; font-size: 19px; }
.q-answer { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.q-answer p { margin: 0 0 14px; }
.q-answer ul { margin: 0 0 14px; padding-left: 20px; }
.q-answer li { margin-bottom: 8px; }
.q-stale { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-s); background: var(--sunk); box-shadow: inset 0 0 0 1.5px var(--coral); font-size: 14.5px; line-height: 1.5; }
.q-sources { display: grid; gap: 10px; margin: 10px 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.q-sources li { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.q-sources a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; }
.q-sources small { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.q-cta { margin: 22px 0; }
.q-offer { display: grid; gap: 10px; justify-items: start; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.q-offer p { display: grid; gap: 2px; margin: 0; font-size: 15px; }
.q-offer small { font-size: 13.5px; line-height: 1.45; color: var(--dim); }
.q-said { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.q-said p { margin: 0; }
.q-said-text { padding: 10px 14px; border-left: 3px solid var(--sea); background: var(--sunk); border-radius: 0 var(--r-s) var(--r-s) 0; overflow-wrap: anywhere; }
.q-admin-answer { white-space: pre-line; }

/* Длинная строка кода листается внутри блока, а не двигает страницу (`/mcp` на телефоне). */
.wrap pre { overflow-x: auto; max-width: 100%; }


/* ------------------------------------------------------------ графика записи и плана */

.art-strip { height: 104px; margin: 10px 0 14px; overflow: hidden; border-radius: var(--r-l);
             background: var(--card); }
.art-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) { .art-strip { height: 148px; } }

/* Счёт ответов без скрипта: форма плана работает и с выключенным JS. */
.plan-track { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; padding: 8px 0;
              background: var(--bg); }
.plan-track span { flex: 1; height: 5px; border-radius: 99px;
                   background: color-mix(in srgb, var(--sea) 18%, transparent);
                   transition: background-color .25s ease; }
.plan-wrap:has(.plan-q:nth-of-type(1) input:checked) .plan-track span:nth-child(1),
.plan-wrap:has(.plan-q:nth-of-type(2) input:checked) .plan-track span:nth-child(2),
.plan-wrap:has(.plan-q:nth-of-type(3) input:checked) .plan-track span:nth-child(3),
.plan-wrap:has(.plan-q:nth-of-type(4) input:checked) .plan-track span:nth-child(4),
.plan-wrap:has(.plan-q:nth-of-type(5) input:checked) .plan-track span:nth-child(5),
.plan-wrap:has(.plan-q:nth-of-type(6) input:checked) .plan-track span:nth-child(6) {
  background: var(--sea); }

/* Сколько записи прочитано. Браузер без привязки к скроллу просто не покажет линию. */
.read-line { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .art-strip img { animation: art-settle 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (animation-timeline: scroll()) {
    .read-line { display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 3px;
                 background: var(--coral, var(--sea)); transform-origin: 0 50%;
                 animation: read-grow linear both; animation-timeline: scroll(root); }
  }
}
@keyframes art-settle { from { transform: scale(1.07); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes read-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ------------------------------------------------------------ графика новостей */

.nrow .nwhen { grid-row: span 3; display: grid; justify-items: start; align-content: start; gap: 8px; }
.nrow .nwhen time { grid-row: auto; padding-top: 2px; }
.ntile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
         color: var(--c, var(--sea-ink)); background: color-mix(in srgb, var(--c, var(--sea)) 14%, transparent); }
.ntile .icon { width: 18px; height: 18px; }

/* Рисунок на главной новости: линии глубин острова, у тревоги ещё и дождь. */
.lead-story { position: relative; overflow: hidden; isolation: isolate; }
.lead-story::after { content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
                     opacity: .09; background: url("img/contours.svg") center / cover no-repeat; }
.lead-story.t-alert::before { content: ""; position: absolute; inset: -40% -20%; z-index: -1;
  pointer-events: none; opacity: .13; transform: rotate(14deg);
  background: repeating-linear-gradient(90deg, transparent 0 22px, #fff 22px 23px, transparent 23px 47px) 0 0 / 47px 100%; }
@media (prefers-reduced-motion: no-preference) {
  .lead-story::after { animation: lead-drift 26s ease-in-out infinite alternate; }
  .lead-story.t-alert::before { animation: lead-rain 1.6s linear infinite; }
}
@keyframes lead-drift { from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
                        to { transform: translate3d(2%, 1%, 0) scale(1.06); } }
@keyframes lead-rain { from { background-position: 0 0; } to { background-position: -47px 0; } }