/* ==========================================================================
   Россонь.рф — styles.css
   Палитра: туманная северная. Атмосфера: рассвет на воде.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink-deep:    #0c1c24;
  --ink-soft:    #243846;
  --ink-mute:    #46596b;
  --paper:       #f7fdfd;
  --paper-warm:  #e3f8f9;   /* вторая бумага, чуть насыщеннее paper #f7fdfd */
  --mist:        #cdd9dc;
  --river:       #1a3a4a;
  --river-soft:  #2f5468;
  --river-glow:  #86a3a8;
  /* Палитра акцентов: была охра+тёплый жёлтый, заменена на голубую семью —
     гармонирует с речным синим (--river) и новой бумагой #f7fdfd.
     Имена переменных сохранены, чтобы не ломать ссылки по всему файлу. */
  --ember:       #3a8db4;   /* sky-blue, главный акцент (был охра #d99a3f) */
  --ember-warm:  #1e6a8e;   /* deeper steel-blue для hover (был rust #b8722a) */
  --ember-glow:  #a8d8ec;   /* pale sky highlight (был тёплый жёлтый #f3c97a) */
  --moss:        #4a6c4f;
  --rust:        #8a3a2a;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;

  --shadow-soft: 0 8px 24px -12px rgba(12, 28, 36, 0.25);
  --shadow-deep: 0 20px 60px -20px rgba(12, 28, 36, 0.4);
  --shadow-ember: 0 0 24px rgba(58, 141, 180, 0.35);

  --container: 1200px;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 6vw, 5rem);
  --border-soft: rgba(90, 113, 128, 0.2);
  --border-strong: rgba(90, 113, 128, 0.32);

  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-accent:  'Yeseva One', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;

  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-deep);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ember-warm); text-decoration: none; transition: color 0.2s var(--easing); }
a:hover { color: var(--ember); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ember-glow);
  outline-offset: 2px;
}
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.15; color: var(--ink-soft); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; overflow: hidden; }
.section--paper { background: var(--paper); }
.section--paper-warm { background: var(--paper-warm); }
.section--river { background: var(--river); color: var(--paper); }
.section--river h2, .section--river h3 { color: var(--paper); }
/* Тёмный лесной — мшистая хвойная палитра. Глубокий деревянный фон, серебристо-зелёный
   текст, наш фирменный ember сохраняем как акцент (точки деревень, активный таб). */
.section--forest {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(122, 156, 126, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(58, 141, 180, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, #1a2820 0%, #20302a 50%, #1d2c25 100%);
  color: #d7e2d2;
}
.section--forest h2, .section--forest h3, .section--forest h4 { color: #e8efe1; }
.section--forest .kicker { color: #cfe8d0; }
.section__title { margin-bottom: 1rem; }
.section__title--light { color: var(--paper); }
.section__lead {
  max-width: 56ch; font-size: 1.0625rem; color: #fff; margin: 0 0 3rem;
}
/* Light-вариант (на тёмном фоне) — на всю ширину контейнера, как h2,
   и на 2px мельче основного .section__lead. */
.section__lead--light {
  color: rgba(247, 253, 253, 0.85);
  max-width: none;
  font-size: 0.9375rem;          /* 17px → 15px (−2px при базе 16px) */
}

/* ---------- Typography ---------- */
.t-display { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 5vw + 1rem, 6rem); line-height: 0.95; letter-spacing: -0.02em; }
.t-h1 { font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem); letter-spacing: -0.01em; }
.t-h2 { font-size: clamp(1.75rem, 2vw + 0.75rem, 2.5rem); }
.t-h3 { font-size: clamp(1.25rem, 1vw + 0.75rem, 1.5rem); margin-bottom: 0.5rem; font-family: var(--font-display); font-weight: 600; }
.t-small { font-size: 0.875rem; }
.kicker {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ember-warm); margin: 0 0 1rem; font-weight: 600;
}
.kicker--light { color: var(--ember-glow); }
.text-center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: var(--radius-md);
  min-height: 44px; /* a11y touch target */
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.02em;
  transition: transform 0.2s var(--easing), background 0.2s var(--easing), box-shadow 0.2s var(--easing), color 0.2s var(--easing);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.btn-sm { padding: 0.55rem 1rem; font-size: 0.9rem; }
/* A11y: idle-фон поднят до --ember-warm (#1e6a8e) → ratio с #fff = 5.85:1 (PASS),
   hover уходит ещё темнее. Focus-outline белый — отчётливо виден на любом ember-тоне. */
.btn-primary { background: var(--ember-warm); color: #fff; box-shadow: var(--shadow-ember); }
.btn-primary:hover { background: #154a6e; color: #fff; transform: translateY(-1px); box-shadow: 0 0 28px rgba(30, 106, 142, 0.55); }
.btn-primary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn-ghost { background: transparent; color: var(--ember-warm); border-color: var(--ember); }
.btn-ghost:hover { background: var(--ember); color: #fff; border-color: var(--ember); box-shadow: var(--shadow-ember); }
.section--river .btn-ghost { color: var(--ember-glow); border-color: var(--ember-glow); }
.section--river .btn-ghost:hover { background: var(--ember); color: var(--ink-deep); border-color: var(--ember); box-shadow: var(--shadow-ember); }
.btn-river { background: var(--river); color: var(--paper); }
.btn-river:hover { background: var(--river-soft); color: var(--paper); }

/* Тихая ссылка-CTA — для вторичных действий рядом с акцентной кнопкой */
.btn-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 0; padding: 0.85rem 0.25rem;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
  color: var(--ember-glow); cursor: pointer; text-decoration: none;
  transition: color 0.2s var(--easing), gap 0.2s var(--easing);
}
.btn-link:hover { color: var(--ember); gap: 0.65rem; }
.section--paper .btn-link, .section--paper-warm .btn-link {
  color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--ember);
  text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.section--paper .btn-link:hover, .section--paper-warm .btn-link:hover {
  color: var(--ember-warm); text-decoration-color: var(--ember-warm);
}

/* ---------- Atmosphere (background) ---------- */
.atmosphere {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.atmosphere__sky {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(58, 141, 180, 0.06) 0%, transparent 60%),
              radial-gradient(ellipse 100% 50% at 50% 100%, rgba(26, 58, 74, 0.08) 0%, transparent 60%);
}
.atmosphere__mist {
  position: absolute; left: -20%; right: -20%; height: 240px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(205, 217, 220, 0.7) 0%, transparent 70%);
  filter: blur(36px); opacity: 0.85;
  animation: drift 90s ease-in-out infinite alternate;
}
.atmosphere__mist--1 { top: 35vh; }
.atmosphere__mist--2 { top: 75vh; animation-duration: 70s; animation-direction: alternate-reverse; opacity: 0.65; }
.atmosphere__stars { display: none; }

@keyframes drift {
  0% { transform: translateX(-5%); }
  100% { transform: translateX(5%); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(232, 240, 240); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--mist);
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 0.85rem; padding-bottom: 0.85rem;
}
.brand { flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink-deep); }
.brand:hover { color: var(--ink-deep); }
.brand__mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }
.brand__dot { color: var(--ember-warm); margin: 0 0.15em; }
.brand__tld { color: var(--ink-mute); font-size: 0.85em; }

.main-nav {
  display: flex; align-items: center; flex: 1;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.main-nav__list {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem);
}
.main-nav__list a {
  color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; white-space: nowrap;
  padding: 0.5rem 0; min-height: 44px; display: inline-flex; align-items: center;
}
.main-nav__list a:hover { color: var(--ember-warm); }
.main-nav__actions {
  display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}
.nav-divider { display: none; }
.nav-user { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-deep); }
.nav-user__avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--river); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
}
.nav-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-user__nick { font-weight: 500; font-size: 0.95rem; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; padding: 8px;
  margin-left: auto; /* гамбургер уходит в правый край на mobile */
  z-index: 51;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink-deep); transition: transform 0.3s var(--easing), opacity 0.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex: none; /* сбросить flex:1 от desktop */
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
    padding: 1rem var(--pad-x);
    box-shadow: var(--shadow-soft);
    transform: translateY(-110%); opacity: 0;
    transition: transform 0.35s var(--easing), opacity 0.25s var(--easing);
    pointer-events: none;
    visibility: hidden;
  }
  .main-nav.open {
    transform: translateY(0); opacity: 1;
    pointer-events: auto; visibility: visible;
  }
  .main-nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    width: 100%;
  }
  .main-nav__list a {
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid rgba(205, 217, 220, 0.5);
    font-size: 1rem;
  }
  .main-nav__list a:last-child { border-bottom: 0; }
  .main-nav__actions {
    flex-direction: column; align-items: stretch; gap: 0.5rem;
    padding-top: 1rem; margin-top: 0.5rem;
    border-top: 1px solid rgba(205, 217, 220, 0.5);
    width: 100%;
  }
  .main-nav__actions .btn { width: 100%; justify-content: center; }
  .main-nav__actions .nav-user { justify-content: center; padding: 0.5rem 0; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: #0c1c24;
  color: var(--paper); overflow: hidden; isolation: isolate;
}
/* Фото-фон: отдельный слой с background-attachment: fixed — фото остаётся на месте при скролле,
   создаёт лёгкий parallax-эффект. На загрузке плавно проявляется. */
.hero__photo {
  position: absolute; inset: 0; z-index: 1;
  background-image: url('/assets/main.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0;
  animation: hero-photo-settle 1.4s var(--easing) 0.1s forwards;
}
@keyframes hero-photo-settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* На мобильных background-attachment: fixed работает плохо/съедает производительность —
   возвращаем обычный scroll, всё остальное сохраняется. */
@media (max-width: 768px) {
  .hero__photo { background-attachment: scroll; }
}
/* Тёмная полупрозрачная плёнка над фото — для читабельности светлого текста */
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(12, 28, 36, 0.55) 0%,
      rgba(12, 28, 36, 0.35) 35%,
      rgba(26, 58, 74, 0.55) 70%,
      rgba(12, 28, 36, 0.78) 100%);
  pointer-events: none;
}
/* Обёртка вокруг primary-кнопки — нужна как контейнер для огонька-ember */
.hero__cta-wrap { position: relative; display: inline-block; }
.hero__ember {
  position: absolute;
  top: -12px; right: -16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ember-glow);
  box-shadow: 0 0 16px 4px rgba(168, 216, 236, 0.7), 0 0 40px 12px rgba(58, 141, 180, 0.4);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* Сначала плавное появление, потом бесконечное мерцание */
  animation:
    hero-ember-in 1.4s var(--easing) 1.4s forwards,
    flicker 4.3s ease-in-out 2.8s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 0.75; transform: scale(0.95); }
}
@keyframes hero-ember-in {
  from { opacity: 0; }
  to { opacity: 0.9; }
}
.hero__inner {
  position: relative; z-index: 3; padding-top: 3rem; padding-bottom: 6rem;
  max-width: 720px;
}

/* Поэтапное «появление» текстов hero — мягкий fade-up с разными задержками */
.hero__kicker, .hero__title, .hero__subtitle, .hero__lead, .hero__cta {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-rise 0.95s var(--easing) forwards;
}
.hero__kicker   { animation-delay: 0.45s; }
.hero__title    { animation-delay: 0.65s; animation-duration: 1.15s; }
.hero__subtitle { animation-delay: 0.85s; }
.hero__lead     { animation-delay: 1.05s; }
.hero__cta      { animation-delay: 1.25s; }
@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero__kicker {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.24em;
  color: #f7fdfd; margin-bottom: 1.5rem; font-weight: 300;
}
.hero__title {
  font-family: var(--font-accent); font-weight: 400; font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.95; letter-spacing: -0.01em; margin-bottom: 0.5rem;
  color: #fefefe;
  text-shadow: 0 4px 32px rgba(12, 28, 36, 0.6);
}
.hero__subtitle {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400; color: #f7fdfd; margin-bottom: 2rem; letter-spacing: 0.005em;
}
.hero__lead {
  font-size: 1.125rem; line-height: 1.7; color: rgba(247, 253, 253, 0.88);
  margin-bottom: 2.5rem; max-width: 56ch;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  opacity: 0;
  animation: hero-rise 1.1s var(--easing) 1.7s forwards;
}
/* Подпись «листай дальше» — почти невидимая, уплывающая */
.hero__scroll-text {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(247, 253, 253, 0.30);
  font-weight: 400;
  white-space: nowrap;
  /* Лёгкое «дыхание» текста, синхронно с пульсом линии */
  animation: hero-scroll-text-pulse 2.5s ease-in-out infinite;
}
@keyframes hero-scroll-text-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
.hero__scroll-line {
  display: block; width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--ember-glow));
  animation: scroll-pulse 2.5s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0% { transform: scaleY(0.3); transform-origin: top; opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* Уважение к prefers-reduced-motion: фото и тексты появляются сразу */
@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .hero__ember,
  .hero__kicker, .hero__title, .hero__subtitle, .hero__lead, .hero__cta,
  .hero__scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Facts ---------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem;
  margin-top: 2rem;
}
.fact {
  padding: 1.5rem 1.5rem 1.4rem;
  background: linear-gradient(160deg, var(--paper-warm) 0%, var(--paper) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--easing), box-shadow 0.3s, border-color 0.3s;
}
.fact::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--ember);
  transition: background 0.3s;
}
.fact:hover {
  transform: translateY(-3px);
  border-color: rgba(58, 141, 180, 0.4);
  box-shadow: 0 14px 32px -12px rgba(58, 141, 180, 0.30),
              0 3px 10px rgba(12, 28, 36, 0.08);
}
.fact:hover::before { background: var(--ember-glow); }
.fact__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mute); margin: 0 0 0.5rem; font-weight: 600; }
.fact__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--river); margin: 0 0 0.5rem; line-height: 1.15; }
.fact__note { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.45; }

/* ---------- River map ---------- */
.rivermap {
  position: relative; margin-top: 2rem; padding: 2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 253, 253, 0.18);
  /* Эллиптические углы — горизонтальный размах 90px, вертикальный 30px (картуш-стиль) */
  border-top-left-radius: 90px 30px;
  border-top-right-radius: 90px 30px;
  border-bottom-right-radius: 90px 30px;
  border-bottom-left-radius: 90px 30px;
  overflow: hidden;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.28),
              inset 0 0 60px rgba(58, 141, 180, 0.04),
              inset 0 0 0 1px rgba(247, 253, 253, 0.05);
  animation: rivermap-glow 9s ease-in-out infinite;
}
.rivermap::before {
  /* Тонкое внутреннее свечение по периметру — медленная пульсация */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-top-left-radius: 90px 30px;
  border-top-right-radius: 90px 30px;
  border-bottom-right-radius: 90px 30px;
  border-bottom-left-radius: 90px 30px;
  box-shadow: inset 0 0 30px rgba(247, 253, 253, 0);
  animation: rivermap-frame 9s ease-in-out infinite;
}
@keyframes rivermap-glow {
  0%, 100% {
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.28),
                inset 0 0 60px rgba(58, 141, 180, 0.04),
                inset 0 0 0 1px rgba(247, 253, 253, 0.05);
  }
  50% {
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.32),
                inset 0 0 90px rgba(58, 141, 180, 0.10),
                inset 0 0 0 1px rgba(247, 253, 253, 0.10);
  }
}
@keyframes rivermap-frame {
  0%, 100% { box-shadow: inset 0 0 25px rgba(134, 163, 168, 0.04); }
  50% { box-shadow: inset 0 0 45px rgba(134, 163, 168, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
  .rivermap, .rivermap::before { animation: none; }
}
.rivermap svg { width: 100%; height: auto; min-height: 320px; max-height: 520px; }
.rivermap__node {
  cursor: pointer; transition: transform 0.25s var(--easing), filter 0.25s var(--easing);
  transform-origin: center;
  transform-box: fill-box;
}
.rivermap__node:hover, .rivermap__node:focus-visible {
  transform: scale(1.4);
  filter: drop-shadow(0 0 8px var(--ember-glow));
}
.rivermap__node-label {
  font-family: var(--font-display); font-size: 14px; fill: var(--paper);
  pointer-events: none; opacity: 0.85;
}
.rivermap__neighbor { pointer-events: none; }
/* Кузёмкино — единственный кликабельный сосед: пасхалка-чат в Telegram (см. JS initTgPopup).
   Перебиваем общее pointer-events:none, чтобы клик доходил до hit-target внутри группы. */
.rivermap__neighbor.qa-map__bk { pointer-events: auto; cursor: pointer; outline: none; }
.rivermap__neighbor.qa-map__bk * { cursor: pointer; }
.rivermap__neighbor.qa-map__bk:hover .rivermap__neighbor-label--major,
.rivermap__neighbor.qa-map__bk:focus-visible .rivermap__neighbor-label--major {
  opacity: 1; fill: #fff;
}
.rivermap__neighbor-label {
  font-family: var(--font-display); font-size: 10px; fill: var(--mist);
  pointer-events: none; opacity: 0.78; font-weight: 400; letter-spacing: 0.02em;
}
.rivermap__neighbor-label--major {
  font-size: 11px; fill: var(--river-glow); opacity: 0.95; font-weight: 500;
}
/* Обёртка карты — нужна как контекст для tooltip, чтобы он не клиппировался overflow:hidden у .rivermap */
.rivermap-wrap { position: relative; }

.rivermap__tooltip {
  position: absolute; z-index: 50;
  background: var(--paper); color: var(--ink-deep);
  padding: 1rem 1.25rem;
  /* Картуш-радиусы как у rivermap, но в 2 раза мельче (45×15 вместо 90×30) */
  border-top-left-radius: 45px 15px;
  border-top-right-radius: 45px 15px;
  border-bottom-right-radius: 45px 15px;
  border-bottom-left-radius: 45px 15px;
  border: 1px solid rgba(36, 56, 70, 0.10);
  box-shadow: 0 18px 50px -10px rgba(12, 28, 36, 0.40),
              0 4px 12px rgba(12, 28, 36, 0.18);
  pointer-events: none; opacity: 0; transform: translateY(8px);
  transition: opacity 0.22s var(--easing), transform 0.22s var(--easing);
  font-size: 0.95rem; max-width: 380px; min-width: 280px;
}
.rivermap__tooltip.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rivermap__tooltip-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.9rem; margin-bottom: 0.7rem;
}
/* Квадратный блок с каллиграфическим инициалом деревни (берётся из карточки .village__initial) */
.rivermap__tooltip-initial {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--ember);
  padding: 4px; box-sizing: border-box;
}
.rivermap__tooltip-initial svg { width: 100%; height: 100%; display: block; }
.rivermap__tooltip-titles { flex: 1 1 auto; min-width: 0; }
.rivermap__tooltip-name {
  display: block; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600; line-height: 1.2;
  color: var(--river); margin: 0 0 0.4rem;
}
.rivermap__tooltip-tag {
  display: inline-block;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-mute); font-weight: 600;
  border-left: 2px solid var(--ember);
  padding-left: 0.6rem;
}
.rivermap__tooltip-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem;
  flex-shrink: 0;
}
.rivermap__tooltip-count {
  font-size: 0.72rem; color: var(--ink-mute);
  white-space: nowrap; letter-spacing: 0.02em;
}
.rivermap__tooltip-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--ember); color: var(--ink-deep);
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-md);
  text-decoration: none; font-size: 0.82rem; font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.rivermap__tooltip-cta:hover { background: var(--ember-warm); color: #fff; transform: translateY(-1px); }
.rivermap__tooltip-cta:hover svg, .rivermap__tooltip-cta:hover * { color: #fff; }
.rivermap__tooltip-cta:focus-visible {
  outline: 2px solid var(--ember-glow); outline-offset: 2px;
}
.rivermap__tooltip-body {
  margin: 0; color: var(--ink-soft);
  font-size: 0.9rem; line-height: 1.55;
}

/* ---------- Villages grid ---------- */
.villages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
  margin-top: 2.5rem;
}
.village {
  background: var(--paper-warm); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
  transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing), border-color 0.3s;
  position: relative; overflow: hidden;
}
.village::after {
  content: ''; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(58, 141, 180, 0.12), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.village:hover { transform: translateY(-3px); box-shadow: 0 24px 64px -22px rgba(12, 28, 36, 0.45); border-color: var(--ember); }
.village:hover::after { opacity: 1; }
.village__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.village__tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-mute); padding: 0.2rem 0.55rem; background: rgba(0,0,0,0.04); border-radius: 999px;
}
.village__online { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.village__online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--moss);
  box-shadow: 0 0 0 0 rgba(74, 108, 79, 0.5); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 108, 79, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(74, 108, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 108, 79, 0); }
}
.village__name { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; line-height: 1.1; color: var(--river); }
.village__blurb { color: var(--ink-soft); margin: 0; flex: 1; }
.village__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(205, 217, 220, 0.6); }
.village__members { font-size: 0.85rem; color: var(--ink-mute); }
.village__cta { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--ember-warm); padding: 0.6rem 0.25rem; min-height: 44px; }
.village__cta:hover { color: var(--ember); }

/* ---------- История: вступление с двумя абзацами и завлекающим маркером вниз.
   Секция на тёмном фоне (--river), поэтому текст светлый. ---------- */
.history-intro {
  max-width: 760px;
  margin: 1.5rem 0 0.5rem;
  position: relative;
}
.history-intro__p {
  margin: 0 0 1rem;
  color: rgba(247, 253, 253, 0.85);     /* paper, чуть приглушённый */
  font-size: 1.02rem;
  line-height: 1.7;
}
/* Первый абзац — крупнее, тоном «голос реки», display-шрифт */
.history-intro__p--first {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--paper);                  /* чистый светлый */
  position: relative;
  padding-left: 1.2rem;
  border-left: 2px solid var(--ember);
}
/* Буквица — большая первая буква, тёплый ember-glow, поднята чуть выше,
   но компактная по высоте, чтобы не «свисала» на вторую строку. */
.history-intro__p--first::first-letter {
  font-family: var(--font-display);
  font-size: 2em;
  color: var(--ember-glow);
  line-height: 0.85;
  margin-right: -0.15em;
  vertical-align: 0.02em;
  font-weight: bold;
}
/* ---------- Timeline ---------- */
.timeline {
  position: relative; margin-top: 2.5rem; padding-left: 0;
  display: grid; gap: 2.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  /* линия проходит по центру колонки с точками .timeline__node:
     200px (period) + 1.5rem gap + (24px column / 2 - 1px) = 200 + 24 + 11 = 235px */
  left: calc(200px + 1.5rem + 11px);
  top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--ember) 20%, var(--ember) 80%, transparent);
  opacity: 0.4;
}
.timeline__item {
  display: grid; grid-template-columns: 200px 24px 1fr; gap: 1.5rem; align-items: start; position: relative;
}
.timeline__period { font-family: var(--font-display); font-size: 0.85rem; color: #d2d2d2; padding-top: 0.5rem; text-align: right; text-transform: uppercase; font-weight: 600; }
.timeline__node {
  width: 20px; height: 20px; border-radius: 50%; background: var(--paper-warm);
  border: 2px solid var(--ember); box-shadow: 0 0 0 4px rgba(58, 141, 180, 0.15); margin-top: 0.35rem;
  justify-self: center;             /* ровно по центру 24px-колонки */
}
.timeline__title { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; line-height: 1.2; color: var(--river); margin-bottom: 0.5rem; }
.timeline__body p { color: var(--ink-soft); margin: 0 0 0.7rem; }
.timeline__body p:last-child { margin-bottom: 0; }

/* «…читать далее» — inline-ссылка прямо в потоке текста, не кнопка */
.timeline__more-link {
  color: var(--ember-warm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58,141,180,0.5);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.timeline__more-link:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}
.timeline__more-link.is-hidden { display: none; }

/* Ударение — маленькая наклонная чёрточка через ::after, независимо от шрифта.
   Используется внутри <strong> и обычного текста: рисуем поверх буквы. */
.stress {
  position: relative;
  display: inline-block;
}
.stress::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.08em;
  width: 0.12em;
  height: 0.36em;
  background: currentColor;
  border-radius: 0.06em;
  transform: translateX(-50%) rotate(18deg);
  pointer-events: none;
}

/* Сам <p> второго абзаца — управляемая по высоте анимация через JS.
   В CSS только overflow:hidden и transition. Конкретные значения max-height
   ставит JS (фиксирует текущую → подменяет на новую → даёт transition сработать). */
.timeline__intro-p {
  overflow: hidden;
  transition: max-height 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: max-height;
}
/* Hidden inline-«хвост» — продолжение того же абзаца. Скрыт через display:none,
   при is-revealed возвращается в поток как inline. Высота анимируется уже
   на родителе <p> через max-height (см. JS). */
.timeline__more-inline {
  display: none;
}
.timeline__intro-p.is-revealed .timeline__more-inline {
  display: inline;
}

/* Блок с последующими абзацами — та же кривая, тот же подход */
.timeline__more-block {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  transition: max-height 0.9s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.4s ease;
  will-change: max-height;
}
.timeline__more-block.is-revealed {
  max-height: 4000px;
  margin-top: 0;
}
.timeline__more-block > p { color: var(--ink-soft); margin: 0 0 0.7rem; }
.timeline__more-block > p:last-child { margin-bottom: 0; }

/* «Найденный артефакт» — карточка-приложение в конце записи таймлайна.
   Косая заливка от тёмно-синего river к тёплому светло-серому — будто переход
   от воды к суше. Лёгкий наклон, ember-полоса слева. */
