/*!
 * СНТ «Мичуринец» — новостной портал садового товарищества.
 * Дизайн и разработка: Artem Ignatov, 2026. Все права защищены (All rights reserved).
 * Несанкционированное копирование кода и оформления запрещено.
 * Права на код и дизайн переходят к СНТ «Мичуринец» после полной оплаты.
 * Маркер подлинности (не удалять): AI-MICHURINETS-2026-7F3A9C
 */
/* ============================================================
   СНТ МИЧУРИНЕЦ — главная таблица стилей
   Стиль: ретро-газета 1960–70-х на современном каркасе.
   Весь визуал управляется токенами ниже — меняй здесь.
   ============================================================ */

/* ---------- 1. ДИЗАЙН-ТОКЕНЫ ---------- */
:root {
  /* Цвета */
  --color-bg:        #f7f3e9;   /* фон страницы (газетная бумага) */
  --color-bg-panel:  #f1ece0;   /* фон врезок и панелей */
  --color-ink:       #1a1a1a;   /* основной текст, шапка, линейки */
  --color-accent:    #b3242b;   /* классический газетный красный */
  --color-accent-dk: #8a1a20;   /* тёмный акцент (ховеры) */
  --color-on-accent: #fbf6ea;   /* текст на акцентном фоне */
  --color-secondary: #6a655a;   /* вторичный текст (даты, мета) */
  --color-divider:   #e6dfcd;   /* тонкие разделители — бледнее, чтобы не спорили с жирными линиями заголовков */
  --color-rule:      #1a1a1a;   /* жирные газетные линейки */

  /* Типографика */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'PT Serif', Georgia, serif;
  --font-ui:      'PT Sans', system-ui, -apple-system, sans-serif;

  /* Размеры и ритм */
  --maxw:    1360px;
  --gap:     2.2rem;
  --fs-base: 1.125rem;          /* 18px — крупнее ради читаемости */

  /* Анимации */
  --anim-duration: 0.55s;
  --anim-ease:     cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ---------- 2. БАЗА ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  font-feature-settings: "liga", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

/* видимый фокус с клавиатуры: у полей форм свой (секция 29), это общий для ссылок и кнопок */
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- 3. ТИПОГРАФИКА ---------- */
.kicker {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 900; line-height: 1.12; margin: 0; }

.lead-title   { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.01em; }
.story-title  { font-size: 1.45rem; font-weight: 700; }
.story-title-sm { font-size: 1.15rem; font-weight: 700; }

.byline {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-secondary);
  margin-top: 0.9rem;
}
.byline__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-divider);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--color-ink);
  flex: none;
}
.byline strong { color: var(--color-ink); font-weight: 700; }

.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  float: left;
  font-size: 3.4rem;
  line-height: 0.8;
  padding: 0.18rem 0.5rem 0 0;
  color: var(--color-accent);
}

p { margin: 0 0 1rem; }

/* газетные линейки */
.rule        { border: 0; border-top: 1px solid var(--color-divider); margin: 1.4rem 0; }
.rule--heavy { border-top: 3px solid var(--color-rule); }
.rule--double { height: 4px; border: 0; border-top: 3px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule); }

/* ---------- 4. ВЕРХНЯЯ МЕТА-ПЛАНКА ---------- */
.topbar {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-divider);
}
.topbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.topbar__inner a { text-decoration: none; }
.topbar__right { display: flex; gap: 1.2rem; align-items: center; }
.topbar__right a { display: inline-flex; align-items: center; gap: 0.35rem; }
.topbar__right a svg { width: 13px; height: 13px; flex: none; }
.topbar__right a img { width: 15px; height: auto; flex: none; display: block; }

/* ---------- 5. МАСТХЕД (шапка-газета) ---------- */
.masthead { padding: 1.6rem 0 1.2rem; }
.masthead__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

/* эмблема СНТ */
.emblem { display: flex; align-items: center; gap: 0.8rem; }
.emblem__badge {
  width: 74px; height: 74px; flex: none;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-bg);
}
.emblem__badge svg { width: 40px; height: 40px; }
.emblem__text { font-family: var(--font-ui); line-height: 1.2; }
.emblem__text b { font-weight: 700; letter-spacing: 0.1em; font-size: 0.8rem; text-transform: uppercase; }
.emblem__text span { display: block; font-size: 0.72rem; color: var(--color-secondary); }

/* название газеты */
.masthead__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-align: center;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: 0.02em;
  line-height: 0.96;
  text-transform: uppercase;
}
.masthead__sub {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-top: 0.5rem;
}

/* контактная карточка справа */
.masthead__contact {
  justify-self: end;
  text-align: right;
  font-family: var(--font-ui);
  border-left: 1px solid var(--color-divider);
  padding-left: 1.2rem;
}
.masthead__contact .label {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-secondary);
}
.masthead__contact .phone {
  font-family: var(--font-body); font-weight: 700; font-size: 1.5rem;
  margin: 0; white-space: nowrap;
}
.btn-tg {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none;
  border: 1.5px solid var(--color-ink);
  padding: 0.32rem 0.7rem;
  transition: background var(--anim-duration), color var(--anim-duration);
}
.btn-tg svg { width: 16px; height: 16px; }
.btn-tg:hover { background: var(--color-ink); color: var(--color-bg); }

/* дата под названием */
.masthead__dateline {
  display: flex; justify-content: center; align-items: center; gap: 1rem;
  font-family: var(--font-ui); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-secondary);
  margin-top: 1rem;
}
.masthead__dateline span { white-space: nowrap; }
.masthead__dateline .line { flex: 1; height: 1px; background: var(--color-divider); max-width: 120px; }

/* ---------- 6. ТИКЕР (бегущая строка) ---------- */
.ticker { font-family: var(--font-ui); }
/* фон — на .ticker__inner (= .container), а не на всю ширину окна: на широких
   мониторах чёрная плашка раньше «убегала» далеко за край текста колонки.
   background-clip: content-box — чтобы плашка не заезжала на боковые padding'и
   контейнера: иначе она на 24px с каждой стороны шире линеек шапки и колонок. */
