/* Страницы справочника (/spravochnik/*). Подключается ВТОРЫМ после base.css —
   все токены, шапка, кнопки и фон берутся оттуда, здесь только то, что нужно
   длинному читаемому тексту и элементам воронки. Своего :root тут нет. */

.art{padding-top:32px;padding-bottom:64px}

/* ── хлебные крошки ─────────────────────────────────────────────────────── */
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--gold)}

/* ── тело статьи ────────────────────────────────────────────────────────── */
.entry{max-width:68ch}
.entry h1{font-family:var(--serif);font-weight:500;line-height:1.12;
  font-size:clamp(28px,4.6vw,44px);margin:0 0 22px}
.entry h2{font-family:var(--serif);font-weight:500;line-height:1.2;
  font-size:clamp(21px,3vw,28px);margin:40px 0 14px}
.entry p{color:var(--ink);line-height:1.72;font-size:var(--fs-lead,18px);
  margin:0 0 18px;max-width:66ch}
/* Определение в первом абзаце — визуально чуть крупнее: это и лид, и то, что
   поисковик и ассистент цитируют из начала страницы. */
.entry > p:first-of-type{font-size:clamp(18px,2.4vw,21px);color:var(--ink)}
.entry a{color:var(--gold);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.entry a:hover{color:#e8c05e}
.entry em{font-style:italic;color:var(--ink)}
.entry ul{margin:0 0 18px;padding-left:22px;color:var(--ink);line-height:1.7}
.entry li{margin-bottom:8px}

/* ── карточка призыва (главный CTA воронки) ─────────────────────────────── */
.cta-card{margin:44px 0 28px;padding:26px 26px 24px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r,16px)}
.cta-card h2{font-family:var(--serif);font-weight:500;margin:0 0 10px;
  font-size:clamp(20px,2.6vw,26px);color:var(--ink)}
.cta-card p{color:var(--dim);line-height:1.65;margin:0 0 18px;max-width:60ch}
.cta-card .btn{margin-top:4px}
.cta-card .cta-sub{color:var(--faint);font-size:var(--fs-xs,13px);margin:14px 0 0}

/* ── первоисточник и связанные темы ─────────────────────────────────────── */
.source-line{color:var(--faint);font-size:var(--fs-xs,13px);line-height:1.6;
  border-top:1px solid var(--line);padding-top:18px;margin-top:36px}
.related{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  margin-top:24px}
.related-label{font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.related a{color:var(--gold);font-weight:560}
.related a:hover{color:#e8c05e}

/* ── подвал ─────────────────────────────────────────────────────────────── */
.foot-in{max-width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:14px 26px;justify-content:space-between;align-items:center;
  color:var(--faint);font-size:var(--fs-xs,13px)}
.foot-in nav{display:flex;gap:18px}
.foot-in a{color:var(--dim)}
.foot-in a:hover{color:var(--ink)}

/* ── поп-ап бесплатной карты ─────────────────────────────────────────────── */
.popup{position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,8,14,.72);backdrop-filter:blur(3px)}
.popup.open{display:flex}
.popup-box{position:relative;max-width:440px;width:100%;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:18px;padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:popup-in .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes popup-in{from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}}
.popup-box h2{font-family:var(--serif);font-weight:500;margin:0 0 12px;
  font-size:clamp(22px,3vw,28px);color:var(--ink)}
.popup-box > p{color:var(--dim);line-height:1.6;margin:0 0 20px}
.popup-box .btn{width:100%;justify-content:center}
.popup-sub{color:var(--faint);font-size:var(--fs-xs,13px);margin:16px 0 0;
  line-height:1.55}
.popup-x{position:absolute;top:12px;right:14px;background:transparent;
  border:0;color:var(--faint);font-size:26px;line-height:1;cursor:pointer;
  padding:4px 8px;border-radius:8px}
.popup-x:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.popup-box{animation:none}}