.timeline__extra {
  position: relative;
  margin: 1.2rem 0 0;
  padding: 1.15rem 1.5rem 1.1rem 1.65rem;
  background: linear-gradient(0deg, #1a3a4a 66%, #1a3a4a 70%, #3a8db4 100%);
  border-radius: 4px;
  color: var(--ink-deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 10px 28px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.4deg);
  overflow: hidden;
}
/* Ember-полоса по левому краю */
.timeline__extra::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent 0%, var(--ember) 25%, var(--ember) 75%, transparent 100%);
}
.timeline__extra__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px dashed rgba(58, 141, 180, 0.35);
}
.timeline__extra__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ember-glow);   /* посветлее, читается на тёмной части градиента */
  margin: 0;
  line-height: 1.3;
}
.timeline__extra__period {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #000;
  white-space: nowrap;
  opacity: 0.85;
}
.timeline__extra__body {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 540px) {
  .timeline__extra__head { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__extra { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__intro-p,
  .timeline__more-block { transition: max-height 0.2s linear; }
}

@media (max-width: 700px) {
  .timeline__item { grid-template-columns: 24px 1fr; gap: 1rem; }
  .timeline__period { grid-column: 2; text-align: left; padding-top: 0; margin-bottom: 0.25rem; }
  /* линия по центру 24px-колонки точек: center = 12px, line 2px → left 11px */
  .timeline::before { left: 11px; }
}

/* ---------- Nature ---------- */
.nature { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.nature__block { padding: 0; }

/* На тёмном river-фоне «Природы» текст карточек должен быть светлым.
   h3 и иконки — белые, как просил пользователь; абзацы — paper-альфа. */
.section--river .nature__block h3 { color: #fff; }
.section--river .nature__block p  { color: rgba(247, 253, 253, 0.85); }
.section--river .nature__block .nature__icon,
.section--river .nature__block:nth-child(1) .nature__icon,
.section--river .nature__block:nth-child(2) .nature__icon,
.section--river .nature__block:nth-child(3) .nature__icon { color: #fff; }

/* section__lead был сделан #fff глобально, но в paper-секциях это невидимо.
   Возвращаем тёмный ink-soft для всех paper-фоновых секций. */
.section--paper .section__lead,
.section--paper-warm .section__lead {
  color: var(--ink-soft);
}

/* Десять заповедей: ярче заголовок и более лесной зелёный текст */
.commandments__title { color: #fefefe; }
.commandments__list li,
.commandments__list .commandments__text { color: rgb(204, 215, 179); }

/* Легенды: разные цвета для двух историй (на тёмном river-фоне) */
.legends__stories .legend:nth-child(1) .legend__text { color: rgb(206, 242, 237); }
.legends__stories .legend:nth-child(2) .legend__text { color: rgb(234, 225, 240); }

/* Дикие животные — заголовок секции в чётком danger-красном (был розово-фиолетовый),
   совпадает по семантике с темой опасности и сохраняет читаемость на forest-фоне. */
.kurgalsky-care__section--danger .kurgalsky-care__heading { color: #e85a4f; }

/* Kurgalsky-lake-beloe: контент-панель прижимается вправо */
.kurgalsky-lakes__panel#kurgalsky-lake-beloe {
  text-align: right;
}
.kurgalsky-lakes__panel#kurgalsky-lake-beloe .kurgalsky-lake__facts {
  justify-content: flex-end;
}

/* Kurgalsky-villages lead — компактная читаемая ширина */
.kurgalsky-villages__lead { max-width: 56ch; }

/* События — лид чуть шире для воздуха */
#events.section .section__lead,
#events .section__lead { max-width: 65ch; }

/* Карта (#map) и Природа (#nature) — общий полупрозрачный navy-фон */
.section--river#map,
.section--river#nature { background: #1a3f55ed; }

/* SVG-звёздочка в начале .kurgalsky-care__footer */
.kurgalsky-care__footer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23d99a3f' stroke-width='1.5' stroke-linecap='round'><path d='M10 2 v16 M2 10 h16 M3.5 3.5 l13 13 M16.5 3.5 l-13 13'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* Empty-state ссылка — обычная подчёркнутая ссылка как у .ethno__further и пр. */
.empty-state__link {
  color: var(--ember-warm);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 106, 142, 0.45);
  transition: color 0.18s var(--easing), border-color 0.18s var(--easing);
}
.empty-state__link:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* form__consent ссылка на политику */
.form__consent a {
  color: var(--ember-warm);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 106, 142, 0.4);
}
.form__consent a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* about__credits ссылка на baltic-studio: белая по умолчанию (читается на river-фоне),
   на ховере уходит в наш синий ember-акцент. */
.about__credits a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.about__credits a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* Links section: p внутри панели должны быть тёмными на бумаге */
#links .qa__panel p,
.section--paper .qa__panel-body,
.section--paper .qa__panel p { color: var(--ink-soft); }
.nature__icon { width: 56px; height: 56px; margin-bottom: 1rem; }
.nature__block:nth-child(1) .nature__icon { color: var(--river-soft); }
.nature__block:nth-child(2) .nature__icon { color: var(--moss); }
.nature__block:nth-child(3) .nature__icon { color: var(--ember-warm); }
.nature__icon svg { width: 100%; height: 100%; }
.nature__block h3 { color: var(--river); margin-bottom: 0.75rem; }
.nature__block p { color: var(--ink-soft); margin: 0; }

/* ---------- Legends ---------- */
.legends { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .legends { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }

.legends__stories { display: grid; gap: 2rem; }
.legend {
  padding: 1.75rem; border-left: 2px solid var(--ember); background: rgba(247, 253, 253, 0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
/* Шапка легенды: иконка слева от заголовка, в одну строку */
.legend__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}
.legend__rune {
  width: 42px; height: 42px;
  color: var(--ember-glow);
  flex-shrink: 0;
}
.legend__rune svg { width: 100%; height: 100%; }
.legend__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
  color: rgba(168, 216, 236, 0.78); margin: 0;
}
.legend__text { color: rgba(247, 253, 253, 0.88); margin: 0; line-height: 1.75; }

.commandments {
  background: rgba(247, 253, 253, 0.05); border: 1px solid rgba(247, 253, 253, 0.12);
  border-radius: var(--radius-lg); padding: 2rem; align-self: start;
  padding-bottom: 73px;
}
/* Шапка заповедей: иконка-свиток слева от заголовка, в одну строку */
.commandments__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.commandments__rune {
  width: 42px; height: 42px;
  color: var(--ember-glow);
  flex-shrink: 0;
}
.commandments__rune svg { width: 100%; height: 100%; }
.commandments__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--ember-glow); margin: 0;
}
.commandments__list { display: grid; gap: 1.25rem; }
.commandments__list li { display: grid; grid-template-columns: 32px 1fr; gap: 0.75rem; align-items: start; }
.commandments__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--ember); line-height: 1; padding-top: 0.1rem; }
.commandments__text { color: rgba(247, 253, 253, 0.9); line-height: 1.6; }

/* ---------- Events ---------- */
.events { display: grid; gap: 1rem; margin-top: 2.5rem; }
.event {
  display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem;
  background: var(--paper-warm); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 1.5rem; transition: border-color 0.3s, transform 0.3s var(--easing);
}
.event:hover { border-color: var(--ember); transform: translateY(-2px); }
.event__date {
  background: var(--river); color: var(--paper); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem 0.5rem;
}
.event__day { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; }
.event__month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ember-glow); margin-top: 0.25rem; }
/* Фото-обложка вместо квадрата с датой — занимает ту же 90px-колонку */
.event__photo {
  width: 90px;
  align-self: stretch;             /* высота — как у соседнего .event__body */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border-soft);
}
.event__photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--easing);
}
.event:hover .event__photo img { transform: scale(1.04); }
.event__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--river); margin-bottom: 0.25rem; }
.event__time { font-size: 0.875rem; color: var(--ink-mute); margin: 0 0 0.5rem; }
.event__desc { color: var(--ink-soft); margin: 0; }

.empty-state {
  text-align: center; padding: 3rem 1rem; max-width: 480px; margin: 2.5rem auto 0;
  background: var(--paper-warm); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
}
.empty-state__icon { width: 56px; height: 56px; margin: 0 auto 1.25rem; color: var(--ink-mute); }
.empty-state__icon svg { width: 100%; height: 100%; }
.empty-state__text { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; margin-top: 2.5rem; margin-bottom: 2rem;
}
.gallery__item {
  aspect-ratio: 4/3; background: var(--paper); border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-soft); transition: transform 0.4s var(--easing), box-shadow 0.4s;
}
.gallery__item:hover { transform: scale(1.02); box-shadow: var(--shadow-deep); }
.gallery__item svg,
.gallery__item img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* CTA-плитка «Прислать фото» — иллюстрация + золотой текст на тёмном оверлее по hover */
.gallery__cta {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.gallery__cta svg { width: 100%; height: 100%; display: block; }
.gallery__cta-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(12, 28, 36, 0.62);
  opacity: 0;
  transition: opacity 0.3s var(--easing);
  pointer-events: none;
}
.gallery__cta:hover .gallery__cta-overlay,
.gallery__cta:focus-visible .gallery__cta-overlay { opacity: 1; }
.gallery__cta-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ember-glow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

/* ============================================
   Блок «Полезное» — Q&A интерфейс лево-право.
   Слева тёмный список вопросов, справа светлая панель ответа.
   ============================================ */
.qa {
  display: grid; grid-template-columns: 1fr;
  margin-top: 2.5rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--paper);
  box-shadow: 0 12px 40px -16px rgba(12, 28, 36, 0.25);
}
@media (min-width: 760px) {
  .qa { grid-template-columns: minmax(280px, 1fr) 1.6fr; min-height: 520px; }
}

/* Левый список: тёмный фон river */
.qa__list {
  list-style: none; margin: 0; padding: 0;
  background: var(--river);
  display: flex; flex-direction: column;
}
.qa__btn {
  display: flex; align-items: center; gap: 0.85rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247, 253, 253, 0.08);
  border-left: 3px solid transparent;
  color: rgba(247, 253, 253, 0.78);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem; font-weight: 500; line-height: 1.3;
  transition: background 0.22s, color 0.22s, border-left-color 0.22s;
}
.qa__list li:last-child .qa__btn { border-bottom: 0; }
.qa__btn:hover { background: rgba(247, 253, 253, 0.05); color: var(--paper); }
.qa__btn[aria-selected="true"] {
  background: rgba(58, 141, 180, 0.10);
  color: var(--paper);
  border-left-color: var(--ember);
}
.qa__btn:focus-visible {
  outline: 2px solid var(--ember-glow);
  outline-offset: -2px;
}

.qa__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ember-glow);
  transition: color 0.22s;
}
.qa__icon svg { width: 100%; height: 100%; display: block; }
.qa__btn[aria-selected="true"] .qa__icon { color: var(--ember); }
.qa__btn:hover .qa__icon { color: var(--ember-glow); }

.qa__btn-text { flex: 1; }

/* Правая панель: светлый paper-фон */
.qa__detail {
  background: var(--paper);
  padding: 2rem 2.25rem;
  display: flex; flex-direction: column;
  min-height: 100%;
  position: relative;
}
.qa__panel {
  display: none;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
  position: relative;
  /* min-width: 0 — иначе flex-item не даёт горизонтально-скроллящимся блокам внутри
     (виджет погоды, .qa__schedule-scroll) ужаться: они растягивают саму карточку. */
  min-width: 0;
  /* Container query — позволяет ребёнку (.weather-card) ставить ширину
     ровно от размера панели через cqw/cqi, а не от размытого «100%». */
  container-type: inline-size;
}
/* Кнопка принтера — правый верхний угол карточки с расписанием */
.qa__panel-print {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
  z-index: 2;
}
.qa__panel-print:hover, .qa__panel-print:focus-visible {
  color: var(--river);
  border-color: var(--river);
  background: var(--paper-warm);
  outline: none;
  transform: translateY(-1px);
}
.qa__panel-print svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .qa__panel-print { top: 0; right: 0; width: 32px; height: 32px; }
  .qa__panel-print svg { width: 18px; height: 18px; }
}
.qa__panel[aria-hidden="false"] {
  display: flex;
  animation: qa-fade 0.32s var(--easing);
}
@keyframes qa-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.qa__panel-title {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 600;
  color: var(--river); margin: 0; line-height: 1.22;
}
.qa__panel-body {
  font-size: 0.97rem; color: var(--ink-soft); line-height: 1.65;
  margin: 0; max-width: 60ch;
}

/* Расписание автобусов — «деревенская» доска объявлений: бумага в раме, тёплый ember-тон. */
.qa__schedule {
  background:
    linear-gradient(180deg, rgba(228, 244, 248, 0.55) 0%, rgba(200, 230, 236, 0.45) 100%),
    var(--paper-warm);
  border: 1px solid rgba(120, 85, 50, 0.28);
  border-radius: 10px;
  padding: 0.95rem 1.1rem 1.05rem;
  position: relative;
  box-shadow:
    0 1px 2px rgba(60, 35, 10, 0.05),
    inset 0 0 36px rgba(140, 90, 30, 0.05);
}
.qa__schedule::before,
.qa__schedule::after {
  /* Два маленьких «гвоздика» в верхних углах — лёгкий намёк на доску объявлений */
  content: '';
  position: absolute;
  top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(120, 70, 30, 0.55), rgba(70, 40, 15, 0.7));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.qa__schedule::before { left: 10px; }
.qa__schedule::after  { right: 10px; }

.qa__schedule-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;            /* деревенская «прописанность» заголовка */
  color: var(--river);
  margin: 0 0 0.6rem;
  text-align: center;
  letter-spacing: 0.01em;
}

/* На мобильнике оставляем горизонтальный скролл — таблица шире экрана.
   На десктопе (≥720px) — overflow: visible, чтобы заработал sticky thead. */
.qa__schedule-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  .qa__schedule-scroll { overflow: visible; }
}
/* Стрелки направления — на заголовках Туда/Обратно */
.qa__schedule-h--forward,
.qa__schedule-h--back {
  white-space: nowrap;
}
.qa__schedule-h--forward::before,
.qa__schedule-h--back::before {
  content: ''; display: inline-block; vertical-align: -2px;
  width: 0.95rem; height: 0.95rem; margin-right: 0.3rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.qa__schedule-h--forward::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b88746' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='3' x2='10' y2='17'/><polyline points='5,12 10,17 15,12'/></svg>");
}
.qa__schedule-h--back::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b88746' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='3' x2='10' y2='17'/><polyline points='5,8 10,3 15,8'/></svg>");
}
.qa__schedule-table {
  width: 100%;
  border-collapse: collapse;
  /* Засечный шрифт для лучшей читаемости расписания (как в железнодорожных таблицах) */
  font-family: Georgia, 'Cambria', 'Times New Roman', serif;
}
.qa__schedule-table tr { border-bottom: 1px solid var(--border-soft); }
.qa__schedule-table tbody tr:last-child { border-bottom: 0; }
.qa__schedule-table td { padding: 0; vertical-align: middle; }
/* Первая колонка «Остановка» — фиксированная ширина под «Кингисепп, автостанция» + лёгкий отступ.
   Более длинные стопы (типа «Александровская Горка, поворот») переносятся в две строки —
   это сознательный компромисс ради компактной таблицы без горизонтального скролла. */
.qa__schedule-table th.qa__schedule-h--first,
.qa__schedule-table td.qa__schedule-from { width: 11rem; min-width: 11rem; }
.qa__schedule-from { color: var(--ink-mute); padding-right: 0.5rem; font-size: 0.88rem; line-height: 1.35; }
.qa__schedule-times { color: var(--ink-deep); font-weight: 500; font-size: 0.92rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
.qa__schedule-table td + .qa__schedule-times { padding-left: 0.55rem; }
.qa__schedule-table thead th {
  text-align: left; padding: 0.35rem 0.4rem 0.45rem 0;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-deep);
  border-bottom: 1px solid rgba(120, 85, 50, 0.28);
  /* Подложка нужна для sticky — иначе строки таблицы просвечивают сквозь thead */
  background: linear-gradient(180deg, #f7fdfd 0%, #e3f8f9 100%);
}
.qa__schedule-table thead .qa__schedule-headmain th {
  text-transform: uppercase;
  color: var(--river);
  font-style: italic;
  letter-spacing: 0.08em;
  border-bottom: 1px dashed rgba(120, 85, 50, 0.32);
}
.qa__schedule-table thead .qa__schedule-headsub th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  color: var(--ember-warm);              /* «штамп» с номером автобуса — тёплый ember */
  font-style: italic;
  padding: 0.4rem 0.4rem 0.5rem 0;
  border-bottom: 1px solid rgba(120, 85, 50, 0.22);
  letter-spacing: 0.04em;
}

/* Sticky thead на десктопе реализован через JS-клон (см. initScheduleStickyClone в app.js):
   position: sticky тут не сработает — родители .qa и .section имеют overflow: hidden,
   что ограничивает сферу sticky их собственными границами. JS-клон обходит это:
   создаёт fixed-копию thead и подбивает ширины колонок под исходную таблицу. */
.qa__schedule-thead-clone {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  display: none;
  background: transparent;
}
.qa__schedule-thead-clone table {
  margin: 0;
  border-collapse: collapse;
  pointer-events: auto;
  table-layout: fixed;
  background: transparent;
}
.qa__schedule-thead-clone thead th {
  /* Та же тёплая подложка, что у настоящего thead — иначе при наезде на тёмный фон
     заголовки просвечивают. */
  background: linear-gradient(180deg, #f7fdfd 0%, #e3f8f9 100%);
  box-shadow: 0 4px 8px -4px rgba(60, 35, 10, 0.18);  /* лёгкая тень под клоном */
}
@media (max-width: 719px) {
  /* На мобильнике клон отключаем — на узком экране sticky-thead визуально мешает. */
  .qa__schedule-thead-clone { display: none !important; }
}
.qa__schedule-table thead th + th { padding-left: 0.7rem; }
.qa__schedule-table thead th.qa__schedule-h--first { color: var(--river); }
/* Лёгкий вертикальный разделитель между блоком «Туда» и «Обратно».
   Раньше координата была захардкожена (td:nth-child(4)) — это разваливалось при таблицах с
   другим числом колонок. Теперь PHP сам помечает первую колонку каждого нового dir-блока
   классом qa__schedule-c--dir-first и шапку — qa__schedule-h--<dir>. */
.qa__schedule-table thead .qa__schedule-headmain th.qa__schedule-h--back,
.qa__schedule-table thead .qa__schedule-headsub th.qa__schedule-c--dir-first,
.qa__schedule-table tbody td.qa__schedule-c--dir-first {
  border-left: 1px dashed rgba(120, 85, 50, 0.32);   /* пунктир — мягче и «деревеннее» */
  padding-left: 0.85rem !important;
}
/* Между несколькими расписаниями в одной карточке — небольшой воздух */
.qa__schedule + .qa__schedule { margin-top: 0.9rem; }
/* Компактный вариант расписания — для маленькой второстепенной таблицы */
.qa__schedule--compact { padding: 0.7rem 0.95rem 0.55rem; }
.qa__schedule--compact .qa__schedule-title { font-size: 0.86rem; margin-bottom: 0.4rem; color: var(--ink-deep); }
.qa__schedule-table tbody tr:hover { background: rgba(58, 141, 180, 0.05); }
/* Сворачивание промежуточных остановок: 14 строк между «Кингисепп, автостанция» и «Первое Мая».
   По умолчанию скрыты; раскрываются плавным fade при .is-expanded на таблице. */
.qa__schedule-row--collapsible { display: none; }
.qa__schedule-table.is-expanded .qa__schedule-row--collapsible {
  display: table-row;
  animation: fadeInScheduleRow 0.3s ease-out both;
}
@keyframes fadeInScheduleRow {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Toggle-строка: ссылка по центру таблицы, голубым курсивом */
.qa__schedule-row--toggle:hover { background: transparent !important; }
.qa__schedule-row--toggle td {
  text-align: center;
  padding: 0 !important;
  border-bottom: 1px dashed var(--border-soft);
  background: rgba(88, 150, 200, 0.05);
}
.qa__schedule-toggle {
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 500;
  color: #4a90c5;
  cursor: pointer;
  padding: 0.3rem 1rem;
  letter-spacing: 0.01em;
  transition: color 0.18s, background 0.18s, transform 0.18s;
  border-radius: 4px;
}
.qa__schedule-toggle::after {
  content: '↓';
  display: inline-block;
  margin-left: 0.4rem;
  font-style: normal;
  transition: transform 0.25s ease;
}
.qa__schedule-table.is-expanded .qa__schedule-toggle::after { transform: rotate(180deg); }
.qa__schedule-toggle:hover, .qa__schedule-toggle:focus-visible {
  color: #2978b3;
  background: rgba(88, 150, 200, 0.12);
  outline: none;
}
.qa__schedule-table tbody tr.qa__schedule-row--accent {
  background: rgba(58, 141, 180, 0.12);
}
.qa__schedule-table tbody tr.qa__schedule-row--accent .qa__schedule-from {
  color: var(--river); font-weight: 600;
}
.qa__schedule-table tbody tr.qa__schedule-row--accent .qa__schedule-times {
  color: var(--river-deep, var(--river)); font-weight: 600;
}
.qa__schedule-note {
  font-size: 0.76rem; color: var(--ink-mute);
  margin: 0.5rem 0 0; line-height: 1.4; font-style: italic;
  text-align: center;
}

/* ===== Карточка «Администрация района» — двублочная раскладка ===== */
.admin-blocks {
  position: relative;
  display: grid;
  /* Колонки равной ширины; правая «опускается» ниже за счёт margin-top
     на .admin-block--district, чтобы диагональная линия проходила между ними
     по диагонали (NNW→SSE), не задевая ни один блок. */
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0 0.2rem;
}
/* Диагональный разделитель: вертикальная нить, наклонённая по часовой ~15° —
   идёт из SSE (низ-справа) в NNW (верх-слева). Тонкая, в стиле обычных границ. */
.admin-blocks__divider {
  position: absolute;
  left: 50%;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 0;
  border-left: 1px solid var(--border-soft);
  transform: translateX(-50%) rotate(15deg);
  transform-origin: center;
  pointer-events: none;
  opacity: 0.85;
}
.admin-block { margin: 0; }
.admin-block--village {
  text-align: left;
  padding-right: 1.4rem;
}
.admin-block--district {
  text-align: right;
  padding-left: 1.4rem;
  /* Сдвигаем правую колонку вниз, чтобы её верхняя плашка
     не «наезжала» на диагональную линию между блоками. */
  margin-top: 3rem;
}
.admin-block__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--river);
  margin: 0 0 0.45rem;
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: rgba(58, 141, 180, 0.12);
  border-left: 2px solid var(--ember);
  border-radius: 0;
}
.admin-block--district .admin-block__label {
  border-left: 0;
  border-right: 2px solid var(--ember);
}
.admin-block__topics {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 0.65rem;
}
/* Прогрессивные ширины тем по строкам.
   Слева у Сельской — сужаются вниз (115 → 100%); каждая тема заходит правее
   своей колонки на 15/10/5/0%. Текст в каждой теме выравнен по левому краю.
   Справа у Кингисеппской — зеркально (100 → 115%); каждая тема прижата к
   правому краю колонки через margin-left:auto, а её содержимое выравнено
   по правому краю. Правые края всех 4 тем совпадают, левый край «лестничкой»
   уезжает влево по мере увеличения ширины — это и даёт мягкий клин. */
.admin-block__topic {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  transition: width 0.18s;
  box-sizing: border-box;
}
.admin-block--village .admin-block__topic--1 { width: 115%; }
.admin-block--village .admin-block__topic--2 { width: 110%; }
.admin-block--village .admin-block__topic--3 { width: 105%; }
.admin-block--village .admin-block__topic--4 { width: 100%; }

/* Правые темы выравниваем по правому краю через position:relative + left:-N%.
   margin-left:auto не работает, когда width > 100% — авто схлопывается в 0
   и блок остаётся прижатым к левому краю. Сдвиг через left решает это:
   ширина растёт вправо, но мы тут же двигаем элемент назад на ту же величину,
   так что правый край остаётся приклеенным к правой границе колонки. */
.admin-block--district .admin-block__topic {
  position: relative;
  text-align: right;
}
.admin-block--district .admin-block__topic--1 {
  width: 100%;
}
.admin-block--district .admin-block__topic--2 {
  width: 105%;
  left: -5%;
}
.admin-block--district .admin-block__topic--3 {
  width: 110%;
  left: -10%;
}
.admin-block--district .admin-block__topic--4 {
  width: 115%;
  left: -15%;
}
.admin-block__email { margin: 0; }
.admin-block__email a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--river);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.18s;
}
.admin-block--district .admin-block__email a { flex-direction: row-reverse; }
.admin-block__email a:hover, .admin-block__email a:focus-visible {
  color: var(--ember);
  outline: none;
}
.admin-block__email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-display);
  flex: 0 0 22px;
  transition: transform 0.18s;
}
.admin-block__email a:hover .admin-block__email-icon { transform: scale(1.1); }
.admin-block__email-text {
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}

/* ============================================================
   Третий блок «Чат деревни» — призыв к соседскому общению.
   Поднимается выше под нижнюю кромку admin-blocks, с резким наклоном
   верхней грани справа-вниз — продолжает диагональ между блоками.
   Текст внутри строится симметричной лесенкой (центрированные строки
   с уменьшающейся шириной). Заголовок — отдельная плашка-параллелограмм
   со звёздным мерцанием.
   ============================================================ */
.admin-chat {
  position: relative;
  margin: -1.3rem 0 0;                  /* приподняли — заходит в зону под admin-blocks */
  padding: 2.2rem 1.3rem 1.2rem;        /* доп. padding-top чтобы плашка не уходила за наклон */
  background: linear-gradient(155deg, rgba(58, 141, 180, 0.07), rgba(58, 141, 180, 0.13) 50%, rgba(58, 141, 180, 0.07));
  border-left: 3px solid var(--ember-warm);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;                  /* центрируем плашку-заголовок и строки */
  gap: 0.35rem;
  /* Резкий наклон: правый верхний угол ниже левого на 42px */
  clip-path: polygon(0 0, 100% 42px, 100% 100%, 0 100%);
}

/* ====== Плашка-заголовок: параллелограмм с лёгким наклоном ====== */
.admin-chat__label-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto 0.9rem;
  padding: 0 14px;                       /* место для крайних звёзд */
}
.admin-chat__label {
  display: inline-block;
  padding: 0.45rem 1.6rem 0.55rem;
  background: linear-gradient(135deg, var(--ember-warm) 0%, var(--ember) 60%, var(--ember-warm) 100%);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Параллелограмм: верх скошен вправо, низ — обратно влево */
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  /* Лёгкий наклон самой плашки для усиления геометрии */
  transform: rotate(2.5deg);
  /* «Печатное» свечение */
  box-shadow:
    0 2px 10px rgba(30, 106, 142, 0.4),
    0 0 18px rgba(168, 216, 236, 0.35),
    inset 0 1px 0 rgba(220, 240, 250, 0.45),
    inset 0 -1px 0 rgba(80, 40, 10, 0.25);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 0 8px rgba(210, 232, 246, 0.4);
  white-space: nowrap;
}

/* Неоновые звёздные блёстки вокруг плашки.
   Каждая своего цвета (cyan, magenta, lime, hot-pink) — контрастят оранжевой плашке.
   Многослойный box-shadow даёт настоящий неоновый ореол.
   Цвет задаётся через CSS-переменные --spark-core и --spark-glow на каждом элементе. */