.ticker__inner {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--color-ink); color: var(--color-bg);
  background-clip: content-box;
}
.ticker__label {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0 1rem; flex: none; white-space: nowrap;
}
.ticker__label svg { width: 14px; height: 14px; }
.ticker__track { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker__move {
  display: inline-flex; white-space: nowrap;
  padding: 0.55rem 0;
  animation: ticker-scroll 38s linear infinite;
}
.ticker__move span { padding: 0 2rem; font-size: 0.86rem; }
.ticker__move span::before { content: "◆"; color: var(--color-accent); margin-right: 2rem; font-size: 0.6rem; vertical-align: middle; }
.ticker:hover .ticker__move { animation-play-state: paused; }
.ticker.is-paused .ticker__move { animation-play-state: paused; } /* тап-пауза на сенсорных (main.js) */

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 7. НАВИГАЦИЯ ---------- */
.nav {
  /* непрозрачный фон «газетной бумаги» задаётся в секции 22 (меню липкое — под ним
     прокручивается текст), здесь его не дублируем, чтобы не сбросить зерно */
  position: sticky; top: 0; z-index: 50;
}
/* линия — по ширине колонки (.nav__inner = .container), не во всё окно (см. секцию 6).
   Рисуем псевдоэлементом внутри padding'ов, а не border'ом по краю блока: border лёг бы
   на 24px шире линеек шапки и колонок (та же причина, что и у плашки тикера). */
.nav__inner { display: flex; align-items: center; position: relative; }
.nav__inner::after {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0;
  border-bottom: 1px solid var(--color-rule);
}
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
}
.nav__list a {
  display: block;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; color: var(--color-ink);
  padding: 0.95rem 1.1rem;
  transition: color var(--anim-duration);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--color-accent); }
.nav__list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-accent); }

.nav__tools { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }
.icon-btn {
  background: none; border: 0; cursor: pointer; color: var(--color-ink);
  padding: 0.6rem; display: grid; place-items: center;
}
.icon-btn svg { width: 22px; height: 22px; }
.nav__burger { display: none; }
.nav__mark { display: inline-flex; align-items: center; color: var(--color-ink); padding: 0 1.05rem 0 0.1rem; }
.nav__mark svg { width: 24px; height: 16px; }

/* ---------- 8. ОСНОВНАЯ СЕТКА (3 колонки) ---------- */
.layout {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: var(--gap);
  padding: 2rem 0 3rem;
}
.col { min-width: 0; }
.col--center { border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
  padding: 0 var(--gap); }

/* ---------- 9. ГЛАВНЫЙ МАТЕРИАЛ (центр) ---------- */
.lead__media { position: relative; margin-bottom: 1.1rem; }
.lead__arrow {
  position: absolute; right: 1rem; bottom: 1rem;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent);
  border: 0; cursor: pointer; display: grid; place-items: center;
}
.lead__arrow svg { width: 22px; height: 22px; }
.lead__excerpt { font-size: 1.12rem; }

/* ---------- 10. ПЛЕЙСХОЛДЕР ФОТО ---------- */
.photo {
  background:
    repeating-linear-gradient(135deg, #ddd5c4 0 12px, #d6cdba 12px 24px);
  border: 1px solid var(--color-divider);
  display: grid; place-items: center;
  color: var(--color-secondary);
  font-family: var(--font-ui); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  position: relative;
}
.photo svg { width: 30px; height: 30px; opacity: 0.5; }
.photo { overflow: hidden; }
.photo img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--lead   { aspect-ratio: 16 / 10; }
.photo--side   { aspect-ratio: 4 / 5; }
.photo--wide   { aspect-ratio: 16 / 9; }
.photo__cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(26,26,26,0.78); color: var(--color-bg);
  font-size: 0.68rem; letter-spacing: 0.04em; text-transform: none;
  padding: 0.3rem 0.6rem; text-align: left;
}

/* ---------- 11. МАЛЫЕ СТАТЬИ (левая колонка) ---------- */
.story { margin-bottom: 1.6rem; }
.story--media { display: grid; grid-template-columns: 1fr 96px; gap: 0.9rem; align-items: start; }
.story__excerpt { font-size: 0.96rem; color: #33312c; }

.readmore {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--color-ink);
}
.readmore svg { width: 28px; height: 12px; transition: transform var(--anim-duration); }
.readmore:hover { color: var(--color-accent); }
.readmore:hover svg { transform: translateX(5px); }

/* ---------- 12. ВРЕЗКА-CTA ---------- */
.cta {
  display: block; text-decoration: none;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: 1.3rem 1.4rem; margin: 1.6rem 0;
}
.cta .kicker { color: rgba(251,246,234,0.8); }
.cta h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--color-on-accent); }
.cta__eyebrow {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-on-accent); margin: 0 0 0.5rem;
}
.cta__action {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-on-accent);
}
.cta__action svg { width: 28px; height: 12px; transition: transform var(--anim-duration); }
.cta:hover .cta__action svg { transform: translateX(5px); }
.cta__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }
.cta__btn {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--color-on-accent); padding: 0.5rem 0.9rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.cta__btn svg { width: 24px; height: 11px; }

/* ---------- 12b. БАННЕР ДОСКИ ОБЪЯВЛЕНИЙ — готовая иллюстрация ----------
   Итоговая (третья) версия: заказчик прислал доработанный референс —
   reference/«Доска объявлений, новая.png» (текст без опечатки, в две строки,
   вертикальные пропорции, плашка «НОВИНКА» уже нарисована с кнопкой). Ставим
   картинкой целиком, вся площадь — одна ссылка. Предыдущие попытки (рваный край
   на CSS clip-path, затем текстура краёв из старого референса) убраны.
   Фон исходника — нейтрально-серый (R=G=B), бумага тёплая (R−B ≈ 60), поэтому
   прозрачность вырезана по «теплоте» цвета, а не по яркости: светлые участки
   бумаги остались целыми. WebP ~92 КБ основной + PNG8-фолбэк (~145 КБ) —
   исходный PNG24 весил 1,3 МБ, для дачного мобильного интернета это много.
   Нижняя треть листа на иллюстрации пустая — туда живым текстом ложится CTA
   «Подать объявление» (он масштабируется кнопкой А+, в отличие от текста
   на картинке). */
.board-banner {
  position: relative; display: block; text-decoration: none;
  /* на планшетных ширинах (680–980px) правая колонка растягивается на всю ширину
     страницы — без ограничения лист раздувался до ~840×1065px и подавлял соседние
     блоки (147–210px). Держим его в разумном размере и центрируем. */
  max-width: 360px;
  margin: 0 auto 1.6rem;
  filter: drop-shadow(0 6px 12px rgba(26, 22, 14, 0.26));
  transition: transform var(--anim-duration) var(--anim-ease);
}
.board-banner img { width: 100%; height: auto; display: block; }
.board-banner:hover { transform: translateY(-2px); }

/* CTA поверх пустого низа листа — ШТАМП (выбран заказчиком из 4 вариантов).
   Оттиск чернилами: двойная рамка, лёгкий наклон, Playfair — тот же шрифт, что
   и заголовок на самой иллюстрации. mix-blend-mode: multiply даёт эффект краски,
   впитавшейся в бумагу (сквозь штамп просвечивают пятна и сгибы листа), а не
   наклейки поверх. При наведении оттиск чуть насыщеннее. */
