/* Блоки тематических сайтов — общие для всех шаблонов оформления
   (docs/topic-designs.md). Идут одним файлом со стилями шаблона
   (designs/<имя>.css) после site.css; гео-сайт этот файл не получает.
   Шрифты — системные, картинок в стилях нет: CSP style-src 'self'. */

/* Фокус с клавиатуры виден на любом фоне. */
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
/* «и» в знаке — цветом бумаги: в тёмной теме акцент светлый, белое на нём не читается. */
@media (prefers-color-scheme: dark) { .mark .glyph { stroke: var(--paper); } }

/* Вводный блок главной: заголовок, вводный текст, картинка — подача по
   шаблону (top, banner, side, none). */
.intro { margin: 20px 0 8px; }
.intro h1 { margin: 0 0 10px; }
.intro .hero { margin: 0; }
.intro .lead { margin: 0; }
.intro-top .hero { margin-bottom: 22px; }
.intro-side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 36px; align-items: center; }
.intro-side.no-pic { grid-template-columns: minmax(0, 1fr); }
.intro-banner { position: relative; }
.intro-banner + .lead { margin-top: 14px; }
@media (max-width: 760px) {
  .intro-side { grid-template-columns: minmax(0, 1fr); }
  .intro-side .hero { order: -1; }
}

/* Знак энсо (Додзё без картинки). */
.enso { display: block; width: 120px; height: 120px; margin: 0 auto 14px; }
.enso .brush { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.enso .tail { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.enso .seal { fill: var(--accent); }

/* Крупные числа: клубы, города, регионы. */
.stats { list-style: none; padding: 0; margin: 22px 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stats li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stats strong { font: 800 clamp(34px, 7vw, 64px)/1 var(--sans); font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Диагностика блоком на главной (Класс). */
.diag-block { display: flex; flex-direction: column; gap: 4px; margin: 22px 0 6px; padding: 16px 20px;
  border: 2px solid var(--accent); color: var(--ink); text-decoration: none; }
.diag-block strong { font: 700 clamp(19px, 3vw, 24px)/1.25 var(--sans); color: var(--accent); }
.diag-block span { color: var(--muted); }

/* Каталог главной: страны и города, где больше всего клубов. Плотный
   каталог — во всю ширину, двумя частями. */
.catalog-part + .catalog-part { margin-top: 18px; }
.catalog.wide { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 40px; }
.catalog.wide .catalog-part + .catalog-part { margin-top: 0; }
@media (max-width: 760px) {
  .catalog.wide { grid-template-columns: minmax(0, 1fr); }
  .catalog.wide .catalog-part + .catalog-part { margin-top: 18px; }
}
.feed { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.leaders.places a { overflow-wrap: break-word; }

/* Полосы у чисел (Лаборатория): длина — доля от наибольшего в списке. */
.bar { display: block; height: 6px; background: var(--accent); }
.b1 { width: 10%; } .b2 { width: 20%; } .b3 { width: 30%; } .b4 { width: 40%; } .b5 { width: 50%; }
.b6 { width: 60%; } .b7 { width: 70%; } .b8 { width: 80%; } .b9 { width: 90%; } .b10 { width: 100%; }

/* Арена — спорт (docs/topic-designs.md): белый и графит, один энергичный
   акцент; прямой жирный шрифт заглавными, крупные числа, шапка — тёмной
   полосой. Картинка — во всю ширину с заголовком поверх; без картинки —
   тёмная плашка с заголовком. Каталог — плитками. */
:root {
  --paper: #ffffff; --ink: #0e1116; --muted: #4b5260; --line: #e3e6eb; --rule: #0e1116;
  --accent: #c2410c; --link: #0e1116; --focus: #c2410c; --band: #0e1116; --band-ink: #ffffff;
  --band-muted: #c3c8d1; --band-accent: #ff8a4c; --tile: #f2f4f7; --serif: var(--sans);
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0b0d10; --ink: #f2f4f7; --muted: #a2a9b5; --line: #262b33; --rule: #f2f4f7;
    --accent: #ff8a4c; --link: #f2f4f7; --focus: #ff8a4c; --band: #000000; --tile: #161a20; }
}
h1, h2, h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }

/* Шапка — тёмная полоса во всю ширину. */
.top { max-width: none; background: var(--band); color: var(--band-ink); border-bottom: 4px solid var(--band-accent);
  padding-left: max(16px, calc((100% - 1008px) / 2)); padding-right: max(16px, calc((100% - 1008px) / 2)); }
.brand, .brand:hover { color: var(--band-ink); font-family: var(--sans); font-weight: 900; }
.brand:hover .dot { fill: var(--band-ink); }
.mark .glyph { stroke: var(--band); }
.mark .dot { fill: var(--band-accent); }
.city { color: var(--band-muted); }
.top a { color: var(--band-ink); }
.top a:hover { color: var(--band-accent); }
.main-nav { font-weight: 700; }
.langs a { color: var(--band-accent); }
.diag { border-color: var(--band-accent); }
.diag strong { color: var(--band-accent); }
.diag span { color: var(--band-muted); }
.diag:hover { background: var(--band-accent); }
.diag:hover strong, .diag:hover span { color: var(--band); }
.burger, .burger::before, .burger::after { background: var(--band-ink); }
.menu-nav { background: var(--band); border-bottom: 4px solid var(--band-accent); border-top-color: #2b313b; }
.menu-nav a { border-bottom-color: #2b313b; }
footer { border-top: 4px solid var(--ink); }

/* Главная: фото во всю ширину, заголовок поверх на затемнении. */
.intro-banner { margin: 20px -16px 0; background: var(--band); }
.intro-banner .hero img { aspect-ratio: 2 / 1; object-position: 50% 25%; }
.intro-banner h1 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 64px 24px 20px; color: #fff;
  font-size: clamp(32px, 7vw, 76px); background: linear-gradient(to top, rgba(6, 8, 11, .88), rgba(6, 8, 11, 0)); }
.intro-banner.no-pic h1 { position: static; background: none; padding: 48px 24px 28px; }
.intro-banner + .lead { color: var(--ink); font-size: 19px; max-width: 70ch; }
@media (max-width: 560px) { .intro-banner h1 { padding: 40px 16px 14px; } }
.stats { border-top: 4px solid var(--accent); padding-top: 14px; }
.stats strong { font-weight: 900; font-size: clamp(40px, 9vw, 88px); letter-spacing: -.03em; }
.stats li:first-child strong { color: var(--accent); }
.kicker { font-weight: 800; letter-spacing: .12em; }
.lead-story h2 { letter-spacing: -.015em; }
.news .title, .articles .title, .orgs .name { font-family: var(--sans); font-weight: 800; }

/* Каталог плитками: число крупно, вся плитка — ссылка. */
.catalog { max-width: none; }
.leaders.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.col-catalog .leaders.places { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.leaders.places li { position: relative; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px;
  background: var(--tile); border-left: 4px solid var(--accent); }
.leaders.places li::after { display: none; }
.leaders.places .count { order: -1; font: 900 30px/1 var(--sans); color: var(--ink); }
.leaders.places a { font-weight: 700; font-size: 15px; line-height: 1.25; }
.leaders.places a::before { content: ""; position: absolute; inset: 0; }
.leaders.places li:hover { background: var(--line); }
.orgs li { border-left: 4px solid transparent; padding-left: 12px; }
.orgs li:hover { border-left-color: var(--accent); }