.admin-chat__label-spark {
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%,
    var(--spark-core, #ffffff) 35%,
    var(--spark-glow, #fff) 60%,
    transparent 80%);
  box-shadow:
    0 0 4px 1px var(--spark-core, #fff),
    0 0 10px 2px var(--spark-glow, #fff),
    0 0 18px 4px var(--spark-glow, #fff);
  opacity: 0;
  animation: adminChatSparkle 3.6s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
/* 4-лучевой крест неонового цвета */
.admin-chat__label-spark::before,
.admin-chat__label-spark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 1.5px;
  margin: -0.75px 0 0 -9px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--spark-core, #fff) 40%,
    #ffffff 50%,
    var(--spark-core, #fff) 60%,
    transparent 100%);
  filter: drop-shadow(0 0 3px var(--spark-glow, #fff));
}
.admin-chat__label-spark::after { transform: rotate(90deg); }

/* Каждая звезда — свой неоновый оттенок, контраст к оранжевой плашке */
.admin-chat__label-spark--1 {
  left: -2px; top: 25%; animation-delay: 0s;
  --spark-core: #00f0ff;     /* электрический циан */
  --spark-glow: #00d4ff;
}
.admin-chat__label-spark--2 {
  right: -2px; top: 60%; animation-delay: 1.1s;
  --spark-core: #ff36e0;     /* неоновая магента */
  --spark-glow: #ff00b8;
}
.admin-chat__label-spark--3 {
  left: 30%; top: -10px; animation-delay: 2.2s;
  --spark-core: #c4ff00;     /* кислотный лайм */
  --spark-glow: #aaff00;
}
.admin-chat__label-spark--4 {
  right: 28%; bottom: -9px; animation-delay: 0.6s;
  --spark-core: #ff5cd6;     /* hot-pink */
  --spark-glow: #ff2da3;
}

@keyframes adminChatSparkle {
  0%, 100% { opacity: 0;    transform: scale(0.3) rotate(0deg); }
  40%      { opacity: 1;    transform: scale(1)   rotate(45deg); }
  70%      { opacity: 0.55; transform: scale(0.85) rotate(90deg); }
}

/* ====== Лесенка строк ====== */
.admin-chat__line {
  margin: 0 auto;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.admin-chat__line--1 { width: 100%;        font-size: 0.95rem; }
.admin-chat__line--2 { width: 84%;         font-size: 0.92rem; }
.admin-chat__line--3 { width: 68%;         font-size: 0.9rem;  }
.admin-chat__line--4 {
  width: 54%;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ember-warm);            /* нижняя строка — call-to-action в янтарном */
  margin-top: 0.15rem;
}

/* На мобильнике диагонального разделителя нет — упрощаем admin-chat:
   без скоса, без наклона плашки, лесенка раскрывается в полную ширину. */
@media (max-width: 720px) {
  .admin-chat {
    clip-path: none;
    margin-top: 1rem;
    padding-top: 1.2rem;
    border-radius: 0 6px 6px 0;
  }
  .admin-chat__label { transform: none; }
  .admin-chat__line--1,
  .admin-chat__line--2,
  .admin-chat__line--3,
  .admin-chat__line--4 { width: 100%; }
}

/* На мобильнике разворачиваем в одну колонку — диагональ убираем */
@media (max-width: 720px) {
  .admin-blocks {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .admin-blocks__divider { display: none; }
  .admin-block--village, .admin-block--district {
    text-align: left;
    padding: 0;
    margin-top: 0; /* убираем сдвиг — на мобильнике блоки идут друг за другом */
    transform: none; /* сбрасываем translateX, который применён к district на десктопе */
  }
  .admin-block--district .admin-block__label {
    border-left: 2px solid var(--ember);
    border-right: 0;
  }
  .admin-block--district .admin-block__email a { flex-direction: row; }
  /* На мобильнике прогрессивные ширины не нужны — обе колонки в полную ширину */
  .admin-block__topic {
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
    position: static !important;
    text-align: left !important;
  }
}

/* ===== Карточка «Где разжечь костёр?» — структурный блок правил =====
   Контейнер: тёплый бумажный тон, грид 2×2 с тонкими разделителями между секциями
   (используется gap-as-border trick — контейнер тёмный, ячейки светлые, 1px gap).
*/
.fire-rules {
  margin: 0.55rem 0 0.3rem;
  background: rgba(90, 113, 128, 0.25); /* «цвет линий-разделителей» — пробивается через gap */
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden; /* скругление обрезает квадратные углы ячеек */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px; /* толщина линий-разделителей */
}

/* Предупреждение про Кургальский заказник — растягивается на обе колонки */
.fire-rules__warning {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.8rem;
  background: #f5e2d6; /* тёплый тревожный тон */
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-deep);
}
.fire-rules__warning-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b94545;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1;
}
.fire-rules__warning-text {
  flex: 1;
}
/* Подчёркивание в warning — тонкое, красным акцентом блока, с отступом от строки */
.fire-rules__warning u {
  text-decoration: underline;
  text-decoration-color: rgba(185, 69, 69, 0.85);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* Информационное уведомление про сезонный режим — янтарный тон, отличается от красного warning */
.fire-rules__notice {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.8rem;
  background: rgba(168, 216, 236, 0.32); /* нежный янтарный — тёплый, но не тревожный */
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-deep);
  border-left: 3px solid var(--ember-warm);
}
.fire-rules__notice-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ember-warm);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Yeseva One', Georgia, serif;
  font-weight: 400;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1;
}
.fire-rules__notice-text {
  flex: 1;
}

.fire-rules__section {
  background: var(--paper-warm);
  padding: 0 0.75rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* Заголовок секции — мелкий, в верхнем регистре, с собственным тёмным фоном
   на всю ширину ячейки (отрицательные margin компенсируют padding секции). */
.fire-rules__title {
  margin: 0 -0.75rem 0.35rem;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--river);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
}

.fire-rules__title-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  flex: 0 0 15px;
  letter-spacing: 0;
  line-height: 1;
}
.fire-rules__title-mark--distances {
  background: rgba(168, 216, 236, 0.85);
  color: var(--river);
}
.fire-rules__title-mark--distances::before {
  content: '↔';
  color: var(--river);
  font-size: 0.78rem;
  font-weight: 700;
}
.fire-rules__title-mark--prep {
  background: #6ec27a;
  color: var(--paper);
  font-size: 0.7rem;
}
.fire-rules__title-mark--forbidden {
  background: #e57373;
  color: var(--paper);
  font-size: 0.92rem;
}
.fire-rules__title-mark--fines {
  background: rgba(247, 253, 253, 0.85);
  color: var(--river);
  font-size: 0.72rem;
}

/* Таблица «ключ — значение» */
.fire-rules__table {
  display: grid;
  gap: 0;
}

.fire-rules__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  padding: 0.3rem 0;
  font-size: 0.84rem;
  line-height: 1.3;
  align-items: baseline;
  border-bottom: 1px dashed rgba(90, 113, 128, 0.18);
}
.fire-rules__row:last-child { border-bottom: 0; }

.fire-rules__row-key {
  color: var(--ink-mute);
}
.fire-rules__row-value {
  font-weight: 700;
  color: var(--ink-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Списки prep и forbidden */
.fire-rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.fire-rules__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.fire-rules__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-weight: 700;
  width: 0.85rem;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.35;
}

.fire-rules__list--prep li::before {
  content: '✓';
  color: #2d8b3e;
}

.fire-rules__list--forbidden li::before {
  content: '×';
  color: #b94545;
  font-size: 1.15rem;
  top: -2px;
}

/* На узких экранах раскладываем правила в одну колонку */
@media (max-width: 720px) {
  .fire-rules {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
  }
}

/* Мини-карта мест */
.qa__map {
  margin: 0;
  background: var(--ink-deep);
  border-radius: 12px;
  padding: 0.85rem 1rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.qa__map-caption {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ember-glow); margin: 0; font-weight: 600;
}
.qa__map svg { width: 100%; height: auto; max-height: 220px; display: block; border-radius: 8px; }

/* Pasхалка-popup с Telegram-чатом. Триггер — на большой карте, точка «с. Большое Кузёмкино»
   (см. river-map.svg, group.qa-map__bk + overrides в .rivermap__neighbor.qa-map__bk выше).
   Фиксированный модал по центру вьюпорта. */
.tg-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.tg-popup[hidden] { display: none; }
.tg-popup__overlay {
  position: absolute; inset: 0;
  background: rgba(12, 28, 36, 0.7);
  backdrop-filter: blur(3px);
  animation: tgFadeIn 0.18s ease;
}
.tg-popup__card {
  position: relative; z-index: 1;
  width: min(92vw, 400px);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 60%);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.48), 0 0 0 1px var(--border-soft);
  overflow: hidden;
  animation: tgPopIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Крестик закрытия — плавает над карточкой в правом верхнем углу */
.tg-popup__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border-soft); color: var(--ink-mute);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.18s;
  backdrop-filter: blur(2px);
}
.tg-popup__close:hover, .tg-popup__close:focus-visible {
  background: var(--ink-deep); color: #fff; transform: rotate(90deg); outline: none;
}

/* Деревенский Telegram-линк — наша альтернатива заблокированному iframe */
.tg-invite {
  padding: 1.4rem 1.6rem 1.5rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem;
}
.tg-invite__art {
  width: 220px; height: 140px; display: block; margin: 0.2rem 0 0.3rem;
}
.tg-invite__kicker {
  margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  /* --ember-glow слишком бледный для cream-фона — берём насыщенный --ember (тёплый янтарь). */
  color: var(--ember, #3a8db4); font-weight: 600;
}
.tg-invite__title {
  margin: 0; font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 600; line-height: 1.15;
  color: var(--ink-deep);
}
.tg-invite__sub {
  margin: 0.15rem 0 0.7rem; max-width: 320px;
  font-size: 0.9rem; line-height: 1.5; color: var(--ink-mute);
}
.tg-invite__cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: var(--river); color: #fff; text-decoration: none;
  border: 1px solid var(--river-deep, #3d6770);
  box-shadow: 0 8px 22px rgba(45, 90, 105, 0.35);
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.02em;
}
.tg-invite__cta:hover, .tg-invite__cta:focus-visible {
  background: var(--river-deep, #3d6770);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(45, 90, 105, 0.5);
  outline: none;
}
.tg-invite__cta-icon {
  width: 20px; height: 20px; flex: 0 0 20px;
}
.tg-invite__handle {
  margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--ink-mute);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.tg-invite__handle strong { color: var(--river); font-weight: 600; }
.tg-invite__note {
  margin: 0.5rem 0 0; max-width: 300px;
  font-size: 0.72rem; line-height: 1.45; color: var(--ink-mute); opacity: 0.85;
  font-style: italic;
}
@keyframes tgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tgPopIn  {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-popup__card, .tg-popup__overlay { animation: none; }
}

/* Обёртка под одну или несколько CTA-кнопок: ставит их в ряд с отступом,
   на узких экранах переносит ниже друг друга. */
.qa__actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.25rem;
}
/* CTA внизу панели */
.qa__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: var(--ember); color: var(--ink-deep);
  border-radius: var(--radius-md);
  text-decoration: none; font-weight: 600;
  font-size: 0.92rem; letter-spacing: 0.02em;
  align-self: flex-start; margin-top: auto;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.qa__cta:hover {
  background: var(--ember-warm); color: #fff; transform: translateY(-1px);
  text-decoration: none;
}
.qa__cta:focus-visible {
  outline: 2px solid var(--ember-glow); outline-offset: 3px;
}

@media (max-width: 759px) {
  .qa__detail { padding: 1.5rem 1.25rem; }
  .qa__panel-title { font-size: 1.35rem; }
}


/* ---------- About / principles ---------- */
.about { display: grid; gap: 3rem; }
.about__head { max-width: 640px; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.principle__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--river); margin-bottom: 0.5rem; position: relative; padding-bottom: 0.5rem; }
.principle__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 32px; height: 2px; background: var(--ember); }
.principle__text { color: var(--ink-soft); margin: 0; }
.about__credits { color: var(--ink-mute); font-size: 0.95rem; max-width: 60ch; padding-top: 1rem; border-top: 1px solid var(--mist); }

/* ---------- Contact form (компактная и современная) ---------- */
.contact-section { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.contact-section[hidden] { display: none; }
.contact-wrap {
  display: grid; grid-template-columns: 1fr;
  gap: 1.75rem; max-width: 760px; margin: 0 auto;
}
.contact-text .kicker { margin-bottom: 0.4rem; }
.contact-text .section__title { margin-bottom: 0.5rem; }
.contact-text .section__lead { margin-bottom: 0; max-width: 60ch; }

.form { display: grid; gap: 0.8rem; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__row--bottom {
  align-items: end; gap: 1rem; margin-top: 0.4rem;
}
@media (min-width: 600px) { .form__row--bottom { grid-template-columns: 1fr auto; } }

.form__label { display: grid; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }

/* Чекбокс «Я согласен с правилами сообщества» — стоит над submit-кнопкой.
   В отличие от form__label, не uppercase и не grid, чтобы читалось как фраза. */
.form__agree {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.74rem; line-height: 1.45;
  color: var(--ink-soft); font-weight: 400;
  cursor: pointer; user-select: none;
}
.form__agree input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05em; height: 1.05em;
  accent-color: var(--ember);
  cursor: pointer;
  flex-shrink: 0;
}
.form__agree a {
  color: var(--ember-warm);
  text-decoration: underline;
  text-decoration-color: rgba(58,141,180,0.4);
  text-underline-offset: 2px;
}
.form__agree a:hover { color: var(--ember); text-decoration-color: var(--ember); }
.form__agree u { text-decoration: underline; text-decoration-thickness: 1px; }
.form__label input, .form__label select, .form__label textarea {
  font: inherit; color: var(--ink-deep);
  font-size: 0.95rem; font-weight: 400; letter-spacing: 0;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  width: 100%;
  text-transform: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form__label input::placeholder, .form__label textarea::placeholder { color: var(--ink-mute); opacity: 0.6; }
.form__label input:hover, .form__label select:hover, .form__label textarea:hover {
  border-color: rgba(36, 56, 70, 0.25);
  background: rgba(255, 255, 255, 0.85);
}
.form__label input:focus, .form__label select:focus, .form__label textarea:focus {
  border-color: var(--ember); outline: 0;
  box-shadow: 0 0 0 3px rgba(58, 141, 180, 0.18);
  background: var(--paper);
}
.form__label textarea {
  resize: none; min-height: 92px; line-height: 1.5;
}
/* Файловый вариант form__label — input[type=file] и подсказка под ним */
.form__label--file input[type="file"] {
  font-family: inherit; font-size: 0.95rem; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--ink-deep);
  padding: 0.6rem 0.8rem; cursor: pointer;
}
.form__label--file input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--river); cursor: pointer;
  background: transparent; border: 1px solid var(--river); border-radius: 0;
  padding: 0.35rem 0.9rem; margin-right: 0.8rem;
  transition: background 0.2s, color 0.2s;
}
.form__label--file input[type="file"]::file-selector-button:hover {
  background: var(--river); color: var(--paper);
}
.form__hint {
  font-size: 0.74rem; color: var(--ink-mute); line-height: 1.4;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  margin-top: 0.15rem;
}
/* Тонкая анимация при подмене режима — чтобы не дёргалось грубо */
.form__mode-group { transition: opacity 0.18s ease; }
.form__mode-group[hidden] { display: none; }
.form__consent { font-size: 0.78rem; color: var(--ink-mute); margin: 0.4rem 0 0; line-height: 1.4; }
.form__status { margin: 0.4rem 0 0; font-size: 0.9rem; }
.form__status.is-success { color: var(--moss); }
.form__status.is-error { color: var(--rust); }

/* Сабмит-кнопка в нижней строке формы — строгая, без радиусов, такая же высота, как у капчи (36px) */
.form__row--bottom .btn-primary,
.form__submit {
  white-space: nowrap;
  height: 36px;
  padding: 0 1.5rem;
  border-radius: 0;
  align-self: end;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  color: rgba(247, 253, 253, 0.85);
  padding-top: 1.3rem; padding-bottom: 1.3rem;       /* симметрично сверху и снизу */
  margin-top: 0;
  background-color: var(--ink-deep);
  /* Фоновое изображение: всегда покрывает всю высоту блока, прижато к верху по центру.
     Тёмный полупрозрачный градиент сверху — для читабельности текста. */
  background-image:
    linear-gradient(rgba(12, 28, 36, 0.72), rgba(12, 28, 36, 0.85)),
    url('/assets/footer.jpg');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-footer__inner {
  display: grid; gap: 0.8rem; align-items: center;     /* колонки центрируются вертикально */
  grid-template-columns: 1fr; padding: 0;
  position: relative; z-index: 1;
}
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; } }

/* Брэнд-блок: лого + Россонь.рф в строку, под ним слоган и кнопка «Правила сообщества» */
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.brand--footer {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--paper);
  /* Сразу финальный размер (как был при hover ×1.1), без анимации. */
  transform: scale(1.1);
  transform-origin: left center;
  /* Подняли лого выше на 30px относительно его исходной позиции в подвале. */
  margin-top: -30px;
}
.brand--footer .brand__tld { color: #e8f4fb; font-weight: 500; }
.brand--footer .brand__mark { width: 36px; height: 36px; color: var(--ember-glow); flex-shrink: 0; }
.brand--footer .brand__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1; }
.brand--footer .brand__dot { color: var(--ember-glow); margin: 0 0.15em; }

/* Когда бренд — не ссылка (span), курсор обычный, никакие подчёркивания не нужны. */
.brand--static { cursor: default; }
.brand--static:hover { transform: scale(1.1); color: var(--paper); }

.site-footer__tagline {
  font-family: var(--font-body); font-size: 0.56rem;
  color: rgba(247, 253, 253, 0.65);
  margin: -15px 0 -10px 50px;
  letter-spacing: 0.02em;
}

/* Кнопки футера — компактные, без радиуса, белая рамка */
.site-footer__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 220px; max-width: 100%;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(247, 253, 253, 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.04em;
  line-height: 1.3;
  transition: background 0.25s var(--easing), border-color 0.25s, color 0.2s, transform 0.2s;
  /* Лёгкое подсвечивание текста — словно стоит под россыпью искр сверху */
  animation: footerTextShimmer 5s ease-in-out infinite;
}
.site-footer__btn-label {
  position: relative;
  z-index: 1;
}
.site-footer__btn:hover {
  background: rgba(247, 253, 253, 0.10);
  border-color: var(--paper);
  color: #fff; text-decoration: none;
  transform: translateY(-1px);
}
.site-footer__btn:focus-visible {
  outline: 2px solid var(--ember-glow); outline-offset: 3px;
}

/* ==== Звёздочки вокруг кнопки «Правила сообщества» ==== */
.site-footer__btn-stars {
  position: absolute;
  inset: -4px;
  pointer-events: none;
  z-index: 0;
}

/* Один маленький 4-лучевой огонёк через основной радиальный градиент + два псевдо-крестика */
.btn-star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(220, 240, 250, 0.95) 0%, rgba(168, 216, 236, 0.55) 40%, rgba(168, 216, 236, 0) 75%);
  box-shadow: 0 0 6px 0.5px rgba(168, 216, 236, 0.6);
  opacity: 0;
  animation: btnStarTwinkle 4.5s ease-in-out infinite;
  will-change: transform, opacity;
}
.btn-star::before,
.btn-star::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1px;
  margin: -0.5px 0 0 -7px;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 240, 250, 0.85) 50%, transparent 100%);
  border-radius: 50%;
}
.btn-star::after { transform: rotate(90deg); }

/* Позиции звёздочек по контуру кнопки */
.btn-star--1 { top: -4px;    left: 14%;   animation-delay: 0s;   }
.btn-star--2 { top: -5px;    right: 12%;  animation-delay: 1.4s; }
.btn-star--3 { top: 50%;     left: -5px;  animation-delay: 2.6s; transform-origin: center; }
.btn-star--4 { top: 50%;     right: -5px; animation-delay: 0.7s; }
.btn-star--5 { bottom: -4px; left: 28%;   animation-delay: 3.3s; }
.btn-star--6 { bottom: -5px; right: 22%;  animation-delay: 2.0s; }
/* Седьмая звёздочка ровно по центру верхней рамки, между --1 и --2 */
.btn-star--7 { top: -5px; left: calc(50% - 3px); animation-delay: 0.95s; }

@keyframes btnStarTwinkle {
  0%, 100% { opacity: 0;    transform: scale(0.3) rotate(0deg); }
  40%      { opacity: 0.95; transform: scale(1)   rotate(40deg); }
  70%      { opacity: 0.6;  transform: scale(0.85) rotate(90deg); }
}

/* Мягкое мерцание текста кнопки — синхронно с искрами вокруг, лёгкое тепло. */
@keyframes footerTextShimmer {
  0%, 100% {
    text-shadow:
      0 0 2px rgba(220, 240, 250, 0.04),
      0 0 6px rgba(168, 216, 236, 0);
  }
  50% {
    text-shadow:
      0 0 6px rgba(220, 240, 250, 0.30),
      0 0 14px rgba(168, 216, 236, 0.25);
  }
}

/* Колонка nav (Privacy) */
.site-footer__nav { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
/* Ссылка «Политика обработки персональных данных» — компактная, сдержанная,
   под подписью "Мат запрещён | 14+". Серая, на hover — paper-цвет. */
.site-footer__privacy {
  display: inline-block;
  margin-top: -0.5rem;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(247, 253, 253, 0.42);
  text-decoration: none;
  border-bottom: 1px dotted rgba(247, 253, 253, 0.25);
  padding-bottom: 1px;
  transition: color 0.18s var(--easing), border-color 0.18s var(--easing);
}
.site-footer__privacy:hover {
  color: rgba(247, 253, 253, 0.85);
  border-bottom-color: rgba(247, 253, 253, 0.6);
}

/* ===== Под-надпись «Мат запрещён | 14+» с медленными святящимися блёстками ===== */
/* Серый текст: спокойный, но не мёртвый — лёгкое внутреннее «дыхание» яркости.
   Блёстки разлетаются от центра текста, мерцают и медленно гаснут. */
.site-footer__note {
  position: relative;
  display: block;
  /* Та же ширина, что и у site-footer__btn (220px) — чтобы текст «Мат запрещён | 14+»
     центрировался ровно под кнопкой «Правила сообщества». */
  width: 220px;
  max-width: 100%;
  padding: 0.25rem 0.4rem;
  box-sizing: border-box;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(247, 253, 253, 0.42);
  text-transform: uppercase;
  text-align: center;
  margin-top: -0.15rem;
}
.site-footer__note-text {
  position: relative;
  z-index: 1;
  /* Текст подсвечивается под россыпью блёсток вокруг — пульс серый/тёплый, синхронно с искрами */
  animation: footerNoteBreath 6s ease-in-out infinite;
}
@keyframes footerNoteBreath {
  0%, 100% {
    color: rgba(247, 253, 253, 0.36);
    text-shadow:
      0 0 3px rgba(220, 240, 250, 0.05),
      0 0 6px rgba(168, 216, 236, 0);
  }
  50% {
    color: rgba(247, 253, 253, 0.72);
    text-shadow:
      0 0 8px rgba(220, 240, 250, 0.4),
      0 0 16px rgba(168, 216, 236, 0.32);
  }
}

/* Контейнер для разлёта блёсток — лежит позади текста, центрирован */
.site-footer__sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Базовый стиль блёстки — маленькая золотая точка с мягким свечением */
.spark {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 232, 246, 0.95) 0%, rgba(168, 216, 236, 0.55) 40%, rgba(168, 216, 236, 0) 75%);
  box-shadow: 0 0 8px 1px rgba(168, 216, 236, 0.55);
  opacity: 0;
  animation: sparkleFly 7s ease-out infinite;
  will-change: transform, opacity;
}

/* Каждая блёстка летит в свою сторону с уникальной задержкой и углом —
   через CSS-переменные --dx/--dy и --delay. */
/* Векторы разлёта: по X разлёт большой (до ±100), по Y — короткий (в пределах высоты блока).
   Раньше блёстки уходили далеко вниз/вверх — теперь они «горизонтальны»: ширина строки + чуть выше/ниже. */
.spark--1  { --dx:  -70px; --dy:  -4px; animation-delay: 0s;   }
.spark--2  { --dx:   65px; --dy:  -6px; animation-delay: 0.9s; }
.spark--3  { --dx:  -85px; --dy:   5px; animation-delay: 1.8s; }
.spark--4  { --dx:   90px; --dy:   3px; animation-delay: 2.7s; }
.spark--5  { --dx:  -40px; --dy:  -9px; animation-delay: 3.6s; }
.spark--6  { --dx:   42px; --dy:   9px; animation-delay: 4.5s; }
.spark--7  { --dx:  -55px; --dy:   7px; animation-delay: 5.4s; }
.spark--8  { --dx:   55px; --dy:  -8px; animation-delay: 6.2s; }

/* Цветные блёстки — также горизонтальные траектории */
.spark--9  { --dx:  -75px; --dy:  -2px; animation-delay: 0.4s; }
.spark--10 { --dx:   72px; --dy:   6px; animation-delay: 2.2s; }
.spark--11 { --dx:  -45px; --dy: -10px; animation-delay: 1.3s; }
.spark--12 { --dx:   48px; --dy:  10px; animation-delay: 3.1s; }
.spark--13 { --dx: -105px; --dy:   2px; animation-delay: 4.0s; }
.spark--14 { --dx:  105px; --dy:  -1px; animation-delay: 5.8s; }
.spark--15 { --dx:  -60px; --dy:   8px; animation-delay: 4.9s; }
.spark--16 { --dx:   62px; --dy:  -7px; animation-delay: 6.6s; }

/* Цветовые варианты блёсток. Каждая — мягкий радиальный градиент + box-shadow того же оттенка. */
.spark--white {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0) 75%);
  box-shadow: 0 0 9px 1px rgba(255, 255, 255, 0.65);
}
.spark--turquoise {
  background: radial-gradient(circle, rgba(190, 240, 245, 0.98) 0%, rgba(80, 210, 220, 0.55) 40%, rgba(80, 210, 220, 0) 75%);
  box-shadow: 0 0 9px 1px rgba(90, 215, 220, 0.6);
}
.spark--pink {
  background: radial-gradient(circle, rgba(255, 215, 230, 0.98) 0%, rgba(255, 140, 180, 0.55) 40%, rgba(255, 140, 180, 0) 75%);
  box-shadow: 0 0 9px 1px rgba(255, 150, 190, 0.6);
}
.spark--lime {
  background: radial-gradient(circle, rgba(220, 240, 200, 0.98) 0%, rgba(170, 215, 120, 0.55) 40%, rgba(170, 215, 120, 0) 75%);
  box-shadow: 0 0 9px 1px rgba(180, 220, 130, 0.6);
}

@keyframes sparkleFly {
  0%   { transform: translate(0, 0) scale(0.4);                 opacity: 0; }
  15%  { transform: translate(calc(var(--dx) * 0.25), calc(var(--dy) * 0.25)) scale(0.9);  opacity: 1; }
  60%  { transform: translate(calc(var(--dx) * 0.75), calc(var(--dy) * 0.75)) scale(1);    opacity: 0.85; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* На устройствах с prefers-reduced-motion полностью отключаем разлёт. */
@media (prefers-reduced-motion: reduce) {
  .spark, .site-footer__note-text { animation: none; }
  .spark { opacity: 0.3; transform: translate(var(--dx), var(--dy)); }
}

.site-footer__credits { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(247, 253, 253, 0.78); }
.site-footer__credits a {
  color: var(--ember-glow); text-decoration: underline;
  text-decoration-color: rgba(168, 216, 236, 0.4); text-underline-offset: 3px;
}
/* «Некоммерческий проект» — компактная плашка-упоминание без рамки,
   тёплый ember-фон, мягкий внутренний блик. */
.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.35rem;
  padding: 0.12rem 0.55rem 0.14rem 0.6rem;
  background: rgba(58, 141, 180, 0.18);
  border: 0;
  border-radius: 0;                                       /* было 999px — пилюлю убираем */
  color: var(--ember-glow);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
/* Маленький «?» справа от текста — подсказка про бесплатность и отсутствие рекламы.
   На hover чуть ярче. Native title-tooltip даёт всплывашку с alt-текстом. */
.site-footer__badge-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: rgba(168, 216, 236, 0.18);
  color: currentColor;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  opacity: 0.85;
  transition: background 0.18s ease, opacity 0.18s ease;
  user-select: none;
}
.site-footer__badge-help:hover {
  background: rgba(168, 216, 236, 0.35);
  opacity: 1;
}

/* ---------- Footer mobile/tablet (< 900px) — стек колонок + центр + сброс scale бренда ----------
   До 900px футер должен быть аккуратной вертикальной колонкой по центру: лого, кнопка,
   подпись с блёстками, копирайт. На десктопе (>=900px) — три колонки слева-направо,
   там уже свой grid (см. .site-footer__inner @media min-width:900px).
   Старый порог 760px был слишком низкий: на ширинах 760-900px три колонки уже
   не помещались, и контент в каждой жался к левому краю — выглядело «сбито влево». */
@media (max-width: 899px) {
  .site-footer {
    /* Чуть больше воздуха сверху — чтобы лого не упиралось в верхний край футера */
    padding-top: 2.5rem; padding-bottom: 1.5rem;
  }
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;        /* центрируем сами grid-items */
    align-items: start;
    text-align: center;
    gap: 1.25rem;
    width: 100%;
  }
  /* Колонки футера: внутренний flex переключаем в центр, ширину НЕ растягиваем
     до 100%, чтобы justify-items: center реально работал и блоки центрировались
     по горизонтали в виде узких колонок. */
  .site-footer__brand,
  .site-footer__nav {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-inline: auto;
  }
  /* Бренд: убираем scale(1.1), чтобы не вылезал за край узкого экрана */
  .brand--footer {
    transform: none;
    transform-origin: center;
    align-self: center;
  }
  /* Слоган, кнопка и подпись с блёстками — все по центру */
  .site-footer__tagline { text-align: center; margin-inline: auto; }
  .site-footer__btn     { margin-inline: auto; }
  .site-footer__note    { margin-inline: auto; }
  .site-footer__credits {
    text-align: center;
    margin-inline: auto;
  }
}

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; bottom: 1rem; right: 1rem; display: grid; gap: 0.5rem; z-index: 100; max-width: 360px; }
.toast {
  background: var(--ink-deep); color: var(--paper); padding: 1rem 1.25rem;
  border-radius: var(--radius-md); border-left: 4px solid var(--ember); box-shadow: var(--shadow-deep);
  animation: slide-in 0.35s var(--easing);
}
.toast.is-success { border-left-color: var(--moss); }
.toast.is-error { border-left-color: var(--rust); }
@keyframes slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Login / Register / Profile / Village pages
   ========================================================================== */