.board-banner__action {
  position: absolute; left: 50%; top: 60%;
  transform: translateX(-50%) rotate(-4deg);
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(0.95rem, 2.1vw, 1.15rem); letter-spacing: 0.04em; text-transform: uppercase;
  color: #a8202a;
  border: 3px double #a8202a; border-radius: 3px;
  padding: 0.5rem 1rem;
  opacity: 0.88; mix-blend-mode: multiply;
  white-space: nowrap;
  transition: opacity var(--anim-duration);
}
.board-banner:hover .board-banner__action { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .board-banner, .board-banner__action { transition: none; }
  .board-banner:hover { transform: none; }
}

/* ---------- 13. ПРАВАЯ КОЛОНКА: объявления + подписка ---------- */
.panel-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: 0;
  line-height: 1.12; color: var(--color-ink);
  border-bottom: 3px solid var(--color-rule);
  padding-bottom: 0.4rem; margin-bottom: 1rem;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.1rem 0.7rem;   /* в тесной колонке съезжает ссылка «все →», не заголовок */
}
/* иконка + текст заголовка держатся вместе: без обёртки flex-раскладка
   (justify-content: space-between) растащила бы их к разным краям.
   Высота 0.68em, а не 1em: заглавные буквы занимают лишь ~0.7 от кегля, поэтому
   иконка «в размер шрифта» выглядит заметно крупнее текста. 0.68em ≈ рост букв. */
