/* Страничные стили surname. Извлечено из макета v2/01-surname.html. */
/* ---- Сводка в рельсе ---- */
.summary{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.summary-top{ padding:20px 22px; border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.summary-rank{
  font-family:var(--f-head); font-weight:600; letter-spacing:-.03em;
  font-size:46px; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums;
}
/* Отбивка знака от числа задана здесь, а не пробелом в разметке: у блока
   letter-spacing:-.03em, и обычный пробел он бы поджал до слипания. */
.summary-rank small{ font-size:24px; font-weight:500; margin-right:.12em; }
.summary-top p{ font-size:14.5px; color:var(--ink-soft); line-height:1.4; }
.summary dl{ padding:4px 22px 6px; }
.summary dl > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.summary dl > div:first-child{ border-top:0; }
.summary dt{ color:var(--ink-soft); font-size:14.5px; }
.summary dd{ font-weight:700; font-variant-numeric:tabular-nums; }
.summary .split{ display:flex; flex-direction:column; gap:9px; padding:14px 0 16px; border-top:1px solid var(--line); }
.split-head{ display:flex; justify-content:space-between; gap:16px; font-size:14.5px; color:var(--ink-soft); }
.split-head b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.split-bar{ display:flex; height:8px; border-radius:var(--r-pill); overflow:hidden; background:var(--surface-2); }
.split-bar i{ display:block; height:100%; }
.split-bar .m{ background:var(--accent); }
.split-bar .f{ background:var(--clay); }
.split-legend{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--ink-faint); }
.summary-foot{ padding:14px 22px; border-top:1px solid var(--line); font-size:14.5px; }
/* В потоке (уже 1480px) сводка становится широкой — раскладываем в две колонки */
@media (min-width:768px) and (max-width:1479px){
  .summary dl{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; padding:4px 22px 10px; }
  .summary dl > div{ border-top:1px solid var(--line); }
  .summary dl > div:nth-child(2){ border-top:0; }
  .summary .split{ grid-column:1 / -1; }
}

/* ---- Происхождение ----
   Ритм между блоками секции держит .stack, поэтому своих отступов здесь нет. */
.morphemes{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px;
  font-family:var(--f-head); font-size:clamp(28px,4.4vw,44px); letter-spacing:-.02em;
  padding:6px 0 10px;
}
.morph{ display:block; }
.morph b{ display:block; font-weight:600; color:var(--ink); padding-bottom:8px; border-bottom:2px solid var(--accent); }
.morph span{ display:block; padding-top:10px; font-family:var(--f-text); font-size:15px; font-weight:500; line-height:1.4; color:var(--ink-soft); letter-spacing:0; }
.morph-2 b{ border-bottom-color:var(--clay); }
.morph-2 span{ color:var(--clay); }

/* ---- Демография ---- */
.demo{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:40px; align-items:start; }
@media (max-width:900px){ .demo{ grid-template-columns:1fr; gap:32px; } }
/* Колонка демографии: заголовок и список/таблица под ним. */
.demo-card{ display:flex; flex-direction:column; gap:14px; }
.demo h3{ font-family:var(--f-text); font-size:16px; font-weight:700; }
.gender li{ padding:14px 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; }
.gender li:first-child{ border-top:0; padding-top:0; }
.gender-row{ display:flex; align-items:baseline; gap:12px; }
.gender-row b{ font-weight:600; }
.gender-row .n{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.gender-row .p{ color:var(--ink-faint); font-variant-numeric:tabular-nums; width:52px; text-align:right; }
.gender .bar span.f{ background:var(--clay); }
.gender-total{ display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); font-weight:700; font-variant-numeric:tabular-nums; }
.faith td.share{ width:34%; }
.faith .bar{ min-width:60px; }
.faith .place{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* ---- Карта-превью ---- */
.geo{ display:grid; grid-template-columns:1.15fr 1fr; gap:32px; align-items:center; }
/* Превью ведёт на полную карту целиком, поэтому это ссылка. Рамку и фон
   рисует вложенный .map из design-system — карта здесь та же, что на /worldmap. */
.geo-map{ display:block; text-decoration:none; }
.geo-map .map{ padding:14px; transition:border-color .15s ease; }
.geo-map:hover .map{ border-color:var(--accent); }
@media (max-width:860px){ .geo{ grid-template-columns:1fr; gap:24px; } }

/* ---- Кластер подстраниц ---- */
/* ---- Перелинковка ---- */
.crosslinks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; }
@media (max-width:860px){ .crosslinks{ grid-template-columns:1fr; gap:28px; } }
.crosslinks h3{ font-family:var(--f-text); font-size:15px; font-weight:700; }

/* ---- Итоговый призыв ---- */
.cta{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--accent-soft); padding:36px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.cta > div{ display:flex; flex-direction:column; gap:6px; }
.cta p{ color:var(--ink-soft); max-width:52ch; }