.page-auth, .page-village, .page-profile { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }

.auth-wrap {
  flex: 1; display: grid; place-items: center; padding: 4rem var(--pad-x);
}
.auth-card {
  width: 100%; max-width: 480px; background: var(--paper-warm); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--shadow-soft);
}
.auth-card h1 { margin-bottom: 0.75rem; }
.auth-card .form__lead { color: var(--ink-soft); margin-bottom: 1.5rem; }
.auth-card .form { gap: 1.25rem; }
.auth-card .auth-foot { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mist); font-size: 0.95rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

.code-input {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: 0.4em;
  text-align: center; padding: 1rem; max-width: 280px;
}

/* ---------- Village chat page ---------- */
.village-page { padding-top: 2rem; padding-bottom: 4rem; }
.village-hero {
  position: relative; padding: clamp(2rem, 5vw, 4rem) 0; background: var(--river); color: var(--paper);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); margin-bottom: 2rem;
}
.village-hero h1 { color: var(--paper); margin-bottom: 0.5rem; }
.village-hero__subtitle { color: var(--ember-glow); font-family: var(--font-display); margin-bottom: 1rem; }
.village-hero__stats { display: flex; gap: 2rem; flex-wrap: wrap; color: rgba(247, 253, 253, 0.85); font-size: 0.95rem; }
.village-hero__stats strong { color: var(--paper); font-weight: 600; }

/* Layout: чат 2/3 ширины слева, сайдбар 1/3 справа. На мобильном — стек. */
.village-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .village-page__layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}
.chat {
  display: grid; gap: 1.5rem; margin: 0;
}

/* Правый сайдбар с правилами и приветствием */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 960px) {
  /* Стики с учётом высоты sticky-хедера: header ≈ 4.3rem + такой же отступ,
     как gap между блоками внутри сайдбара (1.25rem). */
  .chat-sidebar { position: sticky; top: calc(4.3rem + 1.25rem); }
}
.chat-sidebar__block {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
}
.chat-sidebar__block--rules {
  border-left: 3px solid var(--ember-warm);
}
.chat-sidebar__block--admin {
  border-left: 3px solid var(--moss, #7a9c7e);
  background: linear-gradient(135deg, rgba(58, 141, 180, 0.04), rgba(122, 156, 126, 0.04));
}
.chat-sidebar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  margin: 0 0 0.7rem;
  color: var(--ink-deep);
}
.chat-sidebar__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.chat-sidebar__list li {
  margin-bottom: 0.45rem;
}
.chat-sidebar__list li:last-child { margin-bottom: 0; }

/* Нумерованный список правил — кастомные счётчики с речной палитрой:
   крупная цифра river-цвета, italic, чуть отдалена от текста — выглядит как
   написанная пером заметка, а не как стандартный браузерный список. */
.chat-sidebar__list--numbered {
  list-style: none;
  padding-left: 0;
  counter-reset: chat-rule;
}
.chat-sidebar__list--numbered li {
  position: relative;
  counter-increment: chat-rule;
  padding-left: 1.8rem;
}
.chat-sidebar__list--numbered li::before {
  content: counter(chat-rule) ".";
  position: absolute;
  left: 0; top: 0;
  width: 1.4rem;
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--river);
  text-align: right;
  padding-right: 0.3rem;
  line-height: 1.45;
}
.chat-sidebar__text {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.55;
  font-style: italic;
}
.chat-sidebar__sub {
  margin: -0.25rem 0 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* ===== Навигатор по 7 деревням Россони — river-flow стиль ===== */
.chat-sidebar__block--nav {
  border-left: 3px solid var(--river-glow, #86a3a8);
  background: linear-gradient(180deg, rgba(134, 163, 168, 0.06), rgba(247, 253, 253, 0.4));
}
.village-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Вертикальная «река» — фоновая линия за узлами */
.village-nav::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(134, 163, 168, 0.5) 0%,
    rgba(134, 163, 168, 0.9) 50%,
    rgba(134, 163, 168, 0.5) 100%);
  border-radius: 2px;
  z-index: 0;
}
.village-nav__item {
  position: relative;
  z-index: 1;
}
.village-nav__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 0.5rem 0.42rem 0;
  border-radius: var(--radius-sm);
  color: var(--ink-deep);
  transition: background 0.18s, transform 0.18s;
}
.village-nav__link:hover {
  background: rgba(58, 141, 180, 0.08);
  transform: translateX(2px);
}
/* Узел (бусина) на «реке» */
.village-nav__node {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--river-glow, #86a3a8);
  position: relative;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.village-nav__node::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.18s;
}
.village-nav__link:hover .village-nav__node {
  border-color: var(--ember-warm);
  transform: scale(1.1);
}
.village-nav__link:hover .village-nav__node::after {
  background: var(--ember);
}
.village-nav__body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
}
.village-nav__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1.2;
}
.village-nav__tag {
  font-size: 0.77rem;
  color: var(--ink-mute);
  font-style: italic;
}

/* Активный пункт — ember-выделение, заполненный узел */
.village-nav__item.is-active .village-nav__link {
  background: rgba(58, 141, 180, 0.15);
  box-shadow: inset 3px 0 0 var(--ember-warm);
}
.village-nav__item.is-active .village-nav__node {
  background: var(--ember);
  border-color: var(--ember-warm);
  box-shadow: 0 0 0 3px rgba(58, 141, 180, 0.25);
}
.village-nav__item.is-active .village-nav__node::after {
  background: var(--paper);
}
.village-nav__item.is-active .village-nav__name {
  color: var(--ember-warm);
  font-weight: 600;
}
/* Кнопка «Показать раньше» — наверху списка, для авторизованных */
.chat__earlier {
  margin: 0 auto 0.5rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem; border-radius: 999px;
  background: rgba(58, 141, 180, 0.10);
  color: var(--ember-warm);
  font-size: 0.88rem; font-weight: 600;
  border: 1px solid rgba(58, 141, 180, 0.28);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  align-self: center;
}
.chat__earlier:hover {
  background: rgba(58, 141, 180, 0.18);
  border-color: var(--ember-warm);
  transform: translateY(-1px);
}
.chat__earlier.is-loading {
  opacity: 0.6; cursor: wait;
  pointer-events: none;
}

/* ====== Гость: глитч-эффект при попытке промотать историю выше ====== */
.chat__guest-notice {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(135deg, rgba(30, 106, 142, 0.96), rgba(138, 58, 42, 0.96));
  color: var(--paper);
  padding: 0.7rem 1rem; margin: -1px -1px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 0.92rem; line-height: 1.4;
  display: flex; gap: 0.5rem; align-items: center;
  opacity: 0; transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.chat__guest-notice.is-visible {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.chat__guest-notice a {
  color: var(--paper); text-decoration: underline;
  font-weight: 700; white-space: nowrap;
}
.chat__guest-notice a:hover { color: var(--ember-glow); }

/* Глитч-«поломка» во время прокрутки гостем */
.chat__list.is-glitching {
  animation: chatGlitch 0.42s steps(5, end) 1;
}
@keyframes chatGlitch {
  0%   { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(1); }
  18%  { transform: translate(-3px, 1px); filter: hue-rotate(8deg) contrast(1.15); }
  36%  { transform: translate(4px, -2px); filter: hue-rotate(-10deg) contrast(0.9); }
  54%  { transform: translate(-2px, 3px); filter: hue-rotate(4deg) contrast(1.1); }
  72%  { transform: translate(2px, -1px); filter: hue-rotate(-3deg) contrast(0.95); }
  100% { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(1); }
}

.chat__list {
  display: grid; gap: 1rem; padding: 1rem; background: var(--paper-warm);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); min-height: 320px;
  max-height: 100vh; overflow-y: auto; scroll-behavior: smooth;
  position: relative;
}
.chat__empty { text-align: center; padding: 3rem 1rem; color: var(--ink-mute); }

.msg {
  display: grid; grid-template-columns: 40px 1fr; gap: 0.75rem; padding: 0.75rem;
  border-radius: var(--radius-md); transition: background 0.2s; position: relative;
}
.msg:hover { background: rgba(0,0,0,0.03); }
.msg.msg--mine { background: rgba(58, 141, 180, 0.08); }
.msg.msg--reply { margin-left: 2.5rem; border-left: 2px solid var(--ember); padding-left: 1rem; }
.msg__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--river); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; overflow: hidden;
}
.msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.msg__nick { font-weight: 600; color: var(--river); }
.msg__time { font-size: 0.8125rem; color: var(--ink-mute); }
.msg__body { color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.msg__body img.msg__photo { max-width: 240px; border-radius: var(--radius-sm); margin-top: 0.5rem; cursor: zoom-in; }
.msg__quote { background: rgba(0,0,0,0.04); border-left: 2px solid var(--mist); padding: 0.4rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--ink-mute); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* ===== Кнопка-сердечко + счётчик лайков. В одной строке с reply/report ===== */
.msg__like {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.45rem 0.15rem 0.3rem;
  border-radius: 999px;
  background: transparent;
  color: #9aa6ad; /* серый по умолчанию (никто не лайкал) */
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.15s;
  line-height: 1;
}
.msg__like-icon {
  width: 15px; height: 15px;
  fill: currentColor;
  transition: fill 0.18s, transform 0.25s;
}
.msg__like-count { font-variant-numeric: tabular-nums; }

/* Серое — когда никто ещё не лайкнул. Число "0" не показываем — только иконку. */
.msg__like:not(.has-likes) { color: #9aa6ad; }
.msg__like:not(.has-likes) .msg__like-count { display: none; }

/* Read-only сердце на «своих» сообщениях: не интерактивное, цветом как has-likes */
.msg__like--ro {
  cursor: default; pointer-events: none;
  color: #e63946;
}
.msg__actions--ro { justify-content: flex-end; /* свои сообщения справа */ }

/* Розовое — когда >=1 лайк (от кого-то) */
.msg__like.has-likes { color: #e63946; }

/* «Мой лайк» — заполненное розовое сердце с лёгким свечением */
.msg__like.is-mine { color: #c91e2c; }
.msg__like.is-mine .msg__like-icon { filter: drop-shadow(0 1px 2px rgba(201, 30, 44, 0.35)); }

/* При наведении (на доступную кнопку) — краснеет и «бьётся» */
.msg__like:not([disabled]):hover { color: #a01525; background: rgba(160, 21, 37, 0.08); }
.msg__like:not([disabled]):hover .msg__like-icon {
  animation: heartBeat 0.85s ease-in-out infinite;
}
@keyframes heartBeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.25); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.2); }
  70%  { transform: scale(1); }
}

/* Pop при клике — короткий «поднос» */
.msg__like.is-popping .msg__like-icon { animation: heartPop 0.32s cubic-bezier(.2, .8, .2, 1.2) 1; }
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.msg__like[disabled] { cursor: not-allowed; opacity: 0.55; }
.msg__like.is-busy { opacity: 0.7; pointer-events: none; }

/* Actions: одна компактная строка с лайком, ответить, пожаловаться.
   Лайк виден всегда (с числом), остальные кнопки появляются на ховер сообщения. */
.msg__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1;
  min-height: 22px; /* фиксированная высота строки — нет скачка при ховере */
}
.msg__actions > button:not(.msg__like) {
  color: var(--ink-mute);
  padding: 0.15rem 0.45rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, visibility 0.18s, color 0.15s;
}
.msg:hover .msg__actions > button:not(.msg__like) { visibility: visible; opacity: 1; }
.msg__actions > button:not(.msg__like):hover { color: var(--ember-warm); }
/* На своих сообщениях actions полностью скрыты — сюда не доходим, потому что блок в PHP не рендерится */

.composer {
  display: grid; gap: 0.75rem; padding: 1rem; background: var(--paper-warm);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
}
.composer__quote {
  background: rgba(0,0,0,0.04); border-left: 2px solid var(--ember); padding: 0.5rem 0.75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.875rem; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.composer__quote button { color: var(--ink-mute); padding: 0 0.5rem; }
.composer__quote.is-hidden { display: none; }
.composer textarea {
  font: inherit; padding: 0.75rem 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  resize: none; min-height: 80px; max-height: 240px; background: var(--paper); color: var(--ink-deep);
}
.composer__bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.composer__attach, .composer__emoji {
  width: 40px; height: 40px; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-mute);
  background: var(--paper); transition: color 0.2s, border-color 0.2s;
}
.composer__attach:hover, .composer__emoji:hover { color: var(--ember-warm); border-color: var(--ember); }
.composer__attach svg, .composer__emoji svg { width: 22px; height: 22px; }
.composer__send { margin-left: auto; }
.composer__file-name { font-size: 0.85rem; color: var(--ink-mute); }
.composer__login {
  text-align: center; padding: 1.25rem; border-radius: var(--radius-md);
  background: rgba(58, 141, 180, 0.08); color: var(--ink-soft);
}
.composer__login a { font-weight: 600; }

/* Emoji picker */
.emoji-pop {
  position: absolute; background: var(--paper); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-deep);
  padding: 0.5rem; display: none; grid-template-columns: repeat(8, 1fr); gap: 0.3rem; z-index: 20;
  width: 380px; max-width: calc(100vw - 2rem); box-sizing: border-box;
}
.emoji-pop.show { display: grid; }
.emoji-pop button {
  font-size: 1.3rem; padding: 0.3rem 0; border-radius: var(--radius-sm);
  min-width: 0; text-align: center; line-height: 1;
}
.emoji-pop button:hover { background: rgba(58, 141, 180, 0.15); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(12, 28, 36, 0.92); display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 2rem;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-md); box-shadow: var(--shadow-deep); }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--paper); font-size: 2rem; }

/* =============================================================
   Profile page — трёхколоночная сетка:
   слева узкий profile-card, в середине чат (широкий), справа виджеты.
   ============================================================= */
.profile-grid {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem auto 3rem;
  max-width: 1280px;
}
/* Две колонки от 720px и выше: слева profile-card + profile-side под ним,
   справа чат во всю высоту, прижатый к правому краю и занимающий 2/3 ширины. */
@media (min-width: 720px) {
  .profile-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); /* 1/3 + 2/3 */
    gap: 1.25rem;
    align-items: start;
  }
  .clock-card   { grid-column: 1; grid-row: 1; }
  .profile-card { grid-column: 1; grid-row: 2; }
  .profile-side { grid-column: 1; grid-row: 3; }
  .profile-chat { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------- Левая колонка: карточка профиля ---------- */
.profile-card {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Ссылка «Выйти» в правом верхнем углу карточки — серый текст, без декоров */
.profile-card__logout {
  position: absolute;
  top: 0.75rem; right: 1rem;
  font-size: 0.75rem;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.02em;
  z-index: 1;
}
.profile-card__logout:hover {
  color: var(--ember-warm);
  background: rgba(58,141,180,0.08);
}

/* Шапка профиля: слева вертикально аватар → имя, справа мета */
.profile-head {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 0.5rem;
}

/* Обёртка аватара — в одной грид-колонке: круг + подсказка-на-hover + имя */
.profile-avatar-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0.1rem;          /* минимальный отступ между элементами */
  margin-top: 20px;     /* визуальное смещение колонки аватара вниз */
}
/* Имя под подсказкой — inline-flex, карандаш абсолютно слева на -25px */
.profile-avatar-wrap .edit-row--title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  margin-top: -4px;       /* приподняли имя на ~5px от прежнего положения */
  position: relative;
}
.profile-avatar-wrap .edit-row--title .edit-row__pencil {
  position: absolute;
  left: -25px;
  margin-left: 0;
}
/* actions сами идут с order: -1 (из базовых стилей), переопределение убрано */
.profile-avatar-hint {
  font-size: 0.62rem; line-height: 1.2;
  color: var(--ink-mute);
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none; /* подсказка сама не «hover-able» — не запускает себя */
  letter-spacing: 0.02em;
  /* Резервируем место, чтобы появление/исчезновение не дёргало имя */
  height: 1.7em;
  display: flex; align-items: center; justify-content: center;
}
/* Подсказка показывается только при наведении на КРУГ аватара (или фокусе/загрузке),
   но не при наведении на сам текст подсказки. */
.profile-avatar:hover ~ .profile-avatar-hint,
.profile-avatar:focus-visible ~ .profile-avatar-hint,
.profile-avatar.is-saving ~ .profile-avatar-hint {
  opacity: 1;
}

/* E-mail badge под именем: иконка конверта + адрес + зелёный чек верификации.
   Маленькая «пилюля» в тёплом ember-тоне, повторяет язык сайта.
   Не кликабельная — просто индикатор, что почта подтверждена. */
.profile-email {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 6px;
  padding: 3px 9px 3px 7px;
  background: rgba(58,141,180,0.08);
  border: 1px solid rgba(58,141,180,0.28);
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--ink-soft);
  max-width: 100%;
}
.profile-email__icon {
  color: var(--ember);
  flex-shrink: 0;
}
.profile-email__addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11em;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.profile-email__check {
  color: #3a6c40;             /* мягкий зелёный = «подтверждено» */
  flex-shrink: 0;
}

/* Аватар с выезжающей плашкой «сменить аву» */
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: var(--river);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  flex-shrink: 0;
  border: 2px solid var(--paper-warm);
  box-shadow: 0 0 0 1px var(--border-soft);
  position: relative;
  cursor: pointer;
  outline: none;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar:focus-visible { box-shadow: 0 0 0 1px var(--border-soft), 0 0 0 3px rgba(58,141,180,0.5); }
.profile-avatar__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px;
  background: linear-gradient(180deg, rgba(12,28,36,0) 0%, rgba(12,28,36,0.85) 60%);
  color: #fff;
  font-size: 8px; line-height: 1.1; font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: lowercase;
  transform: translateY(100%);
  transition: transform 0.25s var(--easing, ease-out);
  pointer-events: none;
}
.profile-avatar:hover .profile-avatar__overlay,
.profile-avatar:focus-visible .profile-avatar__overlay {
  transform: translateY(0);
}
.profile-avatar.is-saving { opacity: 0.6; }

/* Никнейм-заголовок */
.profile-head__body {
  min-width: 0;
  margin-top: 10px;   /* сдвиг правой колонки шапки вниз */
}
.profile-head__title {
  /* стиль через .edit-row--title */
}
.profile-meta {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
}
/* Метка над значением — компактно и не зависит от ширины колонки */
.profile-meta > div {
  display: flex; flex-direction: column;
  gap: 0.05rem;
  padding: 0.15rem 0;
}
.profile-meta dt {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute); margin: 0; font-weight: 500;
  line-height: 1.1;
}
.profile-meta dd {
  margin: 0; color: var(--ink-deep); font-weight: 500;
  position: relative;
  min-width: 0;
  word-break: break-word;
}
.profile-meta__ago {
  color: var(--ink-mute);
  font-weight: 400;
  margin-left: 0.2rem;
  white-space: nowrap;
}

/* Мини-таблица 2×2: «Сообщений» сверху во всю ширину (dt+dd в одну строку),
   «Лайков» и «Ответов» снизу. Едва заметные границы между ячейками.
   Селектор повышенной специфичности — иначе перекрывается правилом
   `.profile-meta > div { flex-direction: column }`. */
.profile-meta > .profile-meta__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  padding: 0;                       /* отменяем общий paddings .profile-meta > div */
  margin-top: 0.3rem;
  border: 1px solid rgba(12, 28, 36, 0.07);
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  overflow: hidden;
  gap: 0;
}
.profile-meta__stats-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0.25rem 0.4rem 0.3rem;
  gap: 0.02rem;
}
.profile-meta__stats-cell--wide {
  grid-column: 1 / -1;
  border-bottom: 1px solid rgba(12, 28, 36, 0.06);
}
/* «Сообщений 17» одной строкой: dt + dd в горизонтальном flex */
.profile-meta__stats-cell--inline {
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.22rem 0.5rem 0.25rem;
}
.profile-meta__stats-cell:not(.profile-meta__stats-cell--wide):nth-of-type(3) {
  border-left: 1px solid rgba(12, 28, 36, 0.06);
}
.profile-meta__stats dt {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 500;
  line-height: 1.1;
}
.profile-meta__stats dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* Кнопка «Настройки» — прямой ребёнок .profile-head (2-колоночный grid),
   спан по обеим колонкам = на всю ширину карточки, под аватаром+именем+почтой
   слева и под мини-таблицей справа. Над border-bottom линией шапки. */
.profile-settings-toggle {
  grid-column: 1 / -1;       /* через обе грид-колонки шапки */
  display: flex;
  align-items: center; justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: rgba(12, 28, 36, 0.04);
  color: var(--ink-soft);
  border: 1px solid rgba(12, 28, 36, 0.12);
  border-radius: 0;            /* без скруглений — строго */
  font-weight: 500;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-settings-toggle:hover {
  background: rgba(58, 141, 180, 0.08);
  border-color: rgba(58, 141, 180, 0.4);
  color: var(--ember-warm);
}
.profile-settings-toggle[aria-expanded="true"] {
  background: rgba(58, 141, 180, 0.12);
  border-color: var(--ember-warm);
  color: var(--ember-warm);
}
.profile-settings[hidden] { display: none; }
.profile-settings {
  display: grid; gap: 1rem;
  animation: settingsFade 0.22s ease;
}
@keyframes settingsFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Inline-edit row pattern ----- */
.edit-row { position: relative; }
.edit-row__display { display: inline; }
.edit-row--title .edit-row__display {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 600; line-height: 1.15;
  color: var(--ink-deep);
  white-space: nowrap;             /* не переносить ник на 2 строки */
}
/* Длинный ник (>8 символов, без пробелов): шрифт мельче, обрезано до 8+«…» */
.edit-row--title.is-long .edit-row__display {
  font-size: 1.2rem;
}
.edit-row--title.is-long .edit-row__input--title {
  font-size: 1.2rem;
}

/* Имя с пробелами («Иван Петров», «Александр Сергеевич Пушкин»):
   разрешаем перенос ПО ПРОБЕЛАМ, ограничиваем 3 строки и ≈9 символов в строке.
   Полное имя — всегда в title-tooltip. */
.edit-row--title.is-multiline .edit-row__display {
  font-size: 1.05rem;
  line-height: 1.15;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: 9em;                   /* ~9 символов display-шрифта на строку */
  word-break: keep-all;             /* предпочитать перенос по пробелу */
  overflow-wrap: anywhere;          /* но допускать разрыв, если одно слово шире строки */
  text-align: center;
}
.edit-row--title.is-multiline .edit-row__input--title {
  font-size: 1.05rem;
}

/* Карандаш — появляется при hover на строке */
.edit-row__pencil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-mute);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
  vertical-align: middle;
  padding: 0;
}
.edit-row:hover .edit-row__pencil,
.edit-row:focus-within .edit-row__pencil {
  opacity: 1;
}
.edit-row__pencil:hover {
  color: var(--ember-warm);
  background: rgba(58,141,180,0.10);
  border-color: rgba(58,141,180,0.25);
}

/* Инпут — minimal-стиль: наследует шрифт/размер от родителя, чтобы заменить
   собой display-элемент без визуального сдвига. Скрыт по умолчанию. */
.edit-row__input {
  display: none;
  font: inherit;                  /* унаследовать font-family, size, weight, line-height */
  color: var(--ink-deep);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ember);
  border-radius: 0;
  padding: 0 0.1em;
  margin: 0;
  outline: none;
  box-shadow: none;
  min-width: 4em;                 /* не сжиматься до символа */
  max-width: 100%;
  vertical-align: baseline;
  letter-spacing: inherit;
}
.edit-row__input:focus,
.edit-row__input:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom: 1.5px solid var(--ember);   /* остаётся только подчёркивание */
}
/* Никнейм-инпут — display-шрифт, как у самого заголовка имени */
.edit-row__input--title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
  width: 4em;
  background: transparent;
}
/* При редактировании ник прижимается к левому краю колонки и получает
   непрозрачный paper-фон, чтобы накрыть выходящие справа метаданные */
.profile-avatar-wrap .edit-row--title.is-editing {
  align-self: flex-start;
  background: var(--paper-warm);
  padding: 0 4px;
  border-radius: 4px;
  position: relative;
  z-index: 3;
}
/* Селект деревни — тот же дизайн, что у name-инпута: ember-полоска снизу, без outline */
select.edit-row__input {
  min-width: 6em;
  padding-right: 1.1em;           /* место под нативную стрелку */
  outline: none;
}
select.edit-row__input:focus { outline: none; }
/* dd в edit-row meta — relative-якорь для абсолютных ✓/✕ */
.profile-meta .edit-row dd {
  white-space: nowrap;
  position: relative;
}