.panel-title__label { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.panel-title__label img { height: 0.68em; width: auto; flex: none; }

/* ссылка-довесок «все →» — оставляем мелкой, служебной, чтобы не спорила с крупным заголовком */
.panel-title a {
  color: var(--color-accent); text-decoration: none;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; flex: none; margin-left: auto;   /* держится справа, даже когда съезжает на 2-ю строку */
}

.ann {
  display: block; text-decoration: none; color: inherit;
  padding: 0.9rem 0; border-bottom: 1px solid var(--color-divider);
}
.ann:first-of-type { padding-top: 0; }
.tag {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; margin-bottom: 0.45rem;
  border: 1px solid currentColor;
}
.tag--sale    { color: #1f7a4d; }   /* продаю */
.tag--service { color: #2960a8; }   /* услуги */
.tag--free    { color: #b3242b; }   /* отдам */
.tag--buy     { color: #8a5a16; }   /* куплю */
.ann__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.ann__meta  { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-secondary); margin-top: 0.3rem;
  display: flex; justify-content: space-between; }
.ann__price { color: var(--color-accent); font-weight: 700; }

.subscribe {
  border: 2px solid var(--color-ink);
  padding: 1.2rem; margin-top: 1.8rem; text-align: center;
}
.subscribe svg.tg { width: 32px; height: 32px; color: var(--color-accent); }
.subscribe h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0.5rem 0; }
.subscribe p { font-family: var(--font-ui); font-size: 0.84rem; color: var(--color-secondary); }
.subscribe .btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  background: var(--color-ink); color: var(--color-bg);
  padding: 0.6rem 1.1rem; margin-top: 0.6rem;
  transition: background var(--anim-duration);
}
.subscribe .btn:hover { background: var(--color-accent); }

/* ---------- 14. ФУТЕР ---------- */
.footer {
  background: var(--color-ink); color: #cfc9bb;
  font-family: var(--font-ui); font-size: 0.86rem;
  padding: 2.6rem 0 1.4rem; margin-top: 1rem;
}
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.footer h4 {
  font-family: var(--font-ui); font-weight: 700; color: #fff;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.footer__brand-name { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: #fff; letter-spacing: 0.05em; text-transform: uppercase; }
.footer a { color: #cfc9bb; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.5rem; }
.footer__bottom {
  border-top: 1px solid #3a3a37; margin-top: 2rem; padding-top: 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.76rem; color: #8d887d;
}

/* ---------- 15. АНИМАЦИИ ПОЯВЛЕНИЯ ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.reveal { opacity: 0; animation: fadeUp var(--anim-duration) var(--anim-ease) forwards; }
.reveal.d1 { animation-delay: 0.05s; }
.reveal.d2 { animation-delay: 0.18s; }
.reveal.d3 { animation-delay: 0.31s; }
.reveal.d4 { animation-delay: 0.44s; }

/* .col--right — предок липкого .ad-sticky (position: sticky). transform в fadeUp
   (даже завершённый, с forwards) в части браузеров создаёт containing block и ломает
   прилипание потомка — здесь анимируем только opacity, без translateY. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.col--right.reveal { animation-name: fadeIn; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; animation: none; }
  .ticker__move { animation: none; }
}

/* ---------- 16. АДАПТИВ ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr 1fr; }
  .col--right { grid-column: 1 / -1; border-top: 3px solid var(--color-rule); padding-top: 1.5rem; }
  .col--center { border-right: 0; padding-right: 0; }
}

@media (max-width: 680px) {
  :root { --fs-base: 1.06rem; }
  .masthead__grid { grid-template-columns: 1fr; gap: 0.8rem; text-align: center; }
  .emblem { justify-content: center; }
  .masthead__contact { justify-self: center; text-align: center; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--color-divider); padding-top: 0.8rem; }
  .topbar__inner { font-size: 0.66rem; }

  .nav__inner { position: relative; }
  .nav__burger { display: grid; }
  .nav__mark { display: none; }
  .nav__list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--color-bg);
    border-bottom: 3px solid var(--color-rule); box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  }
  .nav__list.open { display: flex; }
  .nav__list a { padding: 0.9rem 1.5rem; border-top: 1px solid var(--color-divider); }

  .layout { grid-template-columns: 1fr; }
  .col--center { border-left: 0; padding-left: 0; }
  .col--left, .col--center { border-bottom: 3px solid var(--color-rule); padding-bottom: 1.5rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- 17. ВИДЖЕТ ПОГОДЫ (в дейтлайне/folio, в одну строку) ---------- */
.wx { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-ink); }
.wx__icon { display: inline-flex; }
.wx__icon svg { width: 19px; height: 19px; flex: none; }
.wx b { font-size: 1.05rem; }
.wx-cond { color: var(--color-secondary); font-size: 0.8rem; }

/* ---------- 18. СЛАЙД-ШОУ ФОТО (ручное перелистывание + автосмена, JS main.js) ---------- */
.slideshow { position: relative; aspect-ratio: 16 / 10; }
.slideshow .photo--lead {
  position: absolute; inset: 0; aspect-ratio: auto;
  opacity: 0; transition: opacity 1s ease;
}
.slideshow .s1 { opacity: 1; } /* видно сразу — до того как отработает JS, и на печати/без JS */
.slideshow .photo--lead.is-active { opacity: 1; }
.slideshow .s2 { background: repeating-linear-gradient(135deg, #d9d1bd 0 12px, #cfc7b1 12px 24px); }
.slideshow .s3 { background: repeating-linear-gradient(135deg, #cdc4ad 0 12px, #c4bba4 12px 24px); }

.slideshow__dots { position: absolute; top: 0.8rem; left: 0.8rem; display: flex; gap: 6px; z-index: 2; }
.slideshow__dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(251,246,234,0.55); transition: background 0.3s ease;
}
.slideshow__dots i.is-active { background: var(--color-accent); }

/* стрелки ручного перелистывания — всегда видны (не только по hover: сенсорные экраны,
   пожилая аудитория сайта — см. CLAUDE.md) */
.slideshow__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(26,26,26,0.45); color: #fff;
  transition: background var(--anim-duration);
}
.slideshow__nav:hover, .slideshow__nav:focus-visible { background: var(--color-accent); }
.slideshow__nav svg { width: 18px; height: 18px; }
.slideshow__nav--prev { left: 0.6rem; }
.slideshow__nav--next { right: 0.6rem; }
.slideshow--single .slideshow__nav { display: none; }

/* ---------- 19. ВНЕШНИЕ НОВОСТИ (Волгоград, v1.ru) ---------- */
.panel-title .src {
  color: var(--color-accent); font-size: 0.66rem; display: inline-flex; align-items: center; gap: 0.25rem;
}
.panel-title .src svg { width: 12px; height: 12px; }
.ext-news {
  display: grid; grid-template-columns: 100px 1fr; gap: 0.9rem;
  align-items: stretch;   /* фото тянется по высоте блока новости (как на референсе) */
  text-decoration: none; color: inherit;
  padding: 0.9rem 0; border-bottom: 1px solid var(--color-divider);
}
.ext-news:first-of-type { padding-top: 0; }
/* было квадрат 1:1 — теперь вытянутое фото по высоте текста; потолок, чтобы у длинных
   заголовков горизонтальное фото не резалось в тонкий вертикальный ломтик */
.photo--ext { aspect-ratio: auto; height: 100%; min-height: 108px; max-height: 176px; }
.photo--ext svg { width: 22px; height: 22px; }
.ext-cat {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent);
}
.ext-news__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.22; margin: 0.2rem 0; }
.ext-news:hover .ext-news__title { color: var(--color-accent); }
.ext-news__meta { font-family: var(--font-ui); font-size: 0.72rem; color: var(--color-secondary); }

/* «витрина»: первая новость Волгограда — крупная лид-карточка (фото 16:9 сверху,
   заголовок покрупнее), остальные — компактным списком. Газетный приём: заглавная
   + мелкие, как у центрального «лида» с hr.rule--heavy. display:block переворачивает
   grid-раскладку .ext-news в вертикальный стек — разметку внутри менять не пришлось. */
.ext-news--feature {
  display: block;
  padding-bottom: 1.2rem; margin-bottom: 0.2rem;
  border-bottom: 3px solid var(--color-rule);
}
.ext-news--feature .photo--ext {
  aspect-ratio: 16 / 9; width: 100%; height: auto; min-height: 0; max-height: none;
  margin-bottom: 0.75rem;
}
.ext-news--feature .photo--ext svg { width: 34px; height: 34px; }
.ext-news--feature .ext-cat { font-size: 0.68rem; }
.ext-news--feature .ext-news__title { font-size: 1.32rem; line-height: 1.2; margin: 0.35rem 0 0.3rem; }
.ext-news--feature .ext-news__meta { font-size: 0.76rem; }

.ext-note {
  font-family: var(--font-ui); font-size: 0.74rem; font-style: italic;
  color: var(--color-secondary); margin-top: 1rem;
  display: flex; align-items: center; gap: 0.45rem;
}
.ext-note svg { width: 15px; height: 15px; flex: none; }

/* ---------- 20. РЕКЛАМНЫЙ / ПРИЛИПАЮЩИЙ БАННЕР ---------- */
.ad-sticky { position: sticky; top: 5rem; }
.ad-banner {
  display: block; text-decoration: none;
  border: 2px dashed var(--color-divider); background: var(--color-bg-panel);
  text-align: center; padding: 1.5rem 1rem; margin-top: 1.8rem;
  color: var(--color-secondary); font-family: var(--font-ui);
}
.ad-banner b { display: block; font-family: var(--font-display); font-weight: 700;
  color: var(--color-ink); font-size: 1.15rem; margin-bottom: 0.35rem; }
.ad-banner .small { font-size: 0.76rem; }

/* ---------- 21. ШАПКА: эмблема-печать + телефонное «ухо» ---------- */
.emblem__badge { width: 86px; height: 86px; border: 0; border-radius: 0; background: none; }
.emblem__badge svg { width: 86px; height: 86px; }
/* растровая печать (assets/img/logo-seal.png) — квадратный кроп, контур сам по себе круглый */
.emblem__badge img { width: 100%; height: 100%; display: block; object-fit: contain; }
.seal-text {
  /* используется только в logo-variants.html (служебная страница сравнения, не часть сайта) */
  font-family: var(--font-ui); font-weight: 700;
  font-size: 9.5px; letter-spacing: 1.3px;
  fill: var(--color-ink); stroke: none;
}

.masthead__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
.ear__line { display: flex; align-items: center; gap: 0.65rem; }
.ear__phone { flex: none; color: var(--color-ink); display: inline-flex; }
/* растровая иллюстрация (assets/img/phone-vintage.png), было 54px у прежней тонкой SVG-линии —
   детальная печать с полутонами держит крупный размер лучше */
.ear__phone img { width: 72px; height: auto; display: block; }

/* на средних экранах прячем рисунок телефона и ужимаем заголовок/номер, чтобы ничего не клипалось */
@media (max-width: 1120px) and (min-width: 681px) {
  .ear__phone { display: none; }
  .masthead__title { font-size: clamp(2.2rem, 5.2vw, 3.5rem); }
  .masthead__contact .phone { font-size: 1.3rem; }
}
@media (max-width: 680px) {
  .masthead__contact { align-items: center; text-align: center; }
  .ear__phone img { width: 64px; }
}

/* ---------- 22. РЕТРО-ДОРАБОТКИ: бумага, folio, дек, halftone ---------- */

/* газетная бумага: лёгкое зерно + тёплая виньетка по краям */
body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(125% 95% at 50% 26%, rgba(74,58,28,0) 58%, rgba(74,58,28,0.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: cover, 170px 170px;
  background-attachment: fixed, fixed;
}

/* Меню липкое (sticky) — под ним прокручивается текст, поэтому фон обязан быть
   непрозрачным. Плоская заливка `--color-bg` выглядела светлее остального сайта:
   не хватало зерна. Даём то же зерно, но БЕЗ `background-attachment: fixed` —
   на sticky-элементе фиксированный фон заставляет перерисовывать меню на каждом
   кадре прокрутки и подвешивает страницу. Зерно — случайный шум, поэтому
   несовпадение тайла с фоном body на глаз неразличимо. Виньетку не повторяем:
   у верхней кромки страницы, где живёт меню, она полностью прозрачна. */
.nav {
  background-color: var(--color-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 170px 170px;
}

/* halftone-плейсхолдеры фото (как печать в старых газетах) */
.photo {
  background-color: #d4ccb6;
  background-image: radial-gradient(circle, rgba(26,26,26,0.5) 1.1px, transparent 1.5px);
  background-size: 6px 6px;
}
.slideshow .s2 {
  background-color: #cdc5af;
  background-image: radial-gradient(circle, rgba(26,26,26,0.5) 1.25px, transparent 1.65px);
  background-size: 7px 7px;
}
.slideshow .s3 {
  background-color: #c7bea8;
  background-image: radial-gradient(circle, rgba(26,26,26,0.5) 1px, transparent 1.4px);
  background-size: 5px 5px;
}

/* фальц-строка газеты (folio) */
.folio {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-secondary);
  border-top: 4px double var(--color-ink);
  border-bottom: 4px double var(--color-ink);
  padding: 0.5rem 0; margin-top: 1.1rem;
}
.folio__center { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-ink); }
.folio__center svg { width: 13px; height: 13px; flex: none; }
.folio__center img { width: 18px; height: 18px; flex: none; }
#todayDate { font-size: 0.86rem; }
/* живые часы (чч:мм:сс) — вместо прежнего «Распространяется бесплатно» */
.folio__time { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-ink); }
.folio__time img { width: 18px; height: 18px; flex: none; }
#folioClock {
  font-size: 0.86rem; letter-spacing: 0.04em;
  /* моноширинные цифры: иначе секунды меняют ширину и вся строка дёргается */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.folio .wx { text-transform: none; letter-spacing: 0; }
@media (max-width: 680px) { .folio { justify-content: center; text-align: center; } }

/* дек (вводка) под главным заголовком */
.deck {
  font-family: var(--font-body); font-style: italic;
  font-size: 1.18rem; line-height: 1.45; color: #3a362e;
  margin: 0.55rem 0 0.95rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-divider);
}

/* ---------- 24. CTA-рамка, иконки заголовков, мини-фото объявлений ---------- */
.cta--outline { background: transparent; border: 2px solid var(--color-accent); color: var(--color-ink); }
.cta--outline .cta__eyebrow { color: var(--color-accent); }
.cta--outline h3 { color: var(--color-ink); }
.cta--outline .cta__action { color: var(--color-accent); }

.cta__eyebrow { display: inline-flex; align-items: center; gap: 0.42rem; }
.cta__eyebrow svg { width: 17px; height: 17px; }

.ann { display: grid; grid-template-columns: 62px 1fr; gap: 0.85rem; align-items: start; }
.photo--ann { aspect-ratio: 1 / 1; }
.photo--ann svg { width: 20px; height: 20px; }

.cta { position: relative; }
/* плашка «НОВИНКА» больше не отдельный SVG с качанием: по просьбе заказчика она
   статична и нарисована прямо на иллюстрации баннера (см. секцию 12b) */

/* ---------- 25. ТАБЛО ПОЛИВА (таблица + подсветка «сегодня») ---------- */
.watering { margin-top: 1.4rem; }

.wt-today-note {
  font-family: var(--font-ui); font-size: 0.76rem; color: var(--color-accent); font-weight: 700;
  margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.4rem;
}
.wt-today-note svg { width: 14px; height: 14px; flex: none; }

.wtable { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.78rem; }
.wtable caption { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--color-secondary); text-align: left; padding-bottom: 0.4rem; text-transform: uppercase; }
.wtable th, .wtable td { padding: 0.45rem 0.3rem; text-align: center; border-bottom: 1px solid var(--color-divider); }
.wtable thead th { font-weight: 700; letter-spacing: 0.03em; color: var(--color-secondary); border-bottom: 2px solid var(--color-ink); font-size: 0.72rem; }
.wtable tbody th { text-align: left; font-weight: 700; color: var(--color-ink); white-space: nowrap; padding-right: 0.5rem; }
.wtable td { line-height: 1.25; color: #3a362e; }
.wtable td.wt-off, .wtable td .wt-off { color: var(--color-divider); }
.wtable td.wt-today, .wtable th.wt-today { background: rgba(179,36,43,0.08); }

/* ---------- 26. СТРАНИЦА ОДНОЙ НОВОСТИ ---------- */
.article { max-width: 720px; margin: 0 auto; padding: 2rem 0 0.5rem; }

.breadcrumbs { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-secondary); margin-bottom: 1.3rem; }
.breadcrumbs a { color: var(--color-ink); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs span { margin: 0 0.4rem; color: var(--color-divider); }
.breadcrumbs [aria-current] { color: var(--color-secondary); margin: 0; }

.article__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08;
  letter-spacing: -0.01em; margin: 0.3rem 0 0.2rem; min-height: 2.2em;
}
.type-caret {
  display: inline-block; width: 3px; height: 0.92em; background: var(--color-accent);
  margin-left: 5px; vertical-align: -2px; animation: caret-blink 0.8s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui); font-size: 0.84rem; color: var(--color-secondary);
  margin: 1rem 0 1.6rem;
}
.article__meta strong { color: var(--color-ink); }