/* Кнопки ✓/✕ — overlay СЛЕВА от поля, не двигают сам input/select */
.edit-row__actions {
  display: none;
  gap: 0;                          /* кнопки прижаты вплотную */
  vertical-align: middle;
}
.edit-row.is-editing .edit-row__actions {
  display: inline-flex;
  position: absolute;
  right: 100%;                     /* справа от actions = левый край контейнера */
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;                 /* вплотную к полю/селекту */
  z-index: 4;                      /* поверх соседних блоков */
}
.edit-row__ok, .edit-row__cancel {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 0;                /* квадратные, как сегмент */
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  outline: none;
}
.edit-row__ok        { color: #3a6c40; border-color: rgba(74,108,79,0.45); border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.edit-row__ok:hover  { background: rgba(74,108,79,0.12); border-color: #4a6c4f; }
.edit-row__cancel    { width: 11px; color: #8a3a2a; border-color: rgba(138,58,42,0.45); border-left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.edit-row__cancel svg { width: 9px; height: 9px; }
.edit-row__cancel:hover { background: rgba(138,58,42,0.10); border-color: #8a3a2a; }
.edit-row__ok:active, .edit-row__cancel:active { transform: scale(0.94); }

/* Состояние «в режиме редактирования» */
.edit-row.is-editing .edit-row__display { display: none; }
.edit-row.is-editing .edit-row__input   { display: inline-block; }
.edit-row.is-editing .edit-row__pencil  { display: none; }
/* .edit-row__actions display управляется в блоке actions выше (абсолютное позиционирование) */

/* Подсветка «сохранение/сохранено» — inline-маркер сразу после значения,
   чтобы не вылетал за пределы карточки на длинных строках. */
.edit-row.is-saving .edit-row__input { opacity: 0.6; pointer-events: none; }
.edit-row.is-saved .edit-row__display::after {
  content: ' ✓';
  display: inline-block;
  margin-left: 0.35rem;
  color: #3a6c40;
  font-weight: 700;
  font-size: 0.95em;
  animation: editRowSavedFade 1.4s ease;
}
@keyframes editRowSavedFade {
  0%   { opacity: 0; transform: translateY(-2px); }
  20%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Смена пароля: trigger-кнопка + inline-форма ---- */
.profile-password { display: flex; align-items: center; }
.profile-password__trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  color: var(--ink-soft);
  font: inherit; font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-password__trigger:hover {
  background: rgba(58,141,180,0.08);
  border-color: rgba(58,141,180,0.4);
  color: var(--ember-warm);
}
.profile-password__trigger svg { flex-shrink: 0; color: var(--ember); }
/* HTML-атрибут [hidden] перебивается display: inline-flex выше — восстанавливаем приоритет */
.profile-password__trigger[hidden] { display: none; }
.profile-password__row {
  display: inline-flex; align-items: center; gap: 0;
}
.profile-password__row[hidden] { display: none; }
.profile-password__input {
  font: inherit; font-size: 0.9rem;
  color: var(--ink-deep);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ember);
  border-radius: 0;
  padding: 0.3rem 0.4rem;
  margin: 0;
  outline: none;
  box-shadow: none;
  width: 14em;
}
.profile-password__input:focus,
.profile-password__input:focus-visible {
  outline: none; box-shadow: none;
  border-bottom: 1.5px solid var(--ember);
}
/* Placeholder — чуть мельче основного текста, чтобы не загораживал ввод */
.profile-password__input::placeholder {
  font-size: 0.8rem;
  color: var(--ink-mute);
  opacity: 0.75;
}
/* ✓/✕ вплотную справа — переиспользуем .edit-row__ok/.edit-row__cancel.
   Здесь только подрезаем зазор между ними и инпутом. */
.profile-password__row .edit-row__ok     { margin-left: 0.35rem; }
.profile-password__row .edit-row__cancel { margin-left: 0; }
.profile-password.is-saving .profile-password__input { opacity: 0.6; pointer-events: none; }

/* Flash-bar (ошибки/успех на всю карточку) */
.profile-flash {
  margin: 0.75rem 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border-left: 3px solid;
}
.profile-flash--ok    { background: rgba(74,108,79,0.10);  color: #3a6c40; border-color: #4a6c4f; }
.profile-flash--error { background: rgba(138,58,42,0.10); color: #8a3a2a; border-color: #8a3a2a; }

/* ----- Секции с разделителями ----- */
.profile-section {
  padding: 1.1rem 0 0.6rem;
  border-top: 1px solid var(--border-soft);
}
.profile-section:first-of-type { border-top: 0; padding-top: 0.5rem; }
.profile-section__title {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 600;
  color: var(--ink-deep);
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}

/* Тумблеры уведомлений — компактные iOS-стиля */
.profile-toggle {
  display: grid; grid-template-columns: 36px 1fr;
  align-items: center; gap: 0.7rem;
  padding: 0.4rem 0;
  font-size: 0.88rem; color: var(--ink-deep);
  cursor: pointer;
}
.profile-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.profile-toggle__switch {
  width: 36px; height: 20px; border-radius: 12px;
  background: #c5cbd1;
  position: relative;
  transition: background 0.18s;
  flex-shrink: 0;
}
.profile-toggle__switch::before {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.profile-toggle input:checked + .profile-toggle__switch {
  background: var(--ember);
}
.profile-toggle input:checked + .profile-toggle__switch::before {
  transform: translateX(16px);
}
.profile-toggle input:focus-visible + .profile-toggle__switch {
  box-shadow: 0 0 0 3px rgba(58,141,180,0.25);
}

.profile-section--exit { border-top: 1px solid var(--border-soft); padding-top: 1rem; }

/* ---------- Удаление аккаунта (danger-секция) ---------- */
.profile-section--danger {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(138, 58, 42, 0.25);
}
.profile-section__title--danger { color: var(--rust); }
.profile-section--danger .profile-section__hint {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
.profile-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rust);
  background: transparent;
  border: 1px solid rgba(138, 58, 42, 0.45);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.18s var(--easing),
              background 0.18s var(--easing),
              border-color 0.18s var(--easing);
}
.profile-delete-btn:hover {
  color: #fff;
  background: var(--rust);
  border-color: var(--rust);
}
.profile-delete-btn:disabled { opacity: 0.6; cursor: wait; }
.profile-delete-btn:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Inline-вариант — компактный, чтобы рядом с триггером «Сменить пароль» не доминировал */
.profile-delete-btn--inline {
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Шапка password-секции: два триггера в строке (сменить пароль ↔ удалить аккаунт),
   стекаются вертикально на узких экранах */
.profile-password__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* ==========================================================================
   Модалка удаления аккаунта (на profile.php).
   ========================================================================== */
.del-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  animation: delFadeIn 0.22s var(--easing);
}
.del-modal[hidden] { display: none; }
.del-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 28, 36, 0.72);
  backdrop-filter: blur(2px);
}
.del-modal__dialog {
  position: relative;
  width: 100%; max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-deep);
  animation: delPopIn 0.28s var(--easing);
}
@keyframes delFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes delPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.del-modal__close {
  position: absolute; top: 0.55rem; right: 0.75rem;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  font-size: 1.5rem; line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s, background 0.18s;
}
.del-modal__close:hover { color: var(--rust); background: rgba(138, 58, 42, 0.08); }
.del-modal__icon {
  display: flex; justify-content: center;
  margin-bottom: 0.85rem;
  color: var(--rust);
  opacity: 0.85;
}
.del-modal__title {
  margin: 0 0 0.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-deep);
}
.del-modal__subtitle {
  margin: 0 0 0.85rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.del-modal__hint {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-mute);
  font-style: italic;
}
.del-modal__countdown {
  display: inline-block;
  min-width: 1.2em;
  font-weight: 700;
  color: var(--rust);
  font-style: normal;
  font-family: 'Consolas', 'Monaco', monospace;
}
.del-modal__actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  justify-content: space-between;
  align-items: center;
}
.del-modal__btn {
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.18s var(--easing);
}
/* Cancel-«ссылка»: тонкая текстовая ссылка слева, не кнопка.
   Места в строке столько же, что и у кнопки-подтверждения справа. */
.del-modal__cancel-link {
  flex: 0 1 auto;
  padding: 0.4rem 0.1rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dotted rgba(70, 89, 107, 0.3);
  cursor: pointer;
  transition: color 0.18s var(--easing), border-color 0.18s var(--easing);
}
.del-modal__cancel-link:hover {
  color: var(--river);
  border-bottom-color: rgba(26, 58, 74, 0.5);
}
.del-modal__btn--confirm {
  color: #fff;
  background: var(--rust);
  border: 1px solid var(--rust);
}
.del-modal__btn--confirm:hover:not(:disabled) {
  background: #6e2e22;
  border-color: #6e2e22;
}
.del-modal__btn--confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Прощальная модалка на главной (/?deleted=1).
   ========================================================================== */
.farewell {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  animation: delFadeIn 0.3s var(--easing);
}
.farewell__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 28, 36, 0.78);
  backdrop-filter: blur(3px);
}
.farewell__dialog {
  position: relative;
  width: 100%; max-width: 520px;
  background: #f7fdfd;
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(130, 85, 35, 0.06), transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(130, 85, 35, 0.08), transparent 55%);
  border: 1px solid rgba(120, 85, 50, 0.28);
  border-radius: 4px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 14px 36px rgba(80, 45, 10, 0.25), 0 2px 5px rgba(0, 0, 0, 0.06);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  text-align: center;
  animation: delPopIn 0.32s var(--easing);
}
.farewell__close {
  position: absolute; top: 0.6rem; right: 0.85rem;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  font-size: 1.5rem; line-height: 1;
  color: rgba(80, 45, 10, 0.45);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s, background 0.18s;
}
.farewell__close:hover { color: rgba(80, 45, 10, 0.85); background: rgba(80, 45, 10, 0.08); }
.farewell__crest {
  font-size: 1rem;
  color: rgba(185, 80, 60, 0.6);
  letter-spacing: 0.5em;
  margin-bottom: 1rem;
}
.farewell__title {
  margin: 0 0 0.5rem;
  font-family: 'Yeseva One', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--river);
}
.farewell__lead {
  margin: 0 0 1.25rem;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
}
.farewell__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.1rem;
  margin: 0 0 1.3rem;
  text-align: left;
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
}
.farewell__stat {
  border-bottom: 1px dotted rgba(120, 85, 50, 0.3);
  padding-bottom: 0.35rem;
  display: flex; justify-content: space-between; gap: 0.5rem;
}
.farewell__stat dt {
  color: var(--ink-mute);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.farewell__stat dd {
  margin: 0;
  color: var(--ink-deep);
  font-weight: 600;
  word-break: break-word;
  text-align: right;
}
.farewell__bye {
  margin: 0 0 1.4rem;
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ember-warm);
  line-height: 1.4;
}
.farewell__ok {
  display: inline-block;
  padding: 0.6rem 1.8rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(135deg, var(--ember-glow), var(--ember));
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(58, 141, 180, 0.35);
  transition: transform 0.18s var(--easing), box-shadow 0.18s var(--easing);
}
.farewell__ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(58, 141, 180, 0.45);
}

@media (max-width: 480px) {
  .farewell__stats { grid-template-columns: 1fr; gap: 0.5rem; }
  .del-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .del-modal__btn { width: 100%; }
  .del-modal__cancel-link {
    text-align: center;
    margin-top: 0.4rem;
  }
}
.profile-exit {
  display: inline-flex; align-items: center;
  color: var(--ink-mute); text-decoration: none;
  font-size: 0.85rem; font-weight: 500;
  padding: 0.4rem 0.6rem; margin-left: -0.6rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.profile-exit:hover { color: var(--ember-warm); background: rgba(58,141,180,0.08); }

/* ---------- Левая нижняя колонка: часы + радио + погода (под profile-card) ---------- */
.profile-side {
  display: flex; flex-direction: column; gap: 1rem;
}

/* ---------- Радио-блок: iframe-окно на radiobitva.ru ---------- */
.radio-card {
  background: linear-gradient(135deg, var(--paper-warm) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 0.55rem 0.85rem 0.7rem;
  flex-shrink: 0;
  position: relative;
}
.radio-card__title {
  font-family: var(--font-display);
  font-size: 0.85rem;       /* источник примерно 1.25rem — у нас в 1.5× меньше */
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.45rem;
  padding-left: 30px;
  color: var(--ink-deep);
  letter-spacing: 0.005em;
}
.radio-card__name { color: var(--ember-warm); }
.radio-card__sep { color: var(--ink-mute); margin: 0 0.15rem; }
.radio-card__city { color: var(--ink-deep); font-weight: 500; }

.radio-card__frame-wrap {
  position: relative;
  width: 350px; max-width: 100%;
  height: 60px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-soft);
}
/* Точная подгонка позиции iframe-окна под плеер radiobitva.ru.
   .a-player: x=379.5, y=650, w=341, h=56 (источник в viewport 991px).
   После scale(0.7) визуально 238.7 × 39.2 — центрируем в окне 350×60:
     left = (350 - 238.7)/2 - 379.5*0.7 ≈ 55.65 - 265.65 = -210
     top  = (60  -  39.2)/2 - 650 *0.7 ≈ 10.4  - 455    = -445 */
.radio-card__frame {
  position: absolute;
  width: 991px; height: 900px;
  border: 0;
  transform: scale(0.7);
  transform-origin: top left;
  top: -448px;
  left: -260px;
  pointer-events: auto;
}

/* ---------- Виджет «Часы / Дата» ----------
   Структура и поведение те же, что у тёмного табло раньше: дата слева,
   тонкая вертикальная риска, время справа. Палитра — светлая,
   синхронизирована с radio-card / weather-card (paper-warm + ember-акценты). */
.clock-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.85rem 0.42rem;
  background: linear-gradient(135deg, var(--paper-warm) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Верхняя ember-полоска — деликатный «огонёк» по верхнему краю (сохранена) */
.clock-card::before {
  content: '';
  position: absolute; left: 12%; right: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(58, 141, 180, 0) 0%,
    rgba(58, 141, 180, 0.45) 50%,
    rgba(58, 141, 180, 0) 100%);
  pointer-events: none;
}
/* Декоративная вертикальная риска-разделитель между датой и временем */
.clock-card::after {
  content: '';
  position: absolute; top: 28%; bottom: 28%;
  right: 38%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(58, 141, 180, 0) 0%,
    rgba(58, 141, 180, 0.35) 50%,
    rgba(58, 141, 180, 0) 100%);
  pointer-events: none;
}
.clock-card__date {
  font-family: var(--font-display);
  font-size: 0.66rem; font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto;
}
.clock-card__time {
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  font-size: 1.02rem; font-weight: 700;
  color: var(--ember-warm);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---------- Виджет «Погода» ---------- */
/* Inline-вариант карточки погоды для карточки «Прогноз погоды» на главной (для авторизованных).
   Сохраняет всю внутреннюю верстку профильной карточки, но снимает фикс-ширину сайдбара
   и добавляет отступ сверху от текста panel-body. min-width: 0 — чтобы горизонтальный
   скролл часовой ленты не растягивал саму карточку за пределы родителя. */
.weather-card--inline {
  margin-top: 0.6rem;
  min-width: 0;
  /* Жёсткая ширина от ширины контейнера (.qa__panel с container-type: inline-size).
     В отличие от width: 100%, эту величину браузер не пересчитывает по содержимому —
     поэтому 24-часовая лента «Завтра» не вытягивает карточку за пределы панели. */
  width: 100cqi;
  max-width: 100cqi;
  box-sizing: border-box;
}
.weather-card--inline .weather-pane,
.weather-card--inline .weather-panes { min-width: 0; max-width: 100%; }
.weather-card--inline .weather-hours { max-width: 100%; }

/* Десктопный потолок ширины — только когда панель достаточно широка.
   Для боковой карточки в профиле работает обычный max-width 616px. */
@media (min-width: 720px) {
  .weather-card { max-width: 616px; }
}
@container (min-width: 640px) {
  .weather-card--inline { max-width: 616px; }
}

.weather-card {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.85rem;
  /* Базовое поведение: карточка занимает 100% ширины родителя, не вырастает за его пределы.
     Десктопный потолок 616px включается медиа-запросом ниже. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;        /* не сплющиваться, когда сайдбар сжимается */
  min-height: 140px;     /* запас для содержимого, даже при коротком окне */
}
.weather-card__head {
  padding: 0.65rem 0.95rem;
  background: linear-gradient(135deg, rgba(134,163,168,0.18), rgba(58,141,180,0.08));
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem;
}
.weather-card__kicker {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ember-warm); font-weight: 600;
}
.weather-card__place {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  color: var(--ink-deep);
}
.weather-card__body { padding: 0.5rem 0; max-width: 100%; min-width: 0; box-sizing: border-box; }
.weather-panes, .weather-pane { max-width: 100%; min-width: 0; box-sizing: border-box; }
.weather-card__loading {
  padding: 1.25rem 1rem; color: var(--ink-mute); font-style: italic;
  text-align: center; font-size: 0.85rem;
}
.weather-card__loading--err { color: #8a3a2a; font-style: normal; }
.weather-card__stale {
  padding: 0.4rem 1rem; font-size: 0.7rem; color: var(--ink-mute);
  font-style: italic; text-align: center;
}

/* Текущая погода: большая температура слева, мета-таблица справа */
.weather-now {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem;
  align-items: center;
  padding: 0.55rem 0.95rem 0.7rem;
  border-bottom: 1px dashed var(--border-soft);
}
.weather-now__main {
  display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 0;
  max-width: 90px;
}
.weather-now__temp {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 600; line-height: 1;
  color: var(--river);
}
.weather-now__desc {
  font-size: 0.78rem; color: var(--ink-mute);
  font-style: italic;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.weather-now__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.6rem;
  margin: 0; font-size: 0.72rem;
}
.weather-now__meta > div { display: flex; gap: 0.3rem; align-items: baseline; min-width: 0; }
.weather-now__meta dt { color: var(--ink-mute); margin: 0; font-weight: 400; }
.weather-now__meta dd {
  margin: 0; color: var(--ink-deep); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* На экранах < 1240 правый сайдбар становится узким — раскладываем мета
   в одну колонку, чтобы значения помещались целиком, а не обрезались. */
@media (max-width: 1239px) {
  .weather-now {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .weather-now__meta {
    grid-template-columns: 1fr;
    font-size: 0.76rem;
    gap: 0.15rem 0;
  }
  .weather-now__meta > div {
    justify-content: space-between;
    gap: 0.6rem;
  }
  .weather-now__meta dd { white-space: normal; overflow: visible; text-align: right; }
}

/* Табы дней */
.weather-tabs {
  display: flex; gap: 0.2rem;
  padding: 0.55rem 0.7rem 0.35rem;
  border-bottom: 1px solid var(--border-soft);
}
.weather-tab {
  flex: 1;
  background: transparent; border: 0;
  font-family: inherit; font-size: 0.74rem;
  color: var(--ink-mute);
  padding: 0.35rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}
.weather-tab:hover { background: rgba(58,141,180,0.08); color: var(--ember-warm); }
.weather-tab.is-active {
  background: rgba(58,141,180,0.18);
  color: var(--ember-warm); font-weight: 600;
}

/* Часы — горизонтальный скролл */
.weather-pane { display: none; }
.weather-pane.is-active { display: block; }
.weather-hours {
  display: flex; gap: 0.35rem;
  padding: 0.5rem 0.7rem 0.7rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.weather-hours::-webkit-scrollbar { height: 6px; }
.weather-hours::-webkit-scrollbar-thumb {
  background: rgba(134,163,168,0.4); border-radius: 3px;
}
.weather-hour {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  min-width: 52px;
  font-size: 0.7rem;
}
.weather-hour--rain { border-color: rgba(134,163,168,0.6); background: rgba(134,163,168,0.10); }
.weather-hour__time { color: var(--ink-mute); font-size: 0.68rem; }
.weather-hour__icon { font-size: 1.05rem; line-height: 1; }
.weather-hour__temp { font-weight: 600; color: var(--ink-deep); font-size: 0.78rem; }
.weather-hour__rain { font-size: 0.62rem; color: #46596b; }

/* ---------- Чат в средней колонке профиля ---------- */
.profile-chat {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 480px;
  /* Чтобы чат не уезжал в подвал на длинных экранах — ограничиваем по высоте */
  max-height: calc(100vh - 3rem);
  position: sticky; top: 1.5rem;
}
@media (max-width: 719px) {
  .profile-chat { position: static; max-height: none; min-height: 420px; }
}

/* ==========================================================================
   Profile.php — мобильная адаптивность (< 720px)
   Защита от расползания: min-width 0 у грид-айтемов, мягкие отступы,
   стек шапки на самых узких, словоразрыв у длинных значений.
   ========================================================================== */
@media (max-width: 719px) {
  /* Уменьшаем боковые поля у grid-обёртки, чтобы карточки не вылезали */
  .profile-grid {
    margin: 1rem auto 2rem;
    gap: 1rem;
  }
  /* Грид-айтемы должны уметь усыхать ниже своего contents-min-width,
     иначе длинные ники/email распирают карточку шире вьюпорта. */
  .profile-card,
  .profile-chat,
  .profile-side { min-width: 0; }

  /* Внутри карточки профиля — компактные паддинги и защита от переполнения. */
  .profile-card {
    padding: 1.25rem 1rem 1.25rem;
    overflow: hidden;             /* любой случайный overflow внутри не «прорывает» вьюпорт */
  }
  .profile-card,
  .profile-card * { min-width: 0; }
  .profile-head,
  .profile-head__body,
  .profile-meta,
  .profile-meta dd {
    min-width: 0;
    overflow-wrap: anywhere;      /* длинные слова/email/ссылки переносим по любому символу */
  }

  /* Чат-блок: ограничиваем pchat-msg по ширине, чтобы текст переносился. */
  .pchat-msg,
  .pchat-msg__body,
  .pchat-msg__text,
  .pchat-msg__nick { min-width: 0; overflow-wrap: anywhere; }

  /* Правая колонка: радио / часы / погода. Убираем фикс-ширины. */
  .profile-side > *,
  .profile-side .radio-card,
  .profile-side .radio-card__frame-wrap { max-width: 100%; }

  /* На самых узких экранах (<420px) аватар-колонка распирает шапку.
     Стекаем шапку в столбец: аватар сверху по центру, метa снизу. */
  @media (max-width: 419px) {
    .profile-head {
      grid-template-columns: 1fr;
      gap: 0.85rem;
      text-align: center;
    }
    .profile-avatar-wrap {
      align-items: center;
      margin-top: 0;
    }
    .profile-meta {
      align-items: center;
      text-align: center;
    }
    /* Мини-таблица «Сообщений / Лайков / Ответов» — в один столбец на самых узких,
       чтобы цифры не сжимались. */
    .profile-meta > .profile-meta__stats {
      grid-template-columns: 1fr;
    }
    .profile-meta__stats-cell--wide { border-bottom: 1px solid rgba(12, 28, 36, 0.06); }
    .profile-meta__stats-cell + .profile-meta__stats-cell {
      border-top: 1px solid rgba(12, 28, 36, 0.06);
    }
  }
}

.profile-chat__head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(58,141,180,0.08), rgba(134,163,168,0.06));
}
.profile-chat__head > div { min-width: 0; flex: 1 1 auto; }
.profile-chat__kicker {
  display: block;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ember-warm); font-weight: 600;
}
.profile-chat__title {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600;
  color: var(--ink-deep);
  margin: 0.15rem 0 0;
  line-height: 1.2;
}
.profile-chat__open {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: var(--ember-warm);
  text-decoration: none;
  border: 1px solid rgba(58,141,180,0.4);
  border-radius: 5px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.profile-chat__open:hover { background: rgba(58,141,180,0.12); border-color: var(--ember); transform: translate(1px, -1px); }

.profile-chat__list {
  flex: 1; overflow-y: auto;
  padding: 0.6rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  scroll-behavior: smooth;
}
.profile-chat__empty {
  text-align: center;
  font-size: 0.85rem; color: var(--ink-mute);
  padding: 2rem 0.75rem;
  font-style: italic;
}

.pchat-msg {
  display: grid; grid-template-columns: 28px 1fr; gap: 0.55rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  position: relative;
}

/* Контролы edit/delete — появляются на hover для своих сообщений */
.pchat-msg__controls {
  position: absolute;
  top: 4px; right: 6px;
  display: inline-flex;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.pchat-msg--mine:hover .pchat-msg__controls,
.pchat-msg--editing .pchat-msg__controls {
  opacity: 1;
}
.pchat-msg__ctrl {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.pchat-msg__ctrl:hover {
  background: rgba(58,141,180,0.12);
  border-color: rgba(58,141,180,0.45);
  color: var(--ember-warm);
}
.pchat-msg__ctrl:active { transform: scale(0.92); }
.pchat-msg__ctrl--del:hover,
.pchat-msg__ctrl--report:hover {
  background: rgba(138,58,42,0.12);
  border-color: rgba(138,58,42,0.45);
  color: #8a3a2a;
}
/* «Удалить всё + бан» — самая тяжёлая кнопка: серьёзный красный знак «🚫» */
.pchat-msg__ctrl--banall { color: #8a3a2a; }
.pchat-msg__ctrl--banall:hover {
  background: rgba(138,58,42,0.18);
  border-color: rgba(138,58,42,0.7);
  color: #6e2418;
}
/* Контролы для чужих сообщений (reply/report) проявляются на hover карточки */
.pchat-msg__controls--other { opacity: 0; }
.pchat-msg:hover .pchat-msg__controls--other,
.pchat-msg__controls--other:focus-within { opacity: 1; }

/* Цитата внутри сообщения (когда это ответ на чужое) */
.pchat-msg__quote {
  margin: 0.2rem 0 0.35rem;
  padding: 0.3rem 0.5rem;
  background: rgba(58, 141, 180, 0.08);
  border-left: 2px solid rgba(58, 141, 180, 0.5);
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.35;
  word-wrap: break-word;
}
.pchat-msg__quote strong {
  color: var(--ember-warm);
  margin-right: 0.25rem;
  font-weight: 600;
}

/* Помета «жалоба отправлена» — едва заметная индикация */
.pchat-msg--reported {
  outline: 1px dashed rgba(138, 58, 42, 0.35);
  outline-offset: -1px;
}

/* Сообщение, удалённое модератором — заметная красная пометка.
   Используем compound-селектор .pchat-msg--mod-deleted.pchat-msg--deleted,
   чтобы перебить более позднее правило .pchat-msg--deleted .pchat-msg__text. */
.pchat-msg--mod-deleted .pchat-msg__text,
.pchat-msg--mod-deleted.pchat-msg--deleted .pchat-msg__text {
  color: #c14a4a;
  font-style: italic;
  font-weight: 500;
  opacity: 0.95;
}
.pchat-msg--mod-deleted,
.pchat-msg--mod-deleted.pchat-msg--deleted {
  background: rgba(193, 74, 74, 0.06);
  border-color: rgba(193, 74, 74, 0.25);
}
/* Маркер «удалено модератором» — маленький badge перед текстом */
.pchat-msg--mod-deleted .pchat-msg__text::before {
  content: '🚫 ';
  font-style: normal;
}

/* =================================================================
   Эффекты для ников. Все эффекты — на одной CSS-переменной display: inline-block,
   чтобы трансформы работали. prefers-reduced-motion отключает анимации.
   ================================================================= */
.pchat-msg__nick--pulse,
.pchat-msg__nick--wave,
.pchat-msg__nick--float,
.pchat-msg__nick--bounce,
.pchat-msg__nick--stretch {
  display: inline-block;
}

/* 1. PULSE — сердечное биение, более выразительное */
.pchat-msg__nick--pulse {
  animation: nickPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform-origin: center;
}
@keyframes nickPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  20%      { opacity: 1;   transform: scale(1.08); }
  35%      { opacity: 0.95; transform: scale(1.02); }
  55%      { opacity: 1;   transform: scale(1.06); }
}

/* 2. GLOW — пульсирующее свечение (а не статичное как раньше) */
.pchat-msg__nick--glow {
  animation: nickGlow 2.5s ease-in-out infinite;
}
@keyframes nickGlow {
  0%, 100% { text-shadow: 0 0 4px currentColor, 0 0 8px currentColor; }
  50%      { text-shadow: 0 0 8px currentColor, 0 0 18px currentColor, 0 0 28px currentColor; }
}

/* 3. WAVE — лёгкое покачивание с поворотом, «у воды» */
.pchat-msg__nick--wave {
  animation: nickWave 2.2s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes nickWave {
  0%, 100% { transform: translateY(0) rotate(0); }
  20%      { transform: translateY(-2px) rotate(-2deg); }
  40%      { transform: translateY(0)    rotate(0); }
  60%      { transform: translateY(2px)  rotate(2deg); }
  80%      { transform: translateY(0)    rotate(0); }
}

/* 4. AURORA — переливающееся сияние, как северное (заменяет shimmer).
   Палитра сдвинута в холодную сторону: тёплый янтарь убран, добавлены
   ледовый бирюзовый и пурпур-маджента — ближе к настоящему aurora. */
.pchat-msg__nick--aurora {
  background-image: linear-gradient(110deg,
    #2cb398 0%, #7c5fb7 18%, #c14a4a 36%,
    #3498db 54%, #3a6c40 72%, #2cb398 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: nickAurora 5.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(124,95,183,0.25));
}
@keyframes nickAurora {
  0%   { background-position: 0% 0; }
  100% { background-position: 260% 0; }
}

/* 5. RAINBOW — циклическая смена цвета (перебивает выбранный цвет) */
.pchat-msg__nick--rainbow {
  animation: nickRainbow 4.5s linear infinite;
}
@keyframes nickRainbow {
  0%   { color: #e74c3c; }
  16%  { color: #f39c12; }
  33%  { color: #f1c40f; }
  50%  { color: #27ae60; }
  66%  { color: #3498db; }
  83%  { color: #9b59b6; }
  100% { color: #e74c3c; }
}

/* 6. FLOAT — парение с лёгким покачиванием, как лист на воде */
.pchat-msg__nick--float {
  animation: nickFloat 3.2s ease-in-out infinite;
}
@keyframes nickFloat {
  0%, 100% { transform: translateY(0)   rotate(0); }
  33%      { transform: translateY(-3px) rotate(-1.5deg); }
  66%      { transform: translateY(2px)  rotate(1.5deg); }
}

/* 7. FIRE — мерцающее тёплое свечение, перебивает цвет на огненный */
.pchat-msg__nick--fire {
  color: #ff6b35 !important;
  animation: nickFire 0.7s ease-in-out infinite alternate;
}
@keyframes nickFire {
  0%   { text-shadow: 0 -1px 3px #ffd33d, 0 -3px 7px #ff8c42, 0 -5px 12px rgba(255,87,34,0.8); }
  100% { text-shadow: 0 -2px 5px #ffe066, 0 -4px 10px #ff9966, 0 -7px 16px #ff5722, 0 -9px 24px rgba(255,87,34,0.4); }
}

/* 8. FROST — холодное голубое свечение, перебивает цвет на ледяной */
.pchat-msg__nick--frost {
  color: #4dd0e1 !important;
  animation: nickFrost 3s ease-in-out infinite;
}
@keyframes nickFrost {
  0%, 100% { text-shadow: 0 0 4px #b3e5fc, 0 0 8px #81d4fa; }
  50%      { text-shadow: 0 0 8px #e1f5fe, 0 0 18px #4fc3f7, 0 0 28px rgba(41,182,246,0.5); }
}

/* 9. ECHO — призрачный «след» справа, расходящийся ghost (заменяет sparkle) */
.pchat-msg__nick--echo {
  animation: nickEcho 1.9s ease-in-out infinite;
}
@keyframes nickEcho {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  25%      {
    text-shadow:
      0.08em 0 0 rgba(120,120,120,0.45),
      0.18em 0 0 rgba(120,120,120,0.25),
      0.3em  0 0 rgba(120,120,120,0.10);
  }
  60%      {
    text-shadow:
      0.04em 0 0 rgba(120,120,120,0.2),
      0.1em  0 0 rgba(120,120,120,0.08);
  }
}

/* 10. STRETCH — растяжение/сжатие межбуквенного интервала */
.pchat-msg__nick--stretch {
  animation: nickStretch 2.6s ease-in-out infinite;
}
@keyframes nickStretch {
  0%, 100% { letter-spacing: 0.01em; }
  50%      { letter-spacing: 0.22em; }
}

/* 11. BOUNCE — энергичный прыжок */
.pchat-msg__nick--bounce {
  animation: nickBounce 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes nickBounce {
  0%,100%  { transform: translateY(0); }
  20%      { transform: translateY(-5px); }
  35%      { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
  65%      { transform: translateY(0); }
}

/* 12. NEON — яркое многослойное свечение с мерцанием яркости */
.pchat-msg__nick--neon {
  text-shadow:
    0 0 2px #fff,
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 18px currentColor;
  animation: nickNeon 3s ease-in-out infinite;
}
@keyframes nickNeon {
  0%,100% { filter: brightness(1)   saturate(1); }
  43%     { filter: brightness(1.3) saturate(1.2); }
  47%     { filter: brightness(0.7) saturate(0.8); }
  50%     { filter: brightness(1.4) saturate(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .pchat-msg__nick--pulse,
  .pchat-msg__nick--glow,
  .pchat-msg__nick--wave,
  .pchat-msg__nick--aurora,
  .pchat-msg__nick--rainbow,
  .pchat-msg__nick--float,
  .pchat-msg__nick--fire,
  .pchat-msg__nick--frost,
  .pchat-msg__nick--echo,
  .pchat-msg__nick--stretch,
  .pchat-msg__nick--bounce,
  .pchat-msg__nick--neon { animation: none !important; }
}

/* ============== Виджет «Уровень» в профиле ============== */
.profile-level {
  background: rgba(58,141,180,0.06);
  border-left: 3px solid var(--ember);
  border-radius: 0 6px 6px 0;
  padding: 0.65rem 0.85rem;
  margin: 0.4rem 0 0.6rem;
}
.profile-level__head {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 0.35rem;
}
.profile-level__num { color: var(--ink-mute); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.profile-level__role { color: var(--ember-warm); font-size: 0.88rem; font-family: var(--font-display); }
.profile-level__role--admin     { color: #c14a4a; }
.profile-level__role--moderator { color: #7c5fb7; }
.profile-level__role--local     { color: #3a6c40; }

.profile-level__links {
  list-style: none; padding: 0; margin: 0.3rem 0 0;
  font-size: 0.8rem;
}
.profile-level__links li { padding: 0.15rem 0; }
.profile-level__links a {
  color: var(--ember-warm); text-decoration: none;
  border-bottom: 1px dotted rgba(58,141,180,0.4);
}
.profile-level__links a:hover { color: var(--ember); }

.profile-level__row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.78rem;
  position: relative;
  flex-wrap: wrap;                /* палитра уходит на новую строку */
}
.profile-level__label {
  color: var(--ink-mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.profile-level__swatch {
  width: 22px; height: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  position: relative;
}
.profile-level__swatch:empty[style*="transparent"]::before {
  content: '∅';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 12px;
}
/* Селект «Эффект» — единый язык с выбором деревни:
   прозрачный фон, ember-полоска снизу, без outline и рамки. */
.profile-level__select {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 1.1em 0.2rem 0.2rem;   /* место под нативную стрелку */
  border: 0;
  border-bottom: 1.5px solid var(--ember);
  border-radius: 0;
  background: transparent;
  color: var(--ink-deep);
  outline: none;
  box-shadow: none;
}
.profile-level__select:focus,
.profile-level__select:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom: 1.5px solid var(--ember);
}
/* Палитра — в потоке (расталкивает блок вниз), скрыта по умолчанию через [hidden]. */
.profile-palette {
  flex-basis: 100%;               /* занимает всю ширину строки */
  width: 100%;
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(8, 18px);
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}
.profile-palette[hidden] { display: none; }   /* перебивает display: grid */

/* Полноценный HSV color-picker (как в Photoshop) */
.cpicker {
  flex-basis: 100%;
  width: 100%;
  max-width: 220px;
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 8px;
  --cp-hue: 0;
}
.cpicker[hidden] { display: none; }

/* SV-квадрат: насыщенность × яркость, окрашен текущим hue */
.cpicker__sv {
  position: relative;
  width: 100%; height: 130px;
  border-radius: 4px;
  cursor: crosshair;
  background:
    linear-gradient(to top,    #000, rgba(0,0,0,0)),
    linear-gradient(to right,  #fff, hsl(var(--cp-hue), 100%, 50%));
  user-select: none;
  touch-action: none;
}
.cpicker__sv-cursor {
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  top: 0; left: 100%;
}
/* Hue-полоса: радуга */
.cpicker__hue {
  position: relative;
  width: 100%; height: 12px;
  border-radius: 3px;
  background: linear-gradient(to right,
    #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%,
    #00f 66.66%, #f0f 83.33%, #f00 100%);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.cpicker__hue-cursor {
  position: absolute;
  top: -2px; left: 0;
  width: 5px; height: 16px;
  background: transparent;
  border: 1.5px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55);
  transform: translateX(-50%);
  pointer-events: none;
}

.cpicker__row {
  display: flex; gap: 6px; align-items: center;
}
.cpicker__preview {
  width: 22px; height: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: #000;
  flex-shrink: 0;
}
.cpicker__hex {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  text-transform: uppercase;
  outline: none;
}
.cpicker__hex:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 2px rgba(58,141,180,0.18);
}
.cpicker__clear, .cpicker__ok {
  width: 24px; height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem; line-height: 1;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cpicker__clear { color: var(--ink-mute); }
.cpicker__clear:hover { background: rgba(138,58,42,0.10); color: #8a3a2a; border-color: rgba(138,58,42,0.4); }
.cpicker__ok { color: #3a6c40; border-color: rgba(74,108,79,0.4); }
.cpicker__ok:hover { background: rgba(74,108,79,0.12); border-color: #4a6c4f; }
.profile-palette__chip {
  width: 18px; height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  transition: transform 0.1s;
}
.profile-palette__chip:hover { transform: scale(1.15); }
.profile-palette__chip--off {
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 12px; line-height: 1;
}
.profile-level__hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
}
.profile-level__hint a {
  color: var(--ember-warm); text-decoration: none;
  border-bottom: 1px dotted rgba(58,141,180,0.4);
}
.profile-level__hint a:hover { color: var(--ember); }
.pchat-msg__ctrl--ok {
  background: #fff;
  border-color: rgba(74,108,79,0.5);
  color: #3a6c40;
}
.pchat-msg__ctrl--ok:hover { background: rgba(74,108,79,0.12); border-color: #4a6c4f; }
.pchat-msg__ctrl--cancel {
  background: #fff;
  border-color: rgba(138,58,42,0.5);
  color: #8a3a2a;
}
.pchat-msg__ctrl--cancel:hover { background: rgba(138,58,42,0.12); border-color: #8a3a2a; }

/* Карандаш-редактирование показывается ТОЛЬКО на последнем своём (--editable) */
.pchat-msg--mine .pchat-msg__ctrl[data-act="edit"] { display: none; }
.pchat-msg--editable .pchat-msg__ctrl[data-act="edit"] { display: inline-flex; }

/* Удалённое сообщение — «надгробие» в приглушённом стиле */
.pchat-msg--deleted .pchat-msg__text {
  color: var(--ink-mute);
  font-style: italic;
  opacity: 0.7;
}
.pchat-msg--deleted .pchat-msg__photo-link,
.pchat-msg--deleted .pchat-msg__controls { display: none; }

/* Inline-textarea при редактировании */
.pchat-msg__edit-input {
  width: 100%;
  font-family: inherit; font-size: 0.86rem; line-height: 1.4;
  color: var(--ink-deep);
  background: #fff;
  border: 1px solid var(--ember);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  outline: none;
  resize: none;
  min-height: 36px;
  box-shadow: 0 0 0 3px rgba(58,141,180,0.15);
  margin-bottom: 0.35rem;
}
.pchat-msg__edit-actions {
  display: inline-flex; gap: 0.3rem;
  margin-top: 0.1rem;
}

/* Помета «(изм.)» после отредактированного сообщения */
.pchat-msg__edited {
  font-size: 0.7rem;
  color: var(--ink-mute);
  margin-left: 0.3rem;
  cursor: help;
}

/* Сообщение «выплывает» в чат — лёгкая волна с overshoot, как кораблик на гребне волны */
@keyframes pchatMsgSailIn {
  0%   { opacity: 0; transform: translateY(34px) scale(0.94) rotate(-0.6deg); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.012) rotate(0.4deg); }
  78%  {              transform: translateY(2px)  scale(0.998) rotate(-0.2deg); }
  100% { opacity: 1; transform: translateY(0)    scale(1)      rotate(0); }
}
.pchat-msg--sailing {
  animation: pchatMsgSailIn 0.85s cubic-bezier(0.34, 1.3, 0.5, 1) both;
  /* Лёгкий «след» от плывущего кораблика — тонкая ember-полоска снизу,
     которая тает за время анимации */
  position: relative;
  box-shadow: 0 4px 14px -8px rgba(58, 141, 180, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .pchat-msg--sailing { animation: none; box-shadow: none; }
}
.pchat-msg--mine {
  background: rgba(58,141,180,0.10);
  border-color: rgba(58,141,180,0.3);
}
.pchat-msg__avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: var(--river); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  flex-shrink: 0;
}
.pchat-msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pchat-msg__head {
  display: flex; gap: 0.5rem; align-items: baseline;
  margin-bottom: 0.15rem;
}
.pchat-msg__nick {
  font-weight: 600; color: var(--ink-deep);
  font-size: 0.82rem;
  position: relative;
}
/* Тултип над ником: «Ванакюля (рег. 4 дня назад)» */
.pchat-msg__nick[data-tip] {
  cursor: help;
  border-bottom: 1px dotted rgba(58,141,180,0.45);
}
.pchat-msg__nick[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  padding: 0.35rem 0.6rem;
  background: var(--ink-deep);
  color: var(--paper);
  font-size: 0.72rem; font-weight: 500;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(2px);
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  z-index: 20;
  letter-spacing: 0.01em;
}
.pchat-msg__nick[data-tip]::before {
  /* маленький треугольник-«хвостик» под плашкой */
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 14px;
  border: 5px solid transparent;
  border-top-color: var(--ink-deep);
  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 20;
}
.pchat-msg__nick[data-tip]:hover::after,
.pchat-msg__nick[data-tip]:focus::after {
  opacity: 1; transform: translateY(0);
}
.pchat-msg__nick[data-tip]:hover::before,
.pchat-msg__nick[data-tip]:focus::before {
  opacity: 1;
}
.pchat-msg__time {
  font-size: 0.7rem; color: var(--ink-mute);
}
.pchat-msg__text {
  margin: 0; color: var(--ink-soft);
  font-size: 0.85rem;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.pchat-msg__photo-link {
  display: block;
  margin-top: 0.4rem;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.4);
  max-width: 280px;
  transition: transform 0.15s, border-color 0.15s;
}
.pchat-msg__photo-link:hover { transform: scale(1.01); border-color: var(--ember); }
.pchat-msg__photo {
  display: block; width: 100%; height: auto;
  max-height: 220px; object-fit: cover;
}

/* Composer чата в профиле: скрепка + textarea + кнопка-самолётик */
.pchat-composer {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.55rem 0.7rem 0.65rem;
  border-top: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.5);
}
/* Quote-преамбула «ответ на …» — над composer */
.pchat-composer__quote {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: rgba(58, 141, 180, 0.10);
  border-left: 2px solid var(--ember);
  border-radius: 0 6px 6px 0;
  font-size: 0.78rem;
  line-height: 1.3;
}
/* HTML-атрибут [hidden] перебивается display: flex выше; восстанавливаем приоритет */
.pchat-composer__quote[hidden] { display: none; }
.pchat-composer__preview[hidden] { display: none; }
.pchat-composer__quote-body {
  flex: 1; min-width: 0;
  overflow: hidden;
}
.pchat-composer__quote-nick {
  color: var(--ember-warm);
  margin-right: 0.3rem;
}
.pchat-composer__quote-text {
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}
.pchat-composer__quote-clear {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0; border-radius: 4px;
  color: var(--ink-mute);
  cursor: pointer; padding: 0;
  font-size: 1rem; line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.pchat-composer__quote-clear:hover {
  background: rgba(138,58,42,0.10);
  color: #8a3a2a;
}

/* Превью прикреплённой фотографии */
.pchat-composer__preview {
  position: relative;
  width: max-content; max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ember);
  background: rgba(255,255,255,0.7);
}
.pchat-composer__preview img {
  display: block;
  max-width: 160px; max-height: 100px;
  object-fit: cover;
}
.pchat-composer__preview-clear {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: rgba(12,28,36,0.72);
  color: #fff; cursor: pointer;
  font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.pchat-composer__preview-clear:hover { background: rgba(138,58,42,0.85); }

/* «Telegram-pill»: единый контейнер вокруг attach + textarea + send.
   Никаких отдельных рамок — всё внутри одной мягкой капсулы. */
.pchat-composer__row {
  display: flex; align-items: flex-end;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 4px 6px 4px 4px;
  box-shadow: 0 1px 2px rgba(12,28,36,0.04), 0 2px 8px rgba(12,28,36,0.04);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.pchat-composer__row:focus-within {
  border-color: var(--ember);
  box-shadow:
    0 0 0 3px rgba(58,141,180,0.14),
    0 1px 2px rgba(12,28,36,0.05),
    0 4px 14px rgba(58,141,180,0.08);
}
.pchat-composer__attach {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.1s;
}
.pchat-composer__attach:hover {
  color: var(--ember-warm);
  background: rgba(58,141,180,0.10);
}
.pchat-composer__attach:active { transform: scale(0.92); }
.pchat-composer__attach svg { transform: rotate(-30deg); width: 18px; height: 18px; }

/* Textarea — без своих рамок и фона; растёт по высоте до 140px.
   Шрифт чуть крупнее, чем был, дыхание как в Telegram. */
.pchat-composer__text {
  flex: 1; min-width: 0;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-deep);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.5rem 0.55rem 0.5rem 0.35rem;
  resize: none;
  max-height: 140px;
  outline: none;
  box-shadow: none;
  /* тонкая полоска-скролл, когда переросло max-height */
  scrollbar-width: thin;
  scrollbar-color: rgba(12,28,36,0.18) transparent;
}
.pchat-composer__text::placeholder {
  color: var(--ink-mute);
  opacity: 0.75;
}
.pchat-composer__text:focus { outline: none; box-shadow: none; }
.pchat-composer__text::-webkit-scrollbar { width: 6px; }
.pchat-composer__text::-webkit-scrollbar-thumb {
  background: rgba(12,28,36,0.18);
  border-radius: 3px;
}
/* ===== Эмодзи-кнопка в profile composer =====
   Поведение:
     - пока поле пустое, эмодзи стоит на МЕСТЕ кнопки «отправить» (правый край),
       благодаря transform: translateX( + ширина send + gap ).
     - как только появляется первый символ, send становится видимым справа,
       а эмодзи едет в своё «настоящее» место (translateX 0).
*/
.pchat-composer__emoji {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-mute);
  border: 0; border-radius: 50%;
  cursor: pointer; padding: 0; margin-right: 4px;
  flex-shrink: 0;
  /* +40px = ширина send (36px) + gap (4px). Пока поля пусто — эмодзи на месте send. */
  transform: translateX(40px);
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s, background 0.15s;
}
.pchat-composer__emoji:hover { color: var(--ember-warm); background: rgba(58, 141, 180, 0.10); }
.pchat-composer__emoji.is-active { color: var(--ember-warm); background: rgba(58, 141, 180, 0.16); }
/* Появился первый символ → send всплыл, эмодзи отъезжает влево в свой слот. */
.pchat-composer.is-typing .pchat-composer__emoji { transform: translateX(0); }

/* Popup со смайликами над composer */
.pchat-composer__emoji-pop {
  position: absolute;
  right: 50px; bottom: 100%; margin-bottom: 8px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
  padding: 0.5rem;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.3rem;
  width: 320px; max-width: calc(100vw - 2rem);
  box-sizing: border-box; z-index: 30;
}
.pchat-composer__emoji-pop[hidden] { display: none; }
.pchat-composer__emoji-pop button {
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.25rem; padding: 0.25rem 0; border-radius: var(--radius-sm);
  min-width: 0; line-height: 1; text-align: center;
}
.pchat-composer__emoji-pop button:hover { background: rgba(58, 141, 180, 0.15); }
/* Composer row нужно для абсолютного позиционирования popup */
.pchat-composer__row { position: relative; }

/* ===== Лайк-сердечко на pchat-msg — позиция справа внизу ===== */
.pchat-msg__body { position: relative; padding-right: 2.6rem; }
.pchat-msg__like {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.15rem 0.4rem 0.15rem 0.32rem;
  border-radius: 999px; background: transparent; border: 0;
  color: #9aa6ad; font-size: 0.78rem; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.15s;
}
.pchat-msg__like svg { fill: currentColor; transition: transform 0.22s; }
.pchat-msg__like-count { font-variant-numeric: tabular-nums; }
.pchat-msg__like:not(.has-likes) { color: #9aa6ad; }
/* Цифру "0" не рендерим — только иконку */
.pchat-msg__like:not(.has-likes) .pchat-msg__like-count { display: none; }

/* Read-only сердце на своих сообщениях профильного чата */
.pchat-msg__like--ro { cursor: default; pointer-events: none; color: #e63946; }
.pchat-msg__like--ro:hover svg { animation: none; }
.pchat-msg__like.has-likes { color: #e63946; }
.pchat-msg__like.is-mine { color: #c91e2c; }
.pchat-msg__like.is-mine svg { filter: drop-shadow(0 1px 2px rgba(201, 30, 44, 0.35)); }
.pchat-msg__like:hover { color: #a01525; background: rgba(160, 21, 37, 0.08); }
.pchat-msg__like:hover svg { animation: heartBeat 0.85s ease-in-out infinite; }
.pchat-msg__like.is-popping svg { animation: heartPop 0.32s cubic-bezier(.2, .8, .2, 1.2) 1; }
.pchat-msg__like.is-busy { opacity: 0.6; pointer-events: none; }

/* Кнопка-отправка с бумажным корабликом.
   Спрятана, пока в поле нет текста; при первом символе — мягко всплывает
   с лёгким overshoot, внутри по очереди «складывается» кораблик. */
.pchat-composer__send {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--river); color: var(--paper);
  border: 0; border-radius: 50%;     /* круглая, в духе Telegram */
  cursor: pointer; padding: 0;
  flex-shrink: 0;
  overflow: visible;         /* кораблик отплывает В ЧАТ — за пределы кнопки */
  opacity: 0;
  transform: scale(0.4) translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.15s;
}
/* Бумажный кораблик внутри кнопки — z-index выше «таблетки»,
   чтобы при отплытии он плыл поверх textarea/attach */
.pchat-composer__send .boat-svg { position: relative; z-index: 2; }
.pchat-composer.is-typing .pchat-composer__send,
.pchat-composer__send.is-sending {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
/* Пока кораблик плывёт — не сжимаем кнопку обратно, даже если поле уже очищено */
.pchat-composer__send.is-sending { transition: background 0.15s; }
.pchat-composer__send:hover:not(:disabled) { background: var(--ember-warm); }
.pchat-composer__send:active:not(:disabled) { transform: scale(0.94); }
.pchat-composer__send:disabled { cursor: default; }

/* ---- Бумажный кораблик: пошаговый «фолдинг» ---- */
.boat-svg .boat__water {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  opacity: 0.7;
}
.boat-svg .boat__hull {
  transform-origin: 12px 19px;
  transform: scaleY(0);
}
.boat-svg .boat__mast {
  transform-origin: 12px 14px;
  transform: scaleY(0);
}
.boat-svg .boat__sail {
  transform-origin: 12px 14px;
  transform: scale(0) rotate(-6deg);
  opacity: 0;
}
/* Когда composer в .is-typing — кораблик складывается из пустоты по слоям:
   вода → корпус → мачта → парус. Лёгкая задержка делает чувство «делается на глазах». */
.pchat-composer.is-typing .boat-svg .boat__water,
.boat-svg.is-folding .boat__water {
  animation: boatDrawWater 0.35s ease-out 0s forwards;
}
.pchat-composer.is-typing .boat-svg .boat__hull,
.boat-svg.is-folding .boat__hull {
  animation: boatFoldHull 0.4s cubic-bezier(0.4, 1.4, 0.5, 1) 0.10s forwards;
}
.pchat-composer.is-typing .boat-svg .boat__mast,
.boat-svg.is-folding .boat__mast {
  animation: boatRaiseMast 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s forwards;
}
.pchat-composer.is-typing .boat-svg .boat__sail,
.boat-svg.is-folding .boat__sail {
  animation: boatUnfurlSail 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.62s forwards;
}
@keyframes boatDrawWater { to { stroke-dashoffset: 0; } }
@keyframes boatFoldHull  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes boatRaiseMast { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes boatUnfurlSail{
  0%   { transform: scale(0) rotate(-6deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Отплытие при отправке: кораблик уезжает вверх-вправо в чат, удаляясь и тая.
   Длительность 0.5s синхронизована с BOAT_FLIGHT_MS в profile.js — на нём
   снимаются is-sending и is-folding, чтобы не было «возврата домой». */
.pchat-composer__send.is-sending .boat-svg {
  animation: boatSailAway 0.5s cubic-bezier(0.4, 0.05, 0.55, 1) forwards;
}
@keyframes boatSailAway {
  0%   { transform: translate(0, 0) rotate(0) scale(1);     opacity: 1; }
  30%  { transform: translate(3px, -10px) rotate(5deg) scale(0.95); opacity: 0.95; }
  60%  { transform: translate(8px, -26px) rotate(10deg) scale(0.8); opacity: 0.65; }
  100% { transform: translate(16px, -52px) rotate(16deg) scale(0.5); opacity: 0; }
}
/* Лёгкая «волна-всплеск» из кнопки при отправке */
.pchat-composer__send.is-sending::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(58, 141, 180, 0.45);
  animation: sendSplash 0.6s ease-out;
  pointer-events: none;
}
.pchat-composer__send { position: relative; }
@keyframes sendSplash {
  0%   { box-shadow: 0 0 0 0 rgba(58, 141, 180, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(58, 141, 180, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pchat-composer__send { transition: opacity 0.15s, background 0.15s; transform: none; }
  .pchat-composer.is-typing .pchat-composer__send { transform: none; }
  .boat-svg * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .pchat-composer__send.is-sending .boat-svg { animation: none; }
  .pchat-composer__send.is-sending::before { animation: none; }
}

/* Notice / alerts */
.notice {
  padding: 1rem 1.25rem; border-radius: var(--radius-md); border-left: 4px solid var(--ember);
  background: rgba(58, 141, 180, 0.08); color: var(--ink-soft); margin: 1rem 0;
}
.notice.is-error { border-left-color: var(--rust); background: rgba(138, 58, 42, 0.08); }
.notice.is-success { border-left-color: var(--moss); background: rgba(74, 108, 79, 0.08); }


/* ---------- River: эпиграф + longread с тематическими иконками ---------- */

/* Lead как эпиграф — заметнее, располагает к чтению. Растягивается на всю ширину контейнера. */
.river-epigraph {
  margin: 1.25rem 0 2.5rem;
  padding: 1.4rem 1.6rem 1.4rem 1.8rem;
  background: linear-gradient(135deg, var(--paper-warm) 0%, rgba(255, 255, 255, 0.55) 100%);
  border-left: 4px solid var(--ember);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}
.river-epigraph::before {
  /* большая декоративная кавычка-каплюшка */
  content: '“';
  position: absolute; top: -8px; left: 8px;
  font-family: var(--font-accent);
  font-size: 4.5rem; line-height: 1;
  color: var(--ember-glow); opacity: 0.5;
  pointer-events: none;
}
.river-epigraph p {
  margin: 0; position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 1.22rem; line-height: 1.55;
  color: var(--ink-deep); font-weight: 400;
}

/* Longread: три параграфа, у каждого тематическая иконка слева */
.river-longread {
  display: grid; gap: 0.5rem;
  margin: 0 0 3rem;
}
.river-passage {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem;
  padding: 1.4rem 0;
  border-bottom: 1px dashed var(--mist);
  align-items: start;
}
.river-passage:first-child { padding-top: 0.4rem; }
.river-passage:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .river-passage { grid-template-columns: 56px 1fr; gap: 1.4rem; }
}
.river-passage__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(58, 141, 180, 0.10);
  color: var(--ember);
  border: 1px solid rgba(58, 141, 180, 0.20);
  transition: background 0.3s, transform 0.3s;
}
.river-passage:hover .river-passage__icon {
  background: rgba(58, 141, 180, 0.18);
  transform: scale(1.05);
}
.river-passage__icon svg { width: 30px; height: 30px; display: block; }
.river-passage__text {
  margin: 0;
  font-size: 1.05rem; line-height: 1.78;
  color: var(--ink-soft);
}

.twoway {
  margin-top: 3rem; padding: 1.75rem 2rem;
  background: linear-gradient(135deg, rgba(58,141,180,0.08), rgba(134,163,168,0.08));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  display: grid; gap: 1.25rem;
}
.twoway__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  color: var(--river); margin: 0;
}
/* Двухколоночный body: SVG-схема слева, текст справа */
.twoway__body {
  display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 720px) {
  .twoway__body { grid-template-columns: minmax(280px, 380px) 1fr; gap: 2rem; }
}
.twoway__figure {
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}
.twoway__figure svg { width: 100%; height: auto; display: block; }
.twoway__copy { display: flex; flex-direction: column; gap: 0.85rem; }
.twoway__text { color: var(--ink-soft); margin: 0; line-height: 1.7; max-width: 64ch; }

/* Нижняя иллюстрация Луга↔Нарова — на всю ширину блока, с сезонными метками */
.twoway__diagram {
  display: flex; align-items: center; gap: 0.85rem;
  padding-top: 1.25rem; border-top: 1px dashed var(--mist);
  width: 100%;
}
.twoway__label {
  display: inline-flex; align-items: center; padding: 0.4rem 0.85rem;
  background: var(--river); color: var(--paper); border-radius: 999px;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 500;
  flex-shrink: 0;
}
.twoway__river {
  flex: 1;
  width: 100%;
  height: 60px;
  display: block;
  opacity: 0.95;
}
.twoway__note {
  font-size: 0.86rem; color: var(--ink-mute);
  font-style: italic; line-height: 1.55;
  margin: 0.5rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--ember-glow);
  max-width: 72ch;
}

/* ---------- Мертвица: переиспользуем стили river-* и слегка корректируем под paper-warm фон ---------- */
.tributary-epigraph {
  /* Раздел идёт на paper-warm — берём контрастный градиент в сторону светлого */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, var(--paper) 100%);
}
.tributary-longread { margin-bottom: 2.5rem; }
/* 4 карточки фактов: на широких экранах в один ряд, иначе 2×2 */
.facts-primary.tributary-facts { margin-top: 0.5rem; }
/* 4 факта Мертвицы — на широких в один ряд, поверх правила repeat(3, 1fr) у .facts-primary */
@media (min-width: 980px) {
  .facts-primary.tributary-facts { grid-template-columns: repeat(4, 1fr); }
}
/* Иконка темы внутри river-passage на тёплой бумаге читается лучше с более насыщенным янтарём */
.tributary-longread .river-passage__icon {
  background: rgba(58, 141, 180, 0.13);
}

/* Smaller fact grid for tributary */
.facts--small {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.facts--small .fact { padding: 1.25rem; }
.facts--small .fact__value { font-size: 1.4rem; }

/* Tributary section */
.tributary {
  display: grid; gap: 2rem; margin-top: 2rem;
}
@media (min-width: 900px) {
  .tributary { grid-template-columns: 1fr 1.2fr; align-items: start; }
}
.tributary__story {
  font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft);
  display: grid; gap: 1.25rem;
}
.tributary__story p { margin: 0; }
.tributary__note {
  background: rgba(255,255,255,0.5); padding: 1rem 1.25rem;
  border-left: 3px solid var(--ember); border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
}
.tributary__note strong { color: var(--ember-warm); }


/* ---------- Двухуровневая иерархия фактов ---------- */
.facts-primary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem;
  margin: 0 0 1.5rem;
}
/* На широких экранах 6 карточек ложатся в 3 ряда по 2 (или 2 ряда по 3) */
@media (min-width: 980px) {
  .facts-primary { grid-template-columns: repeat(3, 1fr); }
}
/* Вторичные факты — теперь карточки в одном стиле с primary, чуть компактнее. */
.facts-secondary {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.fact-row {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--river-glow);
  border-radius: var(--radius-md);
  transition: transform 0.25s var(--easing), border-left-color 0.25s, box-shadow 0.25s;
}
.fact-row:hover {
  transform: translateY(-2px);
  border-left-color: var(--ember);
  box-shadow: var(--shadow-soft);
}
.fact-row__label {
  color: var(--ink-mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.fact-row__value {
  color: var(--ink-deep); font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.25rem; line-height: 1.2;
}
.fact-row__note {
  color: var(--ink-mute); font-size: 0.82rem; line-height: 1.45;
}

/* Inline-капча в форме контакта (компактная) */
.captcha-row {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--ink-soft);
  /* Подсказка пользователю, что текст «не скопируется» — курсор-знак-вопрос. */
  cursor: help;
  /* Visual hint: текст-вопрос нельзя выделить мышью, но *оформление* выделения мы оставим — пусть подсветится,
     а на copy перехватим в JS. Это даёт сигнал «что-то странное» вместо мгновенного «не выделяется». */
  user-select: text;
}
.captcha-row__label {
  /* Подпись «Подтвердите, что вам больше 14 лет →» — обычный текст. */
  letter-spacing: 0.01em;
}
.captcha-row__question {
  /* Само уравнение — крупнее и контрастнее. */
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--river);
}
.captcha-row__input {
  width: 80px;
  height: 36px;
  padding: 0 0.6rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-soft);
  border-radius: 0;                                      /* строго: без скруглений */
  font: inherit;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.captcha-row__input:focus {
  border-color: var(--ember); outline: 0; box-shadow: 0 0 0 2px rgba(58, 141, 180, 0.22);
  background: var(--paper);
}

/* ==========================================================================
   Cyber-bridge — полоса-переход на reka.ee между «Соседями реки» и Кургальским.
   Намеренно резкая киберпанк-палитра: глубокий navy фон, неоновый cyan и magenta,
   scan-lines, RGB-glitch на заголовке. Контраст со всеми остальными секциями —
   как визуальный «портал» в другой стиль.
   ========================================================================== */
.cyber-bridge {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: #0a0e1f;
  color: #e8f4ff;
  isolation: isolate;
}
/* Тонкая верхняя и нижняя neon-полоска — как «технические шины» */
.cyber-bridge::before,
.cyber-bridge::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #ff2bd1 25%,
    #00f0ff 50%,
    #ff2bd1 75%,
    transparent 100%);
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
  z-index: 2;
}
.cyber-bridge::before { top: 0; }
.cyber-bridge::after  { bottom: 0; }

/* Слой фона: сетка + scanlines + два радиальных свечения */
.cyber-bridge__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cyber-bridge__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 240, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 90%);
}
.cyber-bridge__scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  opacity: 0.55;
  pointer-events: none;
  animation: cyberScan 8s linear infinite;
}
@keyframes cyberScan {
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}
.cyber-bridge__glow {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}
.cyber-bridge__glow--magenta {
  top: -120px; left: 8%;
  background: #ff2bd1;
}
.cyber-bridge__glow--cyan {
  bottom: -120px; right: 8%;
  background: #00f0ff;
}

/* Контент-инсайд */
.cyber-bridge__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cyber-bridge__tag {
  display: inline-block;
  margin: 0 0 0.6rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.82rem;
  color: #00f0ff;
  letter-spacing: 0.18em;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
}

/* Glitch-заголовок: основной + два RGB-сдвинутых псевдо-слоя через data-text */
.cyber-bridge__title {
  position: relative;
  display: inline-block;
  margin: 0 0 0.8rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow:
    0 0 12px rgba(255, 43, 209, 0.45),
    0 0 24px rgba(0, 240, 255, 0.3);
}
.cyber-bridge__title::before,
.cyber-bridge__title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.cyber-bridge__title::before {
  color: #ff2bd1;
  transform: translate(-2px, 0);
  animation: cyberGlitchX 4s steps(1) infinite;
}
.cyber-bridge__title::after {
  color: #00f0ff;
  transform: translate(2px, 0);
  animation: cyberGlitchY 4.5s steps(1) infinite;
}
@keyframes cyberGlitchX {
  0%, 92%, 100% { transform: translate(-2px, 0); }
  93% { transform: translate(-4px, -1px); }
  95% { transform: translate(1px, 1px); }
  97% { transform: translate(-2px, 0); }
}
@keyframes cyberGlitchY {
  0%, 90%, 100% { transform: translate(2px, 0); }
  91% { transform: translate(4px, 1px); }
  94% { transform: translate(-1px, -1px); }
  96% { transform: translate(2px, 0); }
}

.cyber-bridge__lead {
  margin: 0 auto 1.4rem;
  max-width: 56ch;
  font-family: 'Manrope', sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #d2e0f0;                     /* A11y: solid вместо rgba(0.78), стабильно 12:1 на любом моменте glow-анимации */
}

/* CTA-кнопка: «терминальный prompt» — neon-cyan рамка с обрезанными углами
   (clip-path), магента glow на hover, мигающий курсор справа. */
.cyber-bridge__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.05);
  text-decoration: none;
  border: 1px solid #00f0ff;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px
  );
  box-shadow:
    0 0 12px rgba(0, 240, 255, 0.35),
    inset 0 0 12px rgba(0, 240, 255, 0.08);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
  transition: all 0.22s var(--easing);
  position: relative;
}
.cyber-bridge__cta-arrow {
  color: #ff2bd1;
  font-size: 0.85em;
  text-shadow: 0 0 8px rgba(255, 43, 209, 0.7);
}
.cyber-bridge__cta-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.25em;
  background: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.65);
  animation: cyberBlink 1.1s steps(2) infinite;
}
@keyframes cyberBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.cyber-bridge__cta:hover {
  color: #fff;
  background: rgba(255, 43, 209, 0.12);
  border-color: #ff2bd1;
  box-shadow:
    0 0 22px rgba(255, 43, 209, 0.55),
    0 0 60px rgba(255, 43, 209, 0.25),
    inset 0 0 14px rgba(255, 43, 209, 0.18);
  text-shadow: 0 0 10px rgba(255, 43, 209, 0.7);
  transform: translateY(-1px);
}
.cyber-bridge__cta:hover .cyber-bridge__cta-arrow {
  color: #00f0ff;
}
.cyber-bridge__cta:focus-visible {
  outline: 2px solid #ff2bd1;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cyber-bridge__scanlines,
  .cyber-bridge__title::before,
  .cyber-bridge__title::after,
  .cyber-bridge__cta-cursor { animation: none; }
}

/* ============================================
   Кнопка-CTA «Написать редакции» — пульсирующая, прозрачная, с белой рамкой,
   block-level под параграфом credits, фиксированная ширина 250px, без радиусов.
   ============================================ */
.cta-pulse {
  display: flex; align-items: center; justify-content: center;
  margin-top: 1.5rem;
  width: 250px; max-width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  color: var(--paper);
  border: 1.5px solid rgba(247, 253, 253, 0.65);
  border-radius: 0;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  transition: background 0.3s var(--easing), border-color 0.3s, color 0.2s, transform 0.2s;
  animation: cta-pulse-glow 3.2s ease-in-out infinite;
}
.cta-pulse:hover {
  background: rgba(247, 253, 253, 0.10);
  border-color: var(--paper);
  color: #fff;
  transform: translateY(-1px);
}
.cta-pulse:focus-visible {
  outline: 2px solid var(--ember-glow); outline-offset: 3px;
}
.cta-pulse[aria-expanded="true"] {
  /* Когда форма раскрыта, кнопка приглушается */
  opacity: 0.6;
  animation: none;
  border-color: rgba(247, 253, 253, 0.3);
}
@keyframes cta-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(247, 253, 253, 0.25),
                0 0 0 0 rgba(58, 141, 180, 0);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(247, 253, 253, 0),
                0 0 28px rgba(58, 141, 180, 0.20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-pulse { animation: none; }
}


/* ============================================
   Иконки в карточках главных фактов
   ============================================ */
.facts-primary .fact { padding-top: 1.4rem; position: relative; }
.fact__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: var(--ember-warm);
  margin-bottom: 0.5rem;
}
.fact__icon svg { width: 100%; height: 100%; }

/* ============================================
   Инициал деревни (каллиграфический)
   ============================================ */
.village__initial {
  display: block;
  width: 64px; height: 64px;
  margin: -0.25rem 0 0.5rem;
  opacity: 0.92;
  transition: transform 0.4s var(--easing);
}
.village__initial svg { width: 100%; height: 100%; }
.village:hover .village__initial { transform: rotate(-3deg) scale(1.05); }

/* ============================================
   Топонимика — «Имена воды»
   ============================================ */
.toponymy {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem; margin-top: 2.5rem;
}
.toponym {
  padding: 1.5rem 1.75rem;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  position: relative;
  transition: transform 0.3s var(--easing), border-color 0.3s;
}
.toponym:hover { transform: translateY(-2px); border-color: var(--ember); }
.toponym__name {
  font-family: var(--font-accent); font-weight: 400;
  font-size: 1.85rem; color: var(--river);
  margin: 0 0 0.25rem;
  line-height: 1.05;
}
.toponym__origin {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ember-warm); margin: 0 0 0.85rem; font-weight: 600;
}
.toponym__meaning {
  color: var(--ink-soft); margin: 0; line-height: 1.65;
}

/* ============================================
   Соседи — Кузёмкинский ряд и сёла на Мертвице
   ============================================ */
.neighbors {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.neighbor {
  position: relative;
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--river-glow);
  border-radius: var(--radius-md);
  transition: transform 0.25s var(--easing), border-left-color 0.25s, box-shadow 0.25s;
}
.neighbor:hover {
  transform: translateY(-2px);
  border-left-color: var(--ember);
  box-shadow: var(--shadow-soft);
}
.neighbor__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; color: var(--ink-deep);
  margin: 0 0 0.15rem;
  line-height: 1.25;
}
.neighbor__where {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ember-warm); margin: 0 0 0.6rem; font-weight: 600;
}
.neighbor__note {
  color: var(--ink-soft); margin: 0; font-size: 0.92rem; line-height: 1.55;
}

/* ============================================
   Минимап «Вы здесь» — плавающий справа
   ============================================ */
.minimap {
  position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%);
  z-index: 30;
  background: rgba(219, 242, 244, 0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.75rem 0.65rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--easing);
}
.minimap.is-visible { opacity: 1; pointer-events: auto; }
.minimap__list { display: flex; flex-direction: column; gap: 0.65rem; padding: 0; margin: 0; list-style: none; }
.minimap__item {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; padding: 0.6rem 0.4rem; color: inherit;
  position: relative; min-height: 32px;
}
.minimap__item::before {
  /* увеличиваем кликабельную зону до 44×44 */
  content: ''; position: absolute; inset: -6px -8px;
}
.minimap__dot {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mist);
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s var(--easing);
}
.minimap__item:hover .minimap__dot,
.minimap__item.is-active .minimap__dot {
  background: var(--ember); transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(58, 141, 180, 0.18);
}
.minimap__label {
  position: absolute; right: calc(100% + 0.75rem);
  white-space: nowrap;
  background: var(--ink-deep); color: var(--paper);
  font-size: 0.78rem; padding: 0.3rem 0.65rem; border-radius: 999px;
  opacity: 0; transform: translateX(8px);
  transition: opacity 0.2s, transform 0.2s var(--easing);
  pointer-events: none;
}
.minimap__item:hover .minimap__label,
.minimap__item.is-active .minimap__label {
  opacity: 1; transform: translateX(0);
}
.minimap__item.is-active .minimap__label { background: var(--ember); color: var(--ink-deep); }

@media (max-width: 900px) { .minimap { display: none; } }


/* ============================================
   Accessibility — WCAG 2.1 AA
   ============================================ */

/* Skip link — для клавиатурной навигации */
.skip-link {
  position: fixed; top: 0; left: 1rem; z-index: 1000;
  background: var(--ink-deep); color: var(--paper);
  padding: 0.75rem 1.25rem; border-radius: 0 0 6px 6px;
  text-decoration: none; font-weight: 500;
  transform: translateY(-100%);
  transition: transform 0.2s var(--easing);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--ember-glow); outline-offset: 2px;
}

/* scroll-margin для якорных ссылок — чтобы заголовок секции не прятался под sticky-шапкой */
section[id], [id^="rivermap"] { scroll-margin-top: 80px; }

/* Усилить focus-visible для всех ссылок и кнопок */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid var(--ember-glow);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ============================================
   Текст светлый на тёмных секциях (--river)
   ============================================ */
.section--river .kicker { color: var(--ember-glow); }
.section--river .section__title { color: var(--paper); }
.section--river .section__lead { color: rgba(247, 253, 253, 0.85); }

/* timeline (история) */
.section--river .timeline__title { color: #fff; }
.section--river .timeline__body p { color: rgba(247, 253, 253, 0.85); }
.section--river .timeline__node {
  background: var(--river-soft);
  border-color: var(--ember-glow);
  box-shadow: 0 0 0 4px rgba(168, 216, 236, 0.15);
}
.section--river .timeline::before {
  background: linear-gradient(to bottom, transparent, var(--ember-glow) 20%, var(--ember-glow) 80%, transparent);
  opacity: 0.35;
}
/* Inline-ссылка «читать далее» на тёмном river-фоне — светлая палитра */
.section--river .timeline__more-link {
  color: var(--ember-glow);
  text-decoration-color: rgba(168, 216, 236, 0.55);
}
.section--river .timeline__more-link:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
}
.section--river .timeline__more-block > p { color: rgba(247, 253, 253, 0.85); }

/* about — принципы */
.section--river .principle__title { color: var(--paper); }
.section--river .principle__text { color: rgba(247, 253, 253, 0.85); }
.section--river .principle__title::after { background: var(--ember-glow); }
.section--river .about__credits {
  color: rgba(247, 253, 253, 0.65);
  border-top-color: rgba(247, 253, 253, 0.15);
}

/* галерея — без правки контента, фон сам собою тёмный */
.section--river .gallery__item {
  background: rgba(247, 253, 253, 0.05);
  border-color: rgba(247, 253, 253, 0.15);
}

/* empty-state */
.section--river .empty-state {
  background: rgba(247, 253, 253, 0.05);
  border-color: rgba(247, 253, 253, 0.2);
}
.section--river .empty-state__text { color: rgba(247, 253, 253, 0.8); }
.section--river .empty-state__icon { color: rgba(247, 253, 253, 0.5); }

/* ============================================================
   Страница «Правила сообщества» — манифест на пергаменте
   ============================================================ */
body.page-rules {
  background: linear-gradient(180deg, #e3f8f9 0%, #b8d4dc 100%);
}

.manifesto-page {
  max-width: 740px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

/* ==========================================================================
   Privacy.php — строгий документ-политика обработки данных.
   В отличие от .manifesto (пергамент + сургучная печать) — здесь
   максимальная серьёзность: серый paper-warm фон, без декораций, чёткая
   нумерация разделов, юридический шрифт Cormorant Garamond без курсивов.
   ========================================================================== */
.privacy-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  background: transparent;
}
.privacy-doc {
  background: #ffffff;
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--ink-deep);
  border-radius: 2px;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) 2.5rem;
  font-family: 'PT Serif', 'Times New Roman', Georgia, serif;
  color: var(--ink-deep);
  font-size: 1.05rem;
  line-height: 1.65;
  box-shadow: 0 2px 6px rgba(12, 28, 36, 0.06);
}

/* Шапка документа: заголовок + подзаголовок-ФЗ + мета-данные */
.privacy-doc__head {
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-soft);
}
.privacy-doc__title {
  margin: 0 0 0.6rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-deep);
  letter-spacing: -0.005em;
}
.privacy-doc__subtitle {
  margin: 0 0 1.1rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: var(--ink-mute);
}
.privacy-doc__subtitle a {
  color: var(--ember-warm);
  border-bottom: 1px dotted rgba(30, 106, 142, 0.5);
  text-decoration: none;
}
.privacy-doc__subtitle a:hover { color: var(--ember); }

/* Мета-блок: оператор / контакт / дата редакции — мелким Manrope в строку */
.privacy-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.privacy-doc__meta-item b {
  color: var(--ink-deep);
  font-weight: 600;
  margin-right: 0.25em;
}
.privacy-doc__meta a {
  color: var(--ink-soft);
  border-bottom: 1px dotted rgba(70, 89, 107, 0.4);
  text-decoration: none;
}
.privacy-doc__meta a:hover { color: var(--ember-warm); border-bottom-color: var(--ember-warm); }

/* Нумерованные разделы документа */
.privacy-doc__sections {
  list-style: none;
  counter-reset: privacy-section;
  margin: 0;
  padding: 0;
}
.privacy-doc__section {
  position: relative;
  counter-increment: privacy-section;
  padding: 1.6rem 0 0 3rem;
  border-top: 1px solid rgba(12, 28, 36, 0.08);
  margin-top: 1.2rem;
}
.privacy-doc__section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.privacy-doc__section::before {
  content: counter(privacy-section, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.7rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ember-warm);
  width: 2.4rem;
}
.privacy-doc__section:first-child::before { top: 0.1rem; }

.privacy-doc__section-title {
  margin: 0 0 0.7rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-deep);
  line-height: 1.3;
}
.privacy-doc__section p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
}
.privacy-doc__section p:last-child { margin-bottom: 0; }

/* Списки внутри разделов — строгие тире, без bullet-точек */
.privacy-doc__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--ink-soft);
}
.privacy-doc__list li {
  position: relative;
  padding: 0.15rem 0 0.15rem 1.2rem;
  line-height: 1.55;
}
.privacy-doc__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--ember-warm);
}
.privacy-doc__list--contacts li { padding-left: 0; }
.privacy-doc__list--contacts li::before { content: ''; }

.privacy-doc a {
  color: var(--ember-warm);
  text-decoration: none;
  border-bottom: 1px dotted rgba(30, 106, 142, 0.45);
}
.privacy-doc a:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* Подвал документа: подпись справа с лёгкой каллиграфией Baltic Studio */
.privacy-doc__foot {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-soft);
}
.privacy-doc__approval {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-family: 'Manrope', sans-serif;
}
.privacy-doc__approval-label {
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
}
.privacy-doc__signature {
  width: 160px;
  height: auto;
  display: block;
  opacity: 0.88;
}
.privacy-doc__approval-date {
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
}

/* Навигация-«вилка» внизу страницы: главная ↔ регистрация */
.privacy-doc__fork {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  flex-wrap: wrap;
}
.privacy-doc__fork-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted rgba(70, 89, 107, 0.4);
  padding-bottom: 1px;
  transition: color 0.18s var(--easing), border-color 0.18s var(--easing);
}
.privacy-doc__fork-link:hover {
  color: var(--ember-warm);
  border-bottom-color: var(--ember-warm);
}
.privacy-doc__fork-sep {
  color: var(--ink-mute);
  font-weight: 700;
  opacity: 0.6;
}

/* Мобильная адаптация: уменьшаем отступы, нумерация переезжает над заголовком */
@media (max-width: 559px) {
  .privacy-doc { padding: 1.5rem 1.1rem 1.75rem; font-size: 1rem; line-height: 1.6; }
  .privacy-doc__meta { font-size: 0.78rem; gap: 0.25rem 1rem; }
  .privacy-doc__section { padding-left: 0; padding-top: 1.3rem; }
  .privacy-doc__section::before {
    position: static;
    display: block;
    margin-bottom: 0.3rem;
    width: auto;
    top: auto;
  }
  .privacy-doc__section:first-child::before { margin-top: 0; }
}

/* Сам «лист пергамента»: тёплая бумага, виньетка по углам, мягкая тень. */
.manifesto {
  position: relative;
  background-color: #f7fdfd;
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(130, 85, 35, 0.06), transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(130, 85, 35, 0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(130, 85, 35, 0.05) 100%);
  border: 1px solid rgba(120, 85, 50, 0.28);
  border-radius: 3px;
  padding: 4rem 3.5rem 3rem;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.06),
    0 14px 36px rgba(80, 45, 10, 0.12),
    inset 0 0 80px rgba(140, 90, 30, 0.05);
  font-family: 'PT Serif', 'Times New Roman', Georgia, serif;
  color: var(--ink-deep);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Лёгкие потёртости в углах — псевдоэлементы с радиальным градиентом. */
.manifesto::before,
.manifesto::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(40, 80, 100, 0.14), transparent 70%);
  pointer-events: none;
}
.manifesto::before { top: 0; left: 0; }
.manifesto::after  { bottom: 0; right: 0; transform: rotate(180deg); }

/* Декоративная виньетка сверху */
.manifesto__crest {
  text-align: center;
  font-size: 1.6rem;
  color: var(--ember-warm);
  letter-spacing: 0.3em;
  margin: 0 0 1.2rem;
  opacity: 0.85;
}

/* Главный заголовок — крупный Yeseva One по центру */
.manifesto__title {
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 2.6rem;
  text-align: center;
  color: var(--river);
  margin: 0 0 0.55rem;
  letter-spacing: 0.015em;
  line-height: 1.1;
  font-weight: 400;
}

/* Подзаголовок — рукописный Caveat */
.manifesto__subtitle {
  font-family: 'Caveat', 'Yeseva One', cursive;
  font-size: 1.4rem;
  text-align: center;
  color: var(--ember-warm);
  margin: 0 0 1.8rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Разделитель ⁕ — маленький цветочек по центру */
.manifesto__rule-line {
  text-align: center;
  font-size: 1.6rem;
  color: rgba(185, 80, 60, 0.55);
  margin: 0.5rem 0 2rem;
  line-height: 1;
}

/* Лид — курсивом, по ширине, с отступом первой строки */
.manifesto__lead {
  text-align: justify;
  font-size: 1.18rem;
  font-style: italic;
  margin: 0 0 2.5rem;
  text-indent: 2rem;
  color: var(--ink-soft);
  hyphens: auto;
}

/* Пункты-«статьи» с римскими цифрами через CSS counter */
.manifesto__articles {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: art;
}

.manifesto__article {
  counter-increment: art;
  position: relative;
  padding: 1.15rem 0 1.15rem 3.6rem;
  border-top: 1px solid rgba(120, 85, 50, 0.22);
  font-size: 1.08rem;
  line-height: 1.6;
}
.manifesto__article:last-child {
  border-bottom: 1px solid rgba(120, 85, 50, 0.22);
}

.manifesto__article::before {
  content: counter(art, upper-roman) ".";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 2.8rem;
  text-align: right;
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 1.35rem;
  color: var(--ember-warm);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

/* Печать и подпись внизу */
.manifesto__seal {
  margin-top: 3rem;
  padding-top: 2.2rem;
  text-align: center;
  position: relative;
}
.manifesto__seal::before {
  content: '☙ ⁕ ❧';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  color: rgba(185, 80, 60, 0.5);
  letter-spacing: 0.5em;
}

.manifesto__signed {
  font-family: 'Caveat', 'Yeseva One', cursive;
  font-size: 1.55rem;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0 0 1.2rem;
  letter-spacing: 0.01em;
}

.manifesto__sigil {
  width: 92px;
  height: 92px;
  display: block;
  margin: 0 auto;
  /* Лёгкий «оттиск»: чуть мутно, как старая печать */
  opacity: 0.95;
  filter: drop-shadow(0 1px 0 rgba(185, 80, 60, 0.18));
  transform: rotate(-4deg);
}

.manifesto__back-link {
  margin: 2.5rem 0 0;
  text-align: center;
  font-family: var(--font-display, 'Manrope', sans-serif);
}
.manifesto__back-link a {
  color: var(--river);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(26, 58, 74, 0.28);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.manifesto__back-link a:hover {
  color: var(--ember-warm);
  border-bottom-color: var(--ember-warm);
}

/* Мобильная адаптация — уменьшаем поля и шрифты, но манифест остаётся манифестом */
@media (max-width: 640px) {
  .manifesto-page { padding: 2.5rem 1rem 3.5rem; }
  .manifesto      { padding: 2.4rem 1.5rem 2rem; }
  .manifesto__title    { font-size: 1.95rem; }
  .manifesto__subtitle { font-size: 1.15rem; }
  .manifesto__crest    { font-size: 1.3rem; letter-spacing: 0.2em; }
  .manifesto__lead     { font-size: 1.08rem; text-indent: 1.3rem; }
  .manifesto__article  { padding-left: 2.4rem; font-size: 1.02rem; }
  .manifesto__article::before { width: 1.8rem; font-size: 1.15rem; }
  .manifesto__signed   { font-size: 1.35rem; }
  .manifesto__sigil    { width: 76px; height: 76px; }
}

/* ============================================================
   Карточка «Краеведение» — финальная карточка-эссе на пергаменте.
   widget: "ethno" в JSON, ветка PHP с <section class="ethno">.
   При выборе этой вкладки .qa получает класс qa--ethno-active —
   список вопросов слева скрывается, панель разворачивается на всю ширину.
   ============================================================ */

/* ====================================================================
   Режим «Краеведение»: 2-колонная сетка превращается в 2×2-сетку с
   «продолжением» левой колонки под списком вопросов. Туда выносится
   таймлайн «Точки времени» — тёмная вертикальная лента, визуально
   продолжающая dark-list. Правая панель растягивается на оба ряда.
   ==================================================================== */
.qa__sidebar-extra { display: none; }    /* по умолчанию скрыт */

@media (min-width: 760px) {
  .qa.qa--ethno-active {
    grid-template-columns: minmax(280px, 1fr) 1.6fr;
    grid-template-rows: auto 1fr;
  }
  .qa.qa--ethno-active .qa__list {
    grid-column: 1;
    grid-row: 1;
  }
  .qa.qa--ethno-active .qa__sidebar-extra {
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .qa.qa--ethno-active .qa__detail {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* === Тёмный sidebar-таймлайн под списком вопросов === */
.qa__sidebar-extra {
  background:
    linear-gradient(180deg, rgba(58, 141, 180, 0.06) 0%, transparent 30%),
    var(--river);
  color: rgba(247, 253, 253, 0.88);
  padding: 1.3rem 1.2rem 1.5rem;
  position: relative;
  /* Двойная верхняя «бровь» — намёк на продолжение списка сверху */
  border-top: 1px solid rgba(58, 141, 180, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(247, 253, 253, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
/* Лёгкая «расщелина» сверху — визуально отделяет от списка, но в той же гамме */
.qa__sidebar-extra::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(58, 141, 180, 0.55) 50%,
    transparent 100%);
}

.qa__sidebar-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.8rem;
  position: relative;
}
.qa__sidebar-timeline::before {
  /* Вертикальная линия-стержень слева — спинка таймлайна */
  content: '';
  position: absolute;
  left: 0;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(58, 141, 180, 0.5) 8%,
    rgba(58, 141, 180, 0.5) 92%,
    transparent 100%);
}
.qa__sidebar-timeline__item {
  padding: 0.55rem 0 0.55rem 1rem;
  position: relative;
  border-bottom: 1px dashed rgba(247, 253, 253, 0.08);
}
.qa__sidebar-timeline__item:last-child { border-bottom: 0; }
.qa__sidebar-timeline__item::before {
  /* Узловой кружок на стержне */
  content: '';
  position: absolute;
  left: -3.5px;
  top: 0.92rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow:
    0 0 0 2px var(--river),
    0 0 8px rgba(168, 216, 236, 0.6);
}

.qa__sidebar-timeline__year {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ember-warm);
  font-style: italic;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}
.qa__sidebar-timeline__event {
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(247, 253, 253, 0.78);
}

/* ====== «Где хранится память» — блок снизу sidebar-extra ====== */
.qa__sidebar-memory {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  position: relative;
}
/* Тонкая золотая «бровь» — разделитель между таймлайном и памятью */
.qa__sidebar-memory::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(58, 141, 180, 0.55) 50%,
    transparent 100%);
}
.qa__sidebar-memory__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ember-glow);
  text-align: center;
}
.qa__sidebar-memory__title::before,
.qa__sidebar-memory__title::after {
  content: '·';
  margin: 0 0.5rem;
  color: rgba(168, 216, 236, 0.45);
}
.qa__sidebar-memory__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(247, 253, 253, 0.82);
  text-align: justify;
  hyphens: auto;
}

/* ====== Финальный callout «Память жива...» ====== */
.qa__sidebar-callout {
  margin: 1.6rem 0 0;
  padding: 1.1rem 0.5rem 1rem;
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  text-align: center;
  color: var(--ember-glow);
  letter-spacing: 0.025em;
  line-height: 1.4;
  border-top: 2px solid rgba(58, 141, 180, 0.5);
  border-bottom: 2px solid rgba(58, 141, 180, 0.5);
  position: relative;
}
.qa__sidebar-callout::before,
.qa__sidebar-callout::after {
  content: '❦';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: var(--ember-warm);
  background: var(--river);
  padding: 0 0.4rem;
  opacity: 0.85;
}
.qa__sidebar-callout::before { top: -0.55em; }
.qa__sidebar-callout::after  { bottom: -0.55em; }

/* ====== Финальный callout «Память жива…» в режиме «на всю ширину» ======
   Лежит ВНЕ .qa-сетки, прямо в .container секции #links. Виден только когда
   активна вкладка Краеведения — селектор-сосед `.qa.qa--ethno-active ~ .qa__callout-wide`
   подхватывает класс, который JS ставит на .qa. На широком фоне раздел
   читается как эпиграф-итог Краеведения. */
.qa__callout-wide { display: none; }
.qa.qa--ethno-active ~ .qa__callout-wide {
  display: block;
  position: relative;
  margin: 2.5rem 0 0;
  padding: 1.6rem 1rem 1.5rem;
  font-family: 'Yeseva One', Georgia, serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 400;
  text-align: center;
  color: var(--ember-warm);
  letter-spacing: 0.025em;
  line-height: 1.4;
  border-top: 2px solid rgba(58, 141, 180, 0.45);
  border-bottom: 2px solid rgba(58, 141, 180, 0.45);
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(168, 216, 236, 0.07) 0%,
      transparent 70%);
}
/* Декоративные ❦ слева и справа над/под рамкой — как у sidebar-варианта,
   но позиционируем по краям, чтобы читалось как «эпиграф на развороте». */
.qa.qa--ethno-active ~ .qa__callout-wide::before,
.qa.qa--ethno-active ~ .qa__callout-wide::after {
  content: '❦';
  position: absolute;
  font-size: 1rem;
  color: var(--ember-warm);
  background: var(--paper);
  padding: 0 0.5rem;
  opacity: 0.85;
}
.qa.qa--ethno-active ~ .qa__callout-wide::before {
  top: -0.65em;
  left: 50%;
  transform: translateX(-50%);
}
.qa.qa--ethno-active ~ .qa__callout-wide::after {
  bottom: -0.65em;
  left: 50%;
  transform: translateX(-50%);
}

/* На мобильнике sidebar-extra стакается под список (display: block по умолчанию) */
@media (max-width: 759px) {
  .qa.qa--ethno-active .qa__sidebar-extra { display: block; }
}


/* ==========================================================================
   Кургальский полуостров — заказник, озёра, памятка, деревни
   Палитра: тёмный мшистый лес (section--forest). Акценты — ember (#3a8db4)
   для активных табов и точек, серебристо-зелёный текст для основного контента.
   ========================================================================== */

/* Контейнер блока: внутренние отступы под section--forest. */
.kurgalsky {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  color: #d7e2d2;
}

.kurgalsky__subtitle {
  max-width: 64ch;
  margin: -0.25rem 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(232, 239, 225, 0.78);
}

/* Большая «вступительная» цитата от лица автора-проводника.
   Лесная, акцентным шрифтом — задаёт настроение раздела. С декоративной
   кавычкой-маркером слева, чтобы читалось не как обычная блокквота, а как
   эпиграф путевого очерка. Сверху — большой пробел-«строфа», визуальная
   пауза между подзаголовком и эпиграфом. */
.kurgalsky__lead {
  position: relative;
  margin: 2.5rem 0 1.75rem;
  padding: 0.5rem 0 0.5rem 3.6rem;        /* увеличенный отступ под «-маркер */
  border-left: 3px solid var(--ember);
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: #f0f4d8;
  max-width: 62ch;
}
.kurgalsky__lead::before {
  content: '«';
  position: absolute;
  left: 0.85rem;
  top: -0.15em;
  font-size: 2.4em;
  line-height: 1;
  color: var(--ember);
  opacity: 0.55;
  font-family: 'Yeseva One', Georgia, serif;
}
.kurgalsky__lead p { margin: 0; }

/* Intro-параграф «Дорога на полуостров…» в левой колонке.
   Без буквицы — просто мшистая полоска слева, как заметка проводника
   из путевого блокнота. Чище и спокойнее. */
.kurgalsky__intro {
  position: relative;
  margin: 0;
  padding: 0.25rem 0 0.25rem 1rem;
  font-size: 1.04rem;
  line-height: 1.75;
  color: rgba(232, 239, 225, 0.88);
  border-left: 2px solid rgba(122, 156, 126, 0.35);
}

/* Сетка «текст + карта». Десктоп — 1fr 2fr: левый текст занимает 1/3,
   карта справа — 2/3. Карта визуально доминирует и обрамляет читаемый
   текстовый поток от intro «Дорога на полуостров…» до конца описания
   активного озера. Мобильный — стек: текст сверху, карта снизу. */
.kurgalsky__explore {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: start;
}
@media (min-width: 960px) {
  .kurgalsky__explore {
    grid-template-columns: 1.4fr 1.6fr;
    gap: 2.5rem;
  }
}

/* Левая колонка: intro-параграф + блок озёр в общем флекс-контейнере.
   Внутри — собственная вертикальная ритмика, чтобы дыхание между параграфом
   и блоком озёр читалось как единое описание полуострова. */
.kurgalsky__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.25rem 0;
}

/* SVG-карта полуострова в правой колонке. Карта получает собственный фон
   с двумя радиальными подсветами (мшистый + ember-fog), мягкую рамку и
   объёмную тень. Aspect-ratio 2:3 (viewBox 480×720) + max-height ограничивают
   карту до ~480px по высоте — это примерно на 10 строк короче, чем «во весь
   столбец», и выравнивает её низ с концом описания озера в левой колонке.
   Sticky на десктопе держит карту в виду при прокрутке текста. */
.kurgalsky__map {
  margin: 0 auto;
  padding: 0.6rem;
  aspect-ratio: 480 / 720;          /* совпадает с viewBox SVG */
  max-height: 540px;                /* выравнивание с текстом слева */
  max-width: 100%;                  /* в узких колонках не вылезает */
  width: auto;                      /* ширина выводится из height × aspect */
  background:
    radial-gradient(ellipse at 30% 25%, rgba(122, 156, 126, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(58, 141, 180, 0.06) 0%, transparent 60%),
    rgba(8, 16, 12, 0.48);
  border: 1px solid rgba(122, 156, 126, 0.22);
  border-radius: var(--radius-md);
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.7),
    inset 0 0 80px rgba(8, 16, 12, 0.4);
}
.kurgalsky__map svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (min-width: 960px) {
  .kurgalsky__map {
    position: sticky;
    top: calc(4.3rem + 1rem);   /* учёт sticky-хедера */
    /* Решение по визуальному масштабу/позиции, найденное вручную:
       scale 1.25 увеличивает карту визуально без изменения layout-бокса,
       margin-top 70px сдвигает её вниз, чтобы низ совпадал с концом
       описания озера в левой колонке. */
    scale: 1.25;
    margin-top: 70px;
  }
}

/* ----- Озёра: таб-переключатель ----- */
.kurgalsky-lakes {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.kurgalsky-lakes__intro {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(232, 239, 225, 0.78);
  text-align: left;
  font-style: italic;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(58, 141, 180, 0.35);
}

/* Ряд кнопок-табов: «Липовское | Белое». Делаем как чёткие сегментированные
   капсулы — фон, рамка, чтобы было сразу видно что это интерактивные «вкладки»,
   а не подзаголовки. Активная имеет ember-фон и тёмный текст — максимальный
   контраст для немедленного считывания, какое озеро сейчас показано. */
.kurgalsky-lakes__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem;
  background: rgba(8, 16, 12, 0.42);
  border: 1px solid rgba(122, 156, 126, 0.22);
  border-radius: var(--radius-md);
}
.kurgalsky-lakes__btn {
  flex: 1 1 0;
  min-width: 7rem;
  position: relative;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(215, 226, 210, 0.78);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 4px);
  cursor: pointer;
  transition: color 0.2s var(--easing),
              background-color 0.25s var(--easing),
              box-shadow 0.25s var(--easing);
}
.kurgalsky-lakes__btn:hover {
  color: #f0f4d8;
  background: rgba(122, 156, 126, 0.10);
}
.kurgalsky-lakes__btn.is-active {
  color: #1a2820;
  background: linear-gradient(135deg, var(--ember-glow) 0%, var(--ember) 100%);
  box-shadow:
    0 2px 6px rgba(58, 141, 180, 0.4),
    inset 0 1px 0 rgba(220, 240, 250, 0.6);
}
.kurgalsky-lakes__btn:focus-visible {
  outline: 2px solid var(--ember-glow);
  outline-offset: 3px;
}

/* Панель содержимого таба. По умолчанию скрыта, активная — видна.
   Используем только [hidden] атрибут — это и есть нативный механизм
   переключения, JS его ставит/снимает. .is-active нужен только на кнопке.  */
.kurgalsky-lakes__panel {
  display: block;
  animation: kurgFade 0.35s var(--easing);
}
.kurgalsky-lakes__panel[hidden] { display: none; }

@keyframes kurgFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Слоган-эпиграф под названием озера: крупный курсив акцентного шрифта,
   ember-glow, чтобы сразу задавал тон описанию озера. */
.kurgalsky-lake__tagline {
  margin: 0.25rem 0 0.85rem;
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ember-glow);
  letter-spacing: 0.005em;
}