.article__figure { margin: 0 0 1.7rem; }

.article__body { font-size: 1.18rem; line-height: 1.85; }
.article__body p { margin: 0 0 1.15rem; }
.article__subhead {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.45rem; line-height: 1.2; margin: 1.9rem 0 0.7rem;
}
.article__list { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.article__list li { margin: 0.35rem 0; }

.pullquote {
  font-family: var(--font-body); font-style: italic;
  font-size: 1.5rem; line-height: 1.4; color: var(--color-ink);
  border-left: 3px solid var(--color-accent);
  margin: 1.7rem 0; padding: 0.2rem 0 0.2rem 1.3rem;
}

.share {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
  padding: 1rem 0; margin: 2rem 0 0;
}
.share__label {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary); margin-right: 0.2rem;
}
.share__btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1.5px solid var(--color-ink); color: var(--color-ink);
  background: none; cursor: pointer; text-decoration: none;
  transition: background var(--anim-duration), color var(--anim-duration);
}
.share__btn svg { width: 18px; height: 18px; }
.share__btn:hover { background: var(--color-ink); color: var(--color-bg); }

.related { border-top: 3px solid var(--color-rule); margin-top: 2.4rem; padding-top: 1.3rem; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 0.4rem; }
.card { text-decoration: none; color: inherit; display: block; }
.card .photo { margin-bottom: 0.7rem; }
.card .kicker { margin-bottom: 0.3rem; }
.card .story-title-sm { transition: color var(--anim-duration); }
.card:hover .story-title-sm { color: var(--color-accent); }
.card__date { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-secondary); display: block; margin-top: 0.4rem; }