/* Факты-чипы про озеро — мшистые «плакетки» с лёгким объёмом.
   Двухслойный фон (мшистая база + ember-подсвет сверху через ::before),
   inset highlight сверху, тонкая граница — выглядит как маленькая
   гравированная табличка с данными об озере. */
.kurgalsky-lake__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.kurgalsky-lake__fact {
  position: relative;
  padding: 0.4rem 0.85rem 0.4rem 1.5rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #f0f4d8;
  background:
    linear-gradient(180deg,
      rgba(122, 156, 126, 0.18) 0%,
      rgba(122, 156, 126, 0.08) 100%);
  border: 1px solid rgba(122, 156, 126, 0.32);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(232, 239, 225, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.25s var(--easing),
              background 0.25s var(--easing),
              transform 0.2s var(--easing);
}
/* Декоративная ember-точка слева — «огонёк-маркёр», как у деревень,
   связывает плашки фактов с общей лесной палитрой раздела. */
.kurgalsky-lake__fact::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 6px rgba(58, 141, 180, 0.55);
}
.kurgalsky-lake__fact:hover {
  border-color: rgba(58, 141, 180, 0.45);
  background:
    linear-gradient(180deg,
      rgba(122, 156, 126, 0.24) 0%,
      rgba(122, 156, 126, 0.12) 100%);
  transform: translateY(-1px);
}