@media (max-width: 680px) {
  .related__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .article__body { font-size: 1.1rem; }
}

/* ---------- 27. ВНУТРЕННИЕ СТРАНИЦЫ (заголовок, документы, тарифы, контакты) ---------- */
.page-head { max-width: 980px; margin: 0 auto; padding: 2rem 0 0; }
.page-head__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0.3rem 0 0; }
.page-head__intro { font-family: var(--font-body); font-size: 1.15rem; color: #33312c; margin: 0.7rem 0 0; max-width: 62ch; }
.page-head__rule { border: 0; border-top: 3px solid var(--color-rule); margin: 1.3rem 0 0; }

.section { max-width: 980px; margin: 0 auto; padding: 1.4rem 0 2rem; }
.section__title { font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); margin: 1.9rem 0 0.9rem; }

/* список документов / протоколов */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--color-divider); text-decoration: none; color: inherit;
}
.doc:first-child { border-top: 1px solid var(--color-divider); }
.doc__icon { color: var(--color-accent); display: inline-flex; }
.doc__icon svg { width: 26px; height: 26px; }
.doc__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.doc__meta { font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-secondary); margin-top: 0.4rem; }
.doc__get { font-family: var(--font-ui); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.doc__get svg { width: 16px; height: 16px; }
.doc:hover .doc__title { color: var(--color-accent); }

/* анонс / выноска */
.notice { border: 2px solid var(--color-accent); padding: 1.3rem 1.4rem; margin: 0 0 1.8rem; }
.notice .kicker { color: var(--color-accent); }
.notice h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0.2rem 0 0.5rem; }
.notice p { margin: 0; font-family: var(--font-body); }

/* таблица тарифов */
.rate-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); margin: 0.4rem 0 0; }
.rate-table th, .rate-table td { text-align: left; padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.rate-table th { font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; white-space: nowrap; }
.rate-table .rate__amount { font-weight: 700; color: var(--color-accent); }
.rate-table .rate__unit { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-secondary); }

/* калькулятор + реквизиты */
.calc { background: var(--color-bg-panel); padding: 1.3rem 1.4rem; margin: 1.6rem 0 0; }
.calc__row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-family: var(--font-ui); }
.calc input { font: inherit; font-size: 1rem; width: 92px; padding: 0.4rem 0.6rem; border: 1.5px solid var(--color-ink); background: var(--color-bg); }
.calc__out { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--color-accent); margin-left: auto; }
.requisites { font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.85; background: var(--color-bg-panel); padding: 1.2rem 1.4rem; margin-top: 1.2rem; }

/* контакты */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); max-width: 980px; margin: 0 auto; }
.contact-person { padding: 1rem 0; border-bottom: 1px solid var(--color-divider); }
.contact-person:first-child { border-top: 1px solid var(--color-divider); }
.contact-person__role { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.contact-person__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 0.15rem 0; }
.contact-person__line { font-family: var(--font-ui); font-size: 0.9rem; color: #33312c; }
.contact-person__line a { color: inherit; }
.map { aspect-ratio: 4 / 3; margin-top: 0.5rem; }

@media (max-width: 760px) {
  .contacts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .doc { grid-template-columns: 32px 1fr; }
  .doc__icon svg { width: 22px; height: 22px; }
  .doc__get { grid-column: 2; justify-self: start; margin-top: 0.35rem; }
}

/* ---------- 28. АРХИВ НОВОСТЕЙ (news.html) ---------- */
/* панель: фильтры по рубрикам + счётчик результатов */
.news-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: 980px; margin: 1.4rem auto 0;
}
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink); background: transparent;
  border: 1.5px solid var(--color-divider);
  padding: 0.42rem 0.85rem; cursor: pointer;
  transition: color var(--anim-duration), background var(--anim-duration), border-color var(--anim-duration);
}
.filter:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter.is-active {
  background: var(--color-accent); color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.news-count { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-secondary); white-space: nowrap; }
.news-count b { color: var(--color-ink); font-weight: 700; }

/* сетка карточек архива */
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); max-width: 980px; margin: 1.5rem auto 0;
}
.card__excerpt {
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5;
  color: #33312c; margin: 0.45rem 0 0;
}
.card .story-title { transition: color var(--anim-duration); }
.card:hover .story-title { color: var(--color-accent); }

/* крупный материал-врезка во всю ширину сетки */
.news-grid .card--feature {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--gap);
  align-items: center;
  border-bottom: 3px solid var(--color-rule);
  padding-bottom: 1.7rem; margin-bottom: 0.3rem;
}
.card--feature .photo { margin-bottom: 0; }
.card--feature .story-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0.1rem; }

/* пустой результат фильтра */
.news-empty {
  display: none; text-align: center; padding: 2.6rem 0 1rem;
  font-family: var(--font-ui); color: var(--color-secondary);
}
.news-empty.is-shown { display: block; }
.news-empty svg { width: 34px; height: 34px; opacity: 0.5; margin-bottom: 0.6rem; }

/* пагинация (газетная) */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 0.35rem;
  max-width: 980px; margin: 2.4rem auto 0; padding-top: 1.6rem;
  border-top: 1px solid var(--color-divider);
}
.pagination a, .pagination span {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem;
  min-width: 40px; height: 40px; padding: 0 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-divider); color: var(--color-ink);
  text-decoration: none;
  transition: color var(--anim-duration), background var(--anim-duration), border-color var(--anim-duration);
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .is-active { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.pagination .is-disabled { color: var(--color-divider); pointer-events: none; }

/* scroll-reveal: карточки появляются по мере прокрутки (класс is-armed вешает JS) */
.is-armed .sr { opacity: 0; transform: translateY(20px); }
.is-armed .sr.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--anim-ease), transform 0.6s var(--anim-ease);
}

@media (max-width: 860px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-grid .card--feature { grid-template-columns: 1fr; gap: 1rem; }
  .card--feature .photo { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .is-armed .sr { opacity: 1; transform: none; }
}

/* ---------- 29. АВТОРИЗАЦИЯ (login.html, register.html) ---------- */
.auth { max-width: 460px; margin: 2.2rem auto 1rem; }
.auth .breadcrumbs { margin-bottom: 1.2rem; }
.auth__head { text-align: center; }
.auth__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.08; margin: 0.2rem 0 0; }
.auth__intro { font-family: var(--font-body); color: #33312c; margin: 0.7rem auto 0; max-width: 42ch; }

.auth__card { border: 2px solid var(--color-ink); background: var(--color-bg-panel); padding: 1.7rem 1.6rem; margin-top: 1.5rem; }

.field { margin-bottom: 1.05rem; }
.field > label {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-secondary); margin-bottom: 0.4rem;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.62rem 0.7rem; border: 1.5px solid var(--color-ink);
  background: var(--color-bg); color: var(--color-ink);
}
.field textarea { resize: vertical; min-height: 104px; font-family: var(--font-body); line-height: 1.5; }
.field select { cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: #9a9486; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.field__hint { font-family: var(--font-ui); font-size: 0.74rem; color: var(--color-secondary); margin-top: 0.35rem; }
/* поле кода приглашения — выделено */
.field--invite input {
  border-color: var(--color-accent); border-width: 2px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}

.auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 0.82rem; margin-bottom: 1.1rem;
}
.auth__check { display: inline-flex; align-items: center; gap: 0.45rem; color: #33312c; cursor: pointer; }
.auth__check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.auth__row a { color: var(--color-accent); text-decoration: none; font-weight: 700; }
.auth__row a:hover { text-decoration: underline; }

.auth__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; font-family: var(--font-ui); font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-ink); color: var(--color-bg); border: 0;
  padding: 0.85rem 1rem; cursor: pointer; transition: background var(--anim-duration);
}
.auth__btn:hover { background: var(--color-accent); }
.auth__btn svg { width: 16px; height: 16px; }

.auth__sent {
  font-family: var(--font-ui); font-size: 0.84rem; color: var(--color-accent);
  border: 1.5px solid var(--color-accent); background: rgba(179,36,43,0.06);
  padding: 0.7rem 0.8rem; margin: 1rem 0 0; text-align: center;
}

/* сообщение об ошибке формы (вход/регистрация/профиль) — серверная валидация */
.auth__error {
  font-family: var(--font-ui); font-size: 0.86rem; font-weight: 700;
  color: #fff; background: var(--color-accent);
  padding: 0.7rem 0.9rem; margin: 1rem 0 0; text-align: center;
}

.auth__alt {
  text-align: center; margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-ui); font-size: 0.86rem; color: var(--color-secondary);
}
.auth__alt a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.auth__alt a:hover { text-decoration: underline; }

.auth__note {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-family: var(--font-ui); font-size: 0.76rem; font-style: italic;
  color: var(--color-secondary); margin: 1.2rem auto 0; max-width: 46ch;
}
.auth__note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ---------- 30. ЛИЧНЫЙ КАБИНЕТ (profile.html) ---------- */
.profile { max-width: 980px; margin: 0 auto; padding: 2rem 0 0; }
.profile .breadcrumbs { margin-bottom: 1.3rem; }

/* шапка профиля */
.profile__head {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  border-bottom: 3px solid var(--color-rule); padding-bottom: 1.3rem;
}
.profile__avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--color-bg-panel); border: 2px solid var(--color-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--color-ink);
}
.profile__id { flex: 1; min-width: 200px; }
.profile__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.05; }
.profile__meta {
  font-family: var(--font-ui); font-size: 0.86rem; color: var(--color-secondary);
  margin-top: 0.4rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border: 1px solid currentColor; color: #1f7a4d;
}
.profile__logout {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--color-ink); color: var(--color-ink);
  padding: 0.55rem 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem;
  transition: background var(--anim-duration), color var(--anim-duration);
}
.profile__logout:hover { background: var(--color-ink); color: var(--color-bg); }
.profile__logout svg { width: 16px; height: 16px; }

/* плитки-сводка */
.profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 1.5rem; }
.stat-card {
  border: 1px solid var(--color-divider); background: var(--color-bg-panel);
  padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; display: block;
  transition: border-color var(--anim-duration);
}
.stat-card:hover { border-color: var(--color-accent); }
.stat-card__num { font-family: var(--font-display); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--color-accent); }
.stat-card__label { font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; margin-top: 0.4rem; }
.stat-card__sub { font-family: var(--font-ui); font-size: 0.74rem; color: var(--color-secondary); margin-top: 0.2rem; }

/* строка тег+статус в карточке объявления */
.card__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.4rem; }
.card__row .tag { margin: 0; }

/* статус-бейджи (объявления, заявки) */
.status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border: 1px solid currentColor;
}
.status--live { color: #1f7a4d; }
.status--mod  { color: #8a5a16; }
.status--off  { color: var(--color-secondary); }

/* действия с моим объявлением */
.my-actions { display: flex; gap: 1.1rem; margin-top: 0.6rem; }
.my-actions a {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--color-ink);
}
.my-actions a:hover { color: var(--color-accent); }

/* список заявок правлению */
.req-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.req-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.95rem 0; border-bottom: 1px solid var(--color-divider);
}
.req-item:first-child { border-top: 1px solid var(--color-divider); }
.req-item__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.req-item__meta { font-family: var(--font-ui); font-size: 0.76rem; color: var(--color-secondary); margin-top: 0.15rem; }

/* форма «мои данные» в две колонки */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.form-grid .field--wide { grid-column: 1 / -1; }

@media (max-width: 680px) {
  .profile__stats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .profile__logout { margin-left: 0; }
}