/* Основной текст-описание озера. Здесь уже не intro-блок —
   просто читабельный абзац без декораций, чтобы не конкурировал с буквицей
   у kurgalsky__intro выше. */
.kurgalsky-lake__body {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(232, 239, 225, 0.85);
}

/* ==========================================================================
   Памятка путешественнику — safety-блок с тремя секциями.
   ban (запреты, цвет ржавчины), danger (звери, тёмный ember),
   prep (сборы, лесной мох-зелёный).
   ========================================================================== */
.kurgalsky-care {
  margin: 0 0 3rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 1.5rem;
  background:
    linear-gradient(180deg, rgba(40, 54, 44, 0.55) 0%, rgba(28, 40, 32, 0.55) 100%);
  border: 1px solid rgba(58, 141, 180, 0.28);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.55);
}

.kurgalsky-care__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.kurgalsky-care__mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem;
  background: #c8392c;                /* кирпично-красный, подходящий под холодную палитру */
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow:
    0 0 18px rgba(200, 57, 44, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.kurgalsky-care__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  color: #f0f4d8;
}
.kurgalsky-care__intro {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(232, 239, 225, 0.85);
}

/* Сетка из трёх секций. Desktop — 3 колонки, мобильник — стек. */
.kurgalsky-care__sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .kurgalsky-care__sections {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.kurgalsky-care__section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: rgba(12, 22, 16, 0.42);
  border: 1px solid rgba(122, 156, 126, 0.14);
  border-radius: var(--radius-sm);
}
.kurgalsky-care__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kurgalsky-care__heading-bar {
  display: inline-block;
  width: 26px; height: 2px;
  border-radius: 1px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.85;
}
.kurgalsky-care__heading-text { line-height: 1.15; }

/* Цветовые акценты секций — задают цвет полоски и заголовка */
.kurgalsky-care__section--ban    .kurgalsky-care__heading { color: #e08471; }
.kurgalsky-care__section--danger .kurgalsky-care__heading { color: var(--ember-glow); }
.kurgalsky-care__section--prep   .kurgalsky-care__heading { color: #9bc89e; }

.kurgalsky-care__items {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kurgalsky-care__item {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(232, 239, 225, 0.88);
}
.kurgalsky-care__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  background: var(--ember);
  border-radius: 50%;
  opacity: 0.7;
}
/* h_emph выделяет ключевые слова — делаем чуть ярче и плотнее */
.kurgalsky-care__item strong,
.kurgalsky-care__item em {
  font-weight: 700;
  font-style: normal;
  color: #f0f4d8;
}

.kurgalsky-care__footer {
  position: relative;
  margin: 1.25rem 0 0;
  padding: 0.9rem 0 0 1.7rem;          /* место под звёздочку слева */
  border-top: 1px solid rgba(122, 156, 126, 0.18);
  font-size: 0.78rem;                   /* чуть помельче */
  line-height: 1.55;
  color: rgba(232, 239, 225, 0.72);
  font-style: italic;
}

/* ==========================================================================
   Восемь деревень — узкие плитки в сетке.
   Desktop ≥720px — 2 колонки, ≥960px — 4 колонки.
   ========================================================================== */
.kurgalsky-villages { margin-top: 0; }
.kurgalsky-villages__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 600;
  color: #f0f4d8;
}
.kurgalsky-villages__lead {
  max-width: 56ch;
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(232, 239, 225, 0.78);
}
.kurgalsky-villages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .kurgalsky-villages__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .kurgalsky-villages__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.kurgalsky-villages__chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem 1rem 1.3rem;
  background: rgba(12, 22, 16, 0.42);
  border: 1px solid rgba(122, 156, 126, 0.18);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--easing),
              background-color 0.25s var(--easing),
              transform 0.25s var(--easing);
}
/* Маленький ember-«огонёк» — точка слева как метка деревни, метафора
   огонька в окне ночного дома, который встретит путника. */
.kurgalsky-villages__chip::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 1.25rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(58, 141, 180, 0.55);
}
.kurgalsky-villages__chip:hover {
  border-color: rgba(58, 141, 180, 0.45);
  background: rgba(20, 32, 24, 0.55);
  transform: translateY(-1px);
}
.kurgalsky-villages__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #f0f4d8;
  letter-spacing: 0.005em;
}
.kurgalsky-villages__note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(232, 239, 225, 0.76);
}


/* ==========================================================================
   Краеведение (.ethno) — карточка-эссе на пергаменте внутри qa__panel.
   Палитра: тёплая бумага (#f7fdfd), сепия-чернила, акценты речного синего.
   Шрифт: Cormorant Garamond для основного текста, Yeseva One для эпиграфа.
   ========================================================================== */

.ethno {
  font-family: 'PT Serif', 'Times New Roman', Georgia, serif;
  color: var(--ink-deep);
  background-color: #f7fdfd;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(130, 85, 35, 0.06), transparent 50%),
    radial-gradient(ellipse at 85% 88%, rgba(130, 85, 35, 0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(130, 85, 35, 0.05) 100%);
  border: 1px solid rgba(120, 85, 50, 0.28);
  border-radius: 4px;
  padding: 2.8rem 2.6rem 2.4rem;
  margin: 0.5rem 0 0;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.05),
    0 12px 28px rgba(80, 45, 10, 0.1),
    inset 0 0 80px rgba(140, 90, 30, 0.05);
  position: relative;
  font-size: 1.04rem;
  line-height: 1.7;
}
.ethno::before,
.ethno::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 30% 30%, rgba(40, 80, 100, 0.14), transparent 70%);
  pointer-events: none;
}
.ethno::before { top: 0; left: 0; }
.ethno::after  { bottom: 0; right: 0; transform: rotate(180deg); }

/* Эпиграф — крупная Yeseva One, по центру, в речной палитре, со звёздочкой ниже. */
.ethno__epigraph {
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 400;
  text-align: center;
  color: var(--river);
  margin: 0 0 1.3rem;
  letter-spacing: 0.015em;
  line-height: 1.15;
  position: relative;
}
.ethno__epigraph::after {
  content: '⁕';
  display: block;
  font-size: 1.3rem;
  color: var(--ember-warm);
  margin-top: 0.45rem;
  opacity: 0.7;
}

/* Вступительный абзац — italic, выровнен по ширине, с отступом первой строки. */
.ethno__intro {
  font-style: italic;
  font-size: 1.12rem;
  text-align: justify;
  margin: 0 auto 2.4rem;
  max-width: 64ch;
  color: var(--ink-soft);
  text-indent: 2rem;
  hyphens: auto;
}

/* Универсальные секции внутри карточки */
.ethno__section {
  margin: 2.2rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(120, 85, 50, 0.22);
}
.ethno__section:first-of-type { padding-top: 0; border-top: 0; margin-top: 1.8rem; }
.ethno__section:last-child { margin-bottom: 0; padding-bottom: 8px; }

.ethno__section-title {
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--river);
  margin: 0 0 1.1rem;
  letter-spacing: 0.01em;
  text-align: center;
  position: relative;
}
.ethno__section-title::before,
.ethno__section-title::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 85, 50, 0.45), transparent);
  vertical-align: middle;
  margin: 0 0.7rem;
}

/* ---------- Народы ---------- */
.ethno__peoples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 1rem;
}
@media (min-width: 720px) {
  .ethno__peoples { grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
}

.ethno__people {
  padding: 0;
  background: transparent;
  border-left: 2px solid var(--ember-warm);
  padding-left: 1rem;
}
.ethno__people-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.ethno__people-name {
  font-family: 'Yeseva One', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--river);
  margin: 0;
  letter-spacing: 0.01em;
}
.ethno__people-period {
  font-size: 0.85rem;
  color: var(--ember-warm);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  white-space: nowrap;
}
.ethno__people-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- Голоса (цитаты) ---------- */
.ethno__voices-lead {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}
.ethno__voice {
  margin: 0 0 1.2rem;
  padding: 0.6rem 0 0.6rem 1.4rem;
  border-left: 3px solid var(--ember-warm);
  position: relative;
  background: rgba(120, 85, 50, 0.04);
  border-radius: 0 4px 4px 0;
}
.ethno__voice:last-child { margin-bottom: 0; }
.ethno__voice-text {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-deep);
  quotes: "«" "»";
}
.ethno__voice-text::before { content: open-quote; color: var(--ember-warm); margin-right: 0.05em; }
.ethno__voice-text::after  { content: close-quote; color: var(--ember-warm); margin-left: 0.05em; }
.ethno__voice-source {
  display: block;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--ember-warm);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.ethno__voice-source::before { content: '— '; }

/* ---------- Топонимика ---------- */
.ethno__toponymy-lead {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}
.ethno__toponymy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 1.2rem;
  margin-top: 0.4rem;
}
@media (min-width: 560px) {
  .ethno__toponymy { grid-template-columns: 1fr 1fr; }
}

/* Селекторы прескоплены под .ethno__toponymy, чтобы не глушить
   оригинальные карточки .toponym в секции «Природа / Имена воды»
   (там у .toponym полноценная карточка-плитка).
   Внутри Краеведения name плавает влево (float), и meaning обтекает его
   текстом — даёт характерный стиль «глоссария рукописи»: крупное имя
   слева, длинное толкование уходит вокруг него. */
.ethno__toponymy .toponym {
  display: block;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 250, 240, 0.5);
  border: 1px solid rgba(120, 85, 50, 0.18);
  border-radius: 3px;
  overflow: hidden;            /* contain float — рамка карточки не схлопывается */
  transition: none;            /* отменяем hover-приподнимание оригинала */
}
.ethno__toponymy .toponym:hover {
  transform: none;
  border-color: rgba(120, 85, 50, 0.28);
}
.ethno__toponymy .toponym__name {
  float: left;
  margin: 0 0.55rem 0 0;
  font-family: 'Yeseva One', Georgia, serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--river);
}
.ethno__toponymy .toponym__meaning {
  display: block;             /* meaning сам по себе блок, обтекает float */
  margin: 0;
  font-size: 0.93rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ethno__toponymy .toponym__meaning::before {
  content: '— ';
  color: var(--ember-warm);
  margin-right: 0.1em;
}

/* ---------- Финальный блок «закладка»: приглашение на второй проект автора ----------
   Тёплая плашка-конверт в конце ethno-карточки с декоративным ❦ сверху по
   центру и pill-ссылкой как «штамп-печать». Должна читаться как отдельная
   закладка, а не часть обычного текста — поэтому собственный фон, ember-рамка,
   центровка и финальная пунктуация-печать. */
.ethno__further {
  position: relative;
  margin: 1.6rem 0 0.4rem;
  padding: 0.9rem 1.2rem 0.85rem;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(168, 216, 236, 0.10) 0%,
      transparent 65%),
    rgba(255, 250, 240, 0.55);
  border: 1px dashed rgba(30, 106, 142, 0.45);
  border-radius: var(--radius-md);
  text-align: center;
}
/* ❦-маркер сверху по центру, перекрывает рамку — будто восковая печать */
.ethno__further-mark {
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0 0.55rem;
  background: #f7fdfd;            /* тон пергамента ethno */
  color: var(--ember-warm);
  font-size: 1.15rem;
  line-height: 1;
}
.ethno__further-text {
  margin: 0;
  font-family: 'PT Serif', 'Times New Roman', Georgia, serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
/* Pill-ссылка-печать: компактная капсула с ember-фоном.
   Inline-block, чтобы вошла в поток текста как продолжение фразы. */
.ethno__further-link {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.2rem 0.75rem;
  background: linear-gradient(135deg, var(--ember-glow), var(--ember));
  color: #1a2820;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow:
    0 2px 6px rgba(58, 141, 180, 0.35),
    inset 0 1px 0 rgba(220, 240, 250, 0.55);
  white-space: nowrap;
  transition: transform 0.18s var(--easing), box-shadow 0.18s var(--easing), color 0.18s var(--easing), background 0.18s var(--easing);
}
.ethno__further-link:hover {
  color: #fff;                 /* белый текст на hover */
  background: linear-gradient(135deg, var(--ember), var(--ember-warm));
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(58, 141, 180, 0.45),
    inset 0 1px 0 rgba(220, 240, 250, 0.7);
}
.ethno__further-link:focus-visible {
  outline: 2px solid var(--ember-glow);
  outline-offset: 3px;
}

/* ---------- Мобильные правки ---------- */
@media (max-width: 559px) {
  .ethno { padding: 1.8rem 1.3rem 1.6rem; font-size: 1rem; }
  .ethno__epigraph { font-size: 1.7rem; }
  .ethno__intro { font-size: 1.04rem; text-indent: 1.3rem; }
  .ethno__section-title { font-size: 1.25rem; }
  .ethno__section-title::before,
  .ethno__section-title::after { width: 16px; margin: 0 0.4rem; }
}