/* ---------- 31. ПОИСК ПО САЙТУ (search.php) ---------- */
.search-form { display: flex; gap: 0.6rem; max-width: 640px; margin: 0.3rem 0 1.7rem; }
.search-form input[type="search"] {
  flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; font-family: var(--font-body);
  padding: 0.75rem 1rem; border: 1.5px solid var(--color-ink); background: var(--color-bg);
  color: var(--color-ink); -webkit-appearance: none; appearance: none;
}
.search-form input[type="search"]::placeholder { color: #9a9486; }
.search-form input[type="search"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.search-form button {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--color-ink); color: var(--color-bg); border: 0;
  padding: 0 1.3rem; cursor: pointer; transition: background var(--anim-duration);
}
.search-form button:hover { background: var(--color-accent); }
.search-form button svg { width: 17px; height: 17px; flex: none; }

.search-summary { font-family: var(--font-ui); font-size: 0.92rem; color: var(--color-secondary); margin-bottom: 0.4rem; }
.search-count { font-weight: 400; color: var(--color-secondary); }

mark { background: rgba(179, 36, 43, 0.16); color: inherit; padding: 0 0.08em; }

@media (max-width: 480px) {
  .search-form { flex-direction: column; }
  .search-form button { padding: 0.7rem; justify-content: center; }
}

/* ---------- 32. ПЕЧАТЬ ---------- */
/* Кнопка «Распечатать» на странице новости + жители печатают график полива и
   реквизиты. На бумагу идёт «газета»: мастхед и контент, без навигации/рекламы. */
@media print {
  @page { margin: 14mm 12mm; }

  body {
    background: #fff !important; /* без зерна и виньетки — не переводим тонер */
    color: #000;
    font-size: 11pt;
    line-height: 1.55;
  }

  /* служебное и интерактивное на бумаге не нужно */
  .topbar, .ticker, .nav, .footer, .share, .subscribe, .ad-banner, .ad-sticky,
  .cta, .board-banner, .lead__arrow, .readmore, .breadcrumbs, .slideshow__dots, .slideshow__nav,
  .pagination, .news-bar, .search-form, .related, .ext-note,
  .wx, .ear__phone, .type-caret { display: none !important; }

  /* анимации появления — всё видно сразу */
  .reveal { opacity: 1 !important; animation: none !important; }
  .is-armed .sr { opacity: 1 !important; transform: none !important; }

  /* мастхед-печать остаётся, но компактнее */
  .masthead { padding: 0 0 0.4rem; }
  .masthead__title { font-size: 2.6rem; }

  /* слайд-шоу: печатаем только первый кадр */
  .slideshow { aspect-ratio: auto; }
  .slideshow .photo--lead { display: none; position: static; opacity: 1 !important; }
  .slideshow .s1 { display: grid; }

  /* заглушки без реального фото не печатаем вовсе */
  .photo:not(:has(img)) { display: none !important; }

  /* подпись фото: фон браузер не печатает — белый текст стал бы невидимым */
  .photo__cap {
    position: static; background: none; color: #000;
    font-style: italic; text-transform: none; letter-spacing: 0;
    padding: 0.25rem 0 0;
  }

  /* колонки — в одну, статья — на всю ширину листа */
  .layout { display: block; }
  .col--center { border: 0; padding: 0; }
  .col { margin-bottom: 1.2rem; }
  .article { max-width: none; padding-top: 0.5rem; }
  .article__body { font-size: 11.5pt; }

  /* ссылки — как обычный текст */
  a { text-decoration: none !important; color: inherit !important; }

  /* выходные данные внизу листа */
  main.container::after {
    content: "Отпечатано с сайта СНТ «Мичуринец» — vinovka.ru";
    display: block;
    margin-top: 1.4rem; padding-top: 0.5rem;
    border-top: 1px solid #000;
    font-family: var(--font-ui); font-size: 8.5pt;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
}

/* ---------- 33. РАЗМЕР ШРИФТА (А− / А+) ---------- */
/* Три ступени. Класс на <html> при загрузке ставит инлайн-сниппет в <head>
   (до отрисовки, чтобы текст не «прыгал»), переключает — main.js, помнит localStorage.
   Вся вёрстка в rem, поэтому масштабируется целиком; ширина колонок в px не плывёт. */
html.fs-1 { font-size: 112.5%; }
html.fs-2 { font-size: 125%; }

.fontsize {
  display: flex; align-items: center;
  border-right: 1px solid var(--color-divider);
  margin-right: 0.3rem; padding-right: 0.35rem;
}
.fontsize .icon-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  line-height: 1; padding: 0.6rem 0.45rem;
}
.fontsize .icon-btn[disabled] { opacity: 0.35; cursor: default; }

/* ---------- 34. ЛАЙТБОКС (фото на весь экран) + одиночный кадр ---------- */
/* Одиночное фото материала — не «слайд-шоу»: без перелистывания и точек. */
.slideshow--single .photo--lead { opacity: 1 !important; }
.slideshow--single .slideshow__dots { display: none; }

/* Кликабельные для увеличения фото (класс вешает main.js — только НЕ внутри ссылок). */
.is-zoomable { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 18, 14, 0.93);
  padding: 2rem; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  object-fit: contain; cursor: default;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: 1rem;
  text-align: center; color: #f2ede0;
  font-family: var(--font-ui); font-size: 0.86rem;
  padding: 0 1.5rem; pointer-events: none;
}
.lightbox__close {
  position: absolute; top: 0.9rem; right: 1.1rem;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--anim-duration);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox.is-open { animation: lb-fade 0.18s ease; }
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 35. ДОСКА ОБЪЯВЛЕНИЙ В СТИЛЕ AVITO ---------- */
/* Сетка плиток-объявлений: фото сверху, цена крупно, участок+дата снизу. */
.listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 1.2rem;
  max-width: 980px; margin: 1.5rem auto 0;
}
.listing {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s var(--anim-ease), transform 0.2s var(--anim-ease), border-color 0.2s;
}
.listing:hover { box-shadow: 0 8px 22px rgba(26, 22, 14, 0.13); transform: translateY(-2px); border-color: var(--color-secondary); }

.listing__media { position: relative; aspect-ratio: 4 / 3; background: #d4ccb6; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__media .ph-svg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-secondary); }
.listing__media .ph-svg svg { width: 34px; height: 34px; opacity: 0.5; }

.listing__cat {
  position: absolute; top: 0.5rem; left: 0.5rem; margin: 0;
  background: rgba(247, 243, 233, 0.94); border-radius: 5px;
  backdrop-filter: saturate(1.2);
}
.listing__status { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(247,243,233,0.94); border-radius: 5px; }

.listing__body { padding: 0.7rem 0.8rem 0.85rem; display: flex; flex-direction: column; gap: 0.28rem; flex: 1; }
.listing__price { font-family: var(--font-display); font-weight: 900; font-size: 1.32rem; line-height: 1; color: var(--color-ink); }
.listing__title { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.25; color: var(--color-ink); }
.listing__meta { font-family: var(--font-ui); font-size: 0.75rem; color: var(--color-secondary); margin-top: auto; padding-top: 0.35rem; }
.listing__phone { font-family: var(--font-ui); font-weight: 700; font-size: 0.84rem; color: var(--color-accent); display: inline-flex; align-items: center; gap: 0.32rem; margin-top: 0.3rem; }
.listing__phone svg { width: 14px; height: 14px; }
.listing__more { font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.listing__more svg { width: 24px; height: 11px; }

/* строка действий над своим объявлением (в кабинете) */
.listing__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.55rem 0.8rem 0.75rem; border-top: 1px solid var(--color-divider); }
.listing__actions form { margin: 0; }
.btn-sm {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem;
  padding: 0.4rem 0.7rem; border: 1.5px solid var(--color-divider);
  background: var(--color-bg); color: var(--color-ink); border-radius: 6px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.32rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-sm svg { width: 14px; height: 14px; }
.btn-sm:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-sm--danger:hover { border-color: var(--color-accent); color: #fff; background: var(--color-accent); }

@media (max-width: 560px) {
  .listings { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
  .listing__price { font-size: 1.15rem; }
}