/* ===== sections/directories.css ===== */
/* Справочники: оглавление (.dirx-*), справочник со списком (.dir-*, .svc*), одна запись (.rec*, .likes).
   Лейблы: метка демо в списке (.svc__demo), фильтр «Принимают демо» (.dir-demo), «Как отправить демо» (.demo), 9 правил письма (.rules), вопросы (.dir-faq). */

/* ---------- общее: строка с крошками, цифры-факты, внешняя ссылка */
.dir-bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5); flex-wrap: wrap; padding-top: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.dir-bar > .eyebrow { margin-left: auto; }
.dir-path ol { display: flex; flex-wrap: wrap; gap: var(--s-2) 0; font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.dir-path li:not(:last-child)::after { content: "/"; margin: 0 var(--s-4); color: var(--mute); }
.dir-path a { transition: color var(--d-fast) var(--ease); }
.dir-path a:hover { color: var(--ivory); }
.dir-path [aria-current] { color: var(--ivory-2); }
.dir-facts { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); }
.dir-facts div { display: grid; gap: var(--s-2); }
.dir-facts dt { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); order: 2; }
.dir-facts dd { font: var(--t-section); font-weight: 200; letter-spacing: -.06em; line-height: .9; color: var(--ivory); }
.dir-facts dd small { font-size: .42em; letter-spacing: -.02em; color: var(--ivory-2); margin-left: .1em; }
.dir-facts--sm dd { font: var(--t-part); font-weight: 200; letter-spacing: -.05em; line-height: 1; }
.ext { display: inline-block; flex: none; margin-left: .45em; vertical-align: .05em; transition: transform var(--d-mid) var(--slow); }
a:hover > .ext { transform: translate(2px, -2px); }
.svc__dead { display: block; margin-top: var(--s-1); font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dir-ok i { background: var(--ivory); border-color: var(--ivory); }
.dir-ok { color: var(--ivory); }

/* ---------- оглавление: гигантское слово с глобусом */
.dirx-hero { padding-top: clamp(64px, 8vw, 128px); }
.dirx-hero__t { position: relative; display: inline-block; font: var(--t-hero); font-size: clamp(40px, 9.3vw, 156px); letter-spacing: -.06em; line-height: .9; white-space: nowrap; }
/* глобус касается правого края «и» и выходит вверх над строкой: буквы не закрывает */
.dirx-hero__globe { position: absolute; left: calc(100% - .03em); bottom: -.16em; width: 1.68em; max-width: none; filter: drop-shadow(0 .14em .16em rgba(0, 0, 0, .6)); }
.dirx-hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-6); align-items: end; margin-top: clamp(40px, 4.4vw, 72px); }
.dirx-hero__foot .lede { grid-column: 1 / span 7; max-width: 46ch; }

/* ---------- оглавление: готовый справочник крупно, готовящиеся — строками с обложками статей по теме */
.dirx { padding-top: clamp(56px, 5.6vw, 88px); padding-bottom: var(--room); }
.dirx__list { border-top: 1px solid var(--rule-2); }
.dirx__no { font: var(--t-label); letter-spacing: .1em; color: var(--mute); }
.dirx__from, .dirx__note { font: var(--t-small); color: var(--ivory-2); max-width: 52ch; }
.dirx__note { font-size: 14px; color: var(--mute); }

.dirx-ready { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-5); align-items: start; padding-block: var(--s-7) var(--s-8); border-bottom: 1px solid var(--rule-2); }
.dirx-ready .dirx__no { grid-column: 1; padding-top: var(--s-2); }
.dirx-ready__n { --f: clamp(132px, 19vw, 330px); position: relative; grid-column: 2 / span 5; display: flex; align-items: flex-end; gap: var(--s-4); }
.dirx-ready__n b { position: relative; z-index: 2; font: var(--t-hero); font-weight: 200; font-size: var(--f); letter-spacing: -.075em; line-height: .76; margin-left: -.06em; }
.dirx-ready__n span { position: relative; z-index: 2; font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding-bottom: .3em; }
/* хромированное кольцо, как «о» в логотипе: лежит под «48», верхний край уходит за низ «8» — цифры идут поверх */
.dirx-ready__ring { position: absolute; z-index: 1; left: calc(var(--f) * .36); top: calc(var(--f) * .5); width: calc(var(--f) * .9); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.dirx-ready__txt { grid-column: 7 / span 6; display: grid; gap: var(--s-5); justify-items: start; }
.dirx-ready__t { font: var(--t-title-l); letter-spacing: -.04em; }
.dirx-ready__t a { display: inline-block; }
/* разделы — плитки: сколько записей, раздел, чем полезен */
.dirx-ready__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-block: 1px solid var(--rule); }
.dirx-ready__cats li + li { border-left: 1px solid var(--rule); }
.dirx-ready__cats a { display: grid; align-content: start; justify-items: start; gap: var(--s-2); height: 100%; padding: var(--s-4) var(--s-4) var(--s-5); }
.dirx-ready__cats li:first-child a { padding-left: 0; }
.dirx-ready__cats b { font: var(--t-part); font-weight: 200; letter-spacing: -.05em; line-height: 1; color: var(--ivory); transition: font-weight var(--d-mid) var(--slow); }
.dirx-ready__cats a:hover b, .dirx-ready__cats a:focus-visible b { font-weight: 420; }
.dirx-cat__t { font: var(--t-small); font-weight: 400; color: var(--ivory); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--d-mid) var(--slow); }
.dirx-ready__cats a:hover .dirx-cat__t { background-size: 100% 1px; }
.dirx-cat__d { font: var(--t-small); font-size: 14px; line-height: 1.4; color: var(--mute); }
/* полоса записей: штрих — запись, полый — ссылка не открылась; под курсором — название */
.dirx-bars-box { display: grid; gap: var(--s-3); width: 100%; }
.dirx-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.dirx-bars__g { display: contents; }
.dirx-bars__g + .dirx-bars__g > a:first-child { margin-left: var(--s-3); }
.dirx-bars a { position: relative; flex: 1 1 0; min-width: 0; height: 100%; background: var(--ivory-2); transition: height var(--d-mid) var(--slow), background-color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
.dirx-bars a.off { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); }
.dirx-bars a:hover { height: 132%; background: var(--ivory); }
.dirx-bars a.off:hover { background: var(--wall-3); box-shadow: inset 0 0 0 1px var(--ivory-2); }
.dirx-bars a::after { content: attr(data-n); position: absolute; bottom: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); padding: 3px 6px 2px; background: var(--ivory); color: var(--ink); font: var(--t-label); letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease); }
.dirx-bars__g:first-child a::after { left: 0; transform: none; }
.dirx-bars__g:last-child a::after { left: auto; right: 0; transform: none; }
.dirx-bars a:hover::after { opacity: 1; }
/* плитка раздела под курсором — его записи на полосе ярче, остальные гаснут */
.dirx-ready__txt:has(.dirx-ready__cats li:nth-child(1) > a:hover) .dirx-bars__g:not(:nth-child(1)) > a,
.dirx-ready__txt:has(.dirx-ready__cats li:nth-child(2) > a:hover) .dirx-bars__g:not(:nth-child(2)) > a,
.dirx-ready__txt:has(.dirx-ready__cats li:nth-child(3) > a:hover) .dirx-bars__g:not(:nth-child(3)) > a,
.dirx-ready__txt:has(.dirx-ready__cats li:nth-child(4) > a:hover) .dirx-bars__g:not(:nth-child(4)) > a,
.dirx-ready__txt:has(.dirx-ready__cats li:nth-child(5) > a:hover) .dirx-bars__g:not(:nth-child(5)) > a { opacity: .16; }
/* больше трёх разделов (лейблы — пять): плитки в два ряда, у первой в ряду нет черты слева */
.dirx-ready__cats li:nth-child(3n + 1) { border-left: 0; }
.dirx-ready__cats li:nth-child(3n + 1) a { padding-left: 0; }
.dirx-ready__cats li:nth-child(n + 4) { border-top: 1px solid var(--rule); }
.dirx-ready__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-2); }

.dirx-soon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-5); align-items: start; padding-block: var(--s-7) var(--s-8); border-bottom: 1px solid var(--rule); }
.dirx-soon .dirx__no { grid-column: 1; padding-top: var(--s-2); }
.dirx-soon__n { grid-column: 2 / span 3; font: var(--t-section); font-weight: 200; letter-spacing: -.06em; line-height: .9; color: var(--ivory-2); transition: color var(--d-mid) var(--ease); }
.dirx-soon__txt { grid-column: 5 / span 3; display: grid; gap: var(--s-4); justify-items: start; }
.dirx-soon__t { font: var(--t-title-s); letter-spacing: -.03em; color: var(--ivory-2); transition: color var(--d-mid) var(--ease); }
.dirx-soon:hover .dirx-soon__n, .dirx-soon:hover .dirx-soon__t, .dirx-soon:focus-within .dirx-soon__t { color: var(--ivory); }
.dirx-soon .dirx__from { font-size: 14px; line-height: 1.5; }
.dirx__read { display: grid; gap: var(--s-2); }
.dirx__read > p { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.dirx__read ul { display: grid; gap: var(--s-3); }
.dirx__read li { font: var(--t-small); font-size: 14px; line-height: 1.5; max-width: 46ch; }
.dirx__read a { color: var(--ivory); }

/* обложки статей по теме: стопкой, под курсором разлетаются и проявляются в цвете.
   Без курсора, без JS и при «меньше движения» лежат веером сразу, целиком видна каждая. */
/* --cw — ширина обложки в процентах от веера; сдвиги — в ширинах обложки: веер занимает всю ширину, стопка стоит посередине */
.dirx-fan { grid-column: 8 / span 5; display: grid; align-items: start; padding-top: var(--s-2);
  --cw: 46; --free: calc((100 - var(--cw)) / var(--cw) * 100%); --step: 0%; --x0: calc(var(--free) / 2); --px0: var(--x0); }
.dirx-fan[data-n="2"] { --step: var(--free); --x0: 0%; --px0: calc((var(--free) - 12%) / 2); }
.dirx-fan[data-n="3"] { --step: calc(var(--free) / 2); --x0: 0%; --px0: calc((var(--free) - 24%) / 2); }
.dirx-fan__c { grid-area: 1 / 1; display: block; width: calc(var(--cw) * 1%); --k: 0; --sy: 6%; --x: calc(var(--x0) + var(--k) * var(--step)); --y: var(--sy);
  transform: translate(var(--x), var(--y)) scale(var(--s, 1)); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); transition: transform var(--d-slow) var(--slow); }
.dirx-fan__c:nth-child(1) { z-index: 3; }
.dirx-fan__c:nth-child(2) { z-index: 2; --k: 1; --sy: -7%; }
.dirx-fan__c:nth-child(3) { z-index: 1; --k: 2; --sy: 10%; }
.dirx-fan__c img { width: 100%; height: auto; transition: filter var(--d-mid) var(--ease); }
.dirx-fan__c:hover,
.dirx-soon:has(.dirx__read li:nth-child(1) a:hover) .dirx-fan__c:nth-child(1),
.dirx-soon:has(.dirx__read li:nth-child(2) a:hover) .dirx-fan__c:nth-child(2),
.dirx-soon:has(.dirx__read li:nth-child(3) a:hover) .dirx-fan__c:nth-child(3),
.dirx-soon:has(.dirx__from a:hover) .dirx-fan__c--from { z-index: 5; --s: 1.06; }
@media (hover: hover) {
  .dirx-fan__c img { filter: grayscale(1) contrast(1.08) brightness(.72); }
  .dirx-soon:hover .dirx-fan__c img, .dirx-soon:focus-within .dirx-fan__c img { filter: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .js .dirx-fan__c { --x: calc(var(--px0) + var(--k) * 12%); --y: calc(var(--k) * -9%); }
  .js .dirx-soon:hover .dirx-fan__c, .js .dirx-soon:focus-within .dirx-fan__c { --x: calc(var(--x0) + var(--k) * var(--step)); --y: var(--sy); }
  .dirx-fan__c:nth-child(2) { transition-delay: 50ms; }
  .dirx-fan__c:nth-child(3) { transition-delay: 100ms; }
}

/* ---------- оглавление: светлая полоса с записями */
.dirx-peek { padding-block: clamp(72px, 8vw, 128px); }
.dirx-peek__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-4); align-items: end; margin-bottom: clamp(40px, 4.4vw, 64px); }
.dirx-peek__head .eyebrow { grid-column: 1 / -1; }
.dirx-peek__t { grid-column: 1 / span 8; font: var(--t-section); letter-spacing: -.055em; }
.dirx-peek__head .more { grid-column: 10 / span 3; justify-self: end; }
.dirx-peek__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-8); }
.dirx-peek__col { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
.dirx-peek__h { font: var(--t-title-s); letter-spacing: -.03em; width: 100%; padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); }
.dirx-peek__h sup, .svc-group__t sup, .dir-cat sup { font: var(--t-label); letter-spacing: .06em; margin-left: .5em; vertical-align: super; }
.dirx-peek__h sup { color: var(--fog-mute); }
.dirx-peek__col ul { width: 100%; }
.dirx-peek__col li { border-bottom: 1px solid var(--fog-rule); }
.dirx-peek__col li a { display: grid; gap: var(--s-1); padding-block: var(--s-4); transition: padding var(--d-mid) var(--slow); }
.dirx-peek__col li a:hover { padding-left: var(--s-2); }
.dirx-peek__col li b { font: var(--t-card); }
.dirx-peek__col li span { font: var(--t-small); font-size: 14.5px; color: var(--fog-ink-2); }

/* ---------- справочник: шапка */
.dir-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-6); align-items: end; padding-top: clamp(56px, 7vw, 112px); padding-bottom: clamp(40px, 4.4vw, 72px); }
.dir-head__t { grid-column: 1 / span 8; font: var(--t-title); letter-spacing: -.055em; line-height: .94; }
.dir-head__t .it { margin-left: .06em; }
.dir-head__aside { grid-column: 9 / span 4; display: grid; gap: var(--s-6); padding-bottom: .4em; }
.dir-head__d { font: var(--t-small); font-size: 16px; color: var(--ivory-2); max-width: 40ch; }

/* ---------- справочник: поиск и фильтр (липнут под шапкой на широком экране) */
.dir-tools { position: relative; z-index: 20; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); background: var(--wall); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.dir-tools__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cg); row-gap: var(--s-3); align-items: center; padding-block: var(--s-4); }
.dir-q { position: relative; display: flex; align-items: center; gap: var(--s-3); color: var(--ivory-2); }
.dir-q input { flex: 1; min-width: 0; height: 48px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; font: var(--t-title-s); font-weight: 300; letter-spacing: -.02em; color: var(--ivory); transition: border-color var(--d-fast) var(--ease); }
.dir-q input::placeholder { color: var(--mute); }
.dir-q input:focus { outline: none; border-bottom-color: var(--ivory); }
.dir-q input:focus-visible { box-shadow: 0 1px 0 0 var(--ivory); }
.dir-q input::-webkit-search-cancel-button { filter: invert(.85); }
.dir-cats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); justify-content: flex-end; }
.dir-cat { padding: var(--s-2) 0; background: none; border: 0; cursor: pointer; font: var(--t-small); font-size: 14.5px; font-weight: 400; color: var(--ivory-2); text-underline-offset: 6px; text-decoration-thickness: 1px; transition: color var(--d-fast) var(--ease); }
.dir-cat:hover { color: var(--ivory); }
.dir-cat[aria-pressed="true"] { color: var(--ivory); text-decoration: underline; }
.dir-cat sup { display: inline-block; color: var(--mute); }
.dir-count { grid-column: 1 / -1; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.dir-empty { padding-block: var(--s-8); font: var(--t-lede); color: var(--ivory-2); }
.dir-empty button { padding: 0; background: none; border: 0; border-bottom: 1px solid var(--rule-2); font: inherit; color: var(--ivory); cursor: pointer; }
.dir-empty button:hover { border-color: var(--ivory); }

/* ---------- справочник: таблица-список
   Строка — li.svc. Панель «Услуги» в шапке — тоже .svc (div, css/components/svc.css), поэтому сетка, отступы и подсветка
   строки — только для li: :where(li) не меняет вес правила, перекрытия ниже работают как раньше */
.dir-list { padding-bottom: var(--room); }
.svc-cols, .svc:where(li) { display: grid; grid-template-columns: 3.4em minmax(0, 2.6fr) minmax(0, 5fr) minmax(0, 1.7fr) minmax(0, 2.1fr); column-gap: var(--cg); }
.svc-cols { padding-block: var(--s-5) var(--s-3); font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.svc-group { padding-top: var(--s-7); scroll-margin-top: 220px; }
.svc-group__t { font: var(--t-part); letter-spacing: -.045em; padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule-2); }
.svc-group__t sup { color: var(--mute); }
.svc:where(li) { align-items: baseline; row-gap: var(--s-1); padding-block: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); scroll-margin-top: 240px; transition: background-color var(--d-fast) var(--ease); }
.svc:where(li):hover { background: var(--wall-2); }
.svc:where(li):target { background: var(--wall-3); box-shadow: inset 2px 0 0 var(--red); }
.svc__n { font: var(--t-label); letter-spacing: .06em; color: var(--mute); padding-left: var(--s-2); transition: color var(--d-fast) var(--ease); }
.svc:hover .svc__n { color: var(--red-ink); }
.svc__t { font: var(--t-title-s); letter-spacing: -.03em; overflow-wrap: anywhere; }
.svc__t a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.svc__t a:hover { background-size: 0 1px; background-position: 100% 100%; transition: background-size var(--d-mid) var(--slow); }
.svc__d { font: var(--t-small); color: var(--ivory-2); max-width: 64ch; }
.svc__c { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.svc__go { font: var(--t-caption); letter-spacing: .02em; color: var(--ivory); overflow-wrap: anywhere; }
.svc__go a { border-bottom: 1px solid var(--rule-2); transition: border-color var(--d-fast) var(--ease); }
.svc__go a:hover { border-color: var(--ivory); }
.svc mark { background: none; color: var(--ivory); box-shadow: inset 0 -.32em 0 rgba(227, 6, 19, .55); }
/* лейблы: город, год, жанры под описанием; вместо категории — как отправить демо */
.svc__d > p + p { margin-top: var(--s-2); }
.svc__meta { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.svc__demo { display: flex; align-items: baseline; gap: var(--s-2); }
.svc__demo::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--mute); transform: translateY(-1px); }
.svc__demo.is-on { color: var(--ivory); }
.svc__demo.is-on::before { background: var(--red); border-color: var(--red); }
.dir-demo { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.dir-demo i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transform: translateY(-1px); transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.dir-demo[aria-pressed="true"] i { background: var(--red); border-color: var(--red); }
.dir-src { display: grid; grid-template-columns: 3.4em minmax(0, 2.6fr) minmax(0, 8.8fr); column-gap: var(--cg); row-gap: var(--s-2); align-items: baseline; margin-top: var(--s-7); font: var(--t-small); font-size: 14.5px; color: var(--ivory-2); }
.dir-src .eyebrow { grid-column: 1 / span 2; }
.dir-src > span:last-child { grid-column: 3; max-width: 88ch; }

/* ---------- справочник: светлая полоса — статья-источник и остальные справочники */
.dir-band { padding-block: clamp(72px, 8vw, 120px); }
.dir-band__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-8); align-items: start; }
.dir-origin { grid-column: 1 / span 6; display: grid; grid-template-columns: clamp(120px, 12vw, 180px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.dir-origin__pic { display: block; aspect-ratio: 1; overflow: hidden; background: var(--fog-2); }
.dir-origin__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform var(--d-slow) var(--slow); }
.dir-origin:hover .dir-origin__pic img { transform: scale(1.04); }
.dir-origin__txt { display: grid; gap: var(--s-3); justify-items: start; }
.dir-origin__t { font: var(--t-title-m); letter-spacing: -.04em; }
.dir-origin__v { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fog-mute); }
.dir-origin__v b { font-weight: 400; color: var(--ink); }
.dir-more { grid-column: 8 / span 5; display: grid; gap: var(--s-5); justify-items: start; }
.dir-more__h { font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--fog-mute); }
.dir-more ul { width: 100%; border-top: 1px solid var(--fog-rule); }
.dir-more li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid var(--fog-rule); }
.dir-more__n { font: var(--t-title-s); font-weight: 300; letter-spacing: -.04em; color: var(--fog-ink-2); }
.dir-more__t { font: var(--t-small); font-size: 16px; color: var(--ink); }
.fog .state { color: var(--fog-mute); }
.fog .state--closed i { border-color: var(--fog-mute); }
.fog .dir-ok { color: var(--ink); }
.fog .dir-ok i { background: var(--ink); border-color: var(--ink); }
a.dir-more__t { justify-self: start; }

/* ---------- одна запись */
.rec { padding-top: clamp(56px, 7vw, 112px); padding-bottom: var(--room); }
.rec__head { position: relative; display: grid; gap: var(--s-5); padding-right: var(--s-7); }
.rec__k { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.rec__k a { color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.rec__k a:hover { color: var(--ivory); }
.rec__t { font: var(--t-hero); letter-spacing: -.06em; line-height: .86; overflow-wrap: anywhere; }
.rec__t--long { font: var(--t-title); letter-spacing: -.055em; }
.rec__side { position: absolute; right: 0; top: 0; writing-mode: vertical-rl; font: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rec__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-7); margin-top: clamp(40px, 4.4vw, 72px); padding-top: var(--s-6); border-top: 1px solid var(--rule-2); }
.rec__main { grid-column: 1 / span 7; display: grid; gap: var(--s-6); justify-items: start; align-content: start; }
.rec__d { font: var(--t-lede); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.45; color: var(--ivory); max-width: 34ch; }
.rec__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.rec__facts { grid-column: 9 / span 4; display: grid; align-content: start; }
.rec__facts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.rec__facts div:first-child { padding-top: 0; }
.rec__facts dt { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: .25em; }
.rec__facts dd { font: var(--t-small); font-size: 15px; color: var(--ivory-2); overflow-wrap: anywhere; }
.rec__facts dd a { color: var(--ivory); }
/* лейбл: как отправить демо — красная черта слева, адрес крупно */
.demo { display: grid; gap: var(--s-3); justify-items: start; width: 100%; max-width: 46rem; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 2px solid var(--red); }
.demo .eyebrow { color: var(--mute); }
.demo__how { display: grid; gap: var(--s-2); font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-2); }
.demo__v { font: var(--t-title-s); font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; text-transform: none; color: var(--ivory); overflow-wrap: anywhere; }
.demo__v .ulink { color: inherit; }
.demo--off { border-left-color: var(--rule-2); }
.demo--off .demo__how { font: var(--t-title-s); font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; text-transform: none; color: var(--ivory-2); }
.demo__note { font: var(--t-small); font-size: 15.5px; color: var(--ivory-2); max-width: 52ch; }
.demo__src { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.demo__src a { color: var(--ivory-2); text-transform: none; letter-spacing: .02em; }

/* 9 правил письма лейблу: номера моно, правила в две колонки; в конце — PDF через бота */
.rules { display: grid; gap: var(--s-5); justify-items: start; align-content: start; }
.rules .eyebrow { color: var(--mute); }
.rules ol { width: 100%; border-top: 1px solid var(--rule); }
.rules li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.rules li span { font: var(--t-label); letter-spacing: .06em; color: var(--red-ink); padding-top: .3em; }
.rec__rules { margin-top: var(--s-8); }
.rec__rules ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); border-top: 0; }
.rec__rules li { border-top: 1px solid var(--rule); border-bottom: 0; }

/* лейблы: вопросы и ответы — слева раскрывающиеся вопросы, справа 9 правил */
.dir-faq { padding-bottom: var(--room); }
.dir-faq__t { font: var(--t-section); letter-spacing: -.055em; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule-2); }
.dir-faq__t .it { margin-left: .06em; }
.dir-faq__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-8); align-items: start; }
.faq { grid-column: 1 / span 7; }
.dir-faq__rules { grid-column: 9 / span 4; padding-top: var(--s-6); }
.faq__q { border-bottom: 1px solid var(--rule); }
.faq__q summary { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 20px; column-gap: var(--s-3); align-items: baseline; padding-block: var(--s-5); cursor: pointer; list-style: none; font: var(--t-title-s); letter-spacing: -.03em; color: var(--ivory); }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary span { font: var(--t-label); letter-spacing: .06em; color: var(--mute); }
.faq__q summary::after { content: "+"; font: var(--t-title-s); font-weight: 200; color: var(--ivory-2); justify-self: end; transition: transform var(--d-mid) var(--slow); }
.faq__q[open] summary::after { transform: rotate(45deg); }
.faq__q summary:hover span { color: var(--red-ink); }
.faq__a { padding: 0 0 var(--s-6) calc(3.4em + var(--s-3)); font: var(--t-small); font-size: 16px; line-height: 1.6; color: var(--ivory-2); max-width: 70ch; }
.faq__a a { color: var(--ivory); }
.faq__rules { display: grid; gap: var(--s-1); list-style: decimal; padding-left: 1.4em; }

.dir-help { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) auto; column-gap: var(--cg); row-gap: var(--s-3); align-items: baseline; margin-top: var(--s-8); padding-block: var(--s-5); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.dir-help__t { font: var(--t-small); font-size: 16px; color: var(--ivory-2); }
.dir-help__t b { font-weight: 500; color: var(--ivory); }

.likes { padding-block: clamp(72px, 8vw, 120px); }
.likes__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4) var(--s-6); margin-bottom: clamp(32px, 3.4vw, 56px); }
.likes__t { font: var(--t-section); letter-spacing: -.055em; }
.likes__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.like { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3); padding: var(--s-5) clamp(16px, 1.8vw, 28px) var(--s-6); }
.like + .like { border-left: 1px solid var(--fog-rule); }
.like:first-child { padding-left: 0; }
.like__n { font: var(--t-label); letter-spacing: .1em; color: var(--fog-mute); }
.like__t { font: var(--t-title-s); letter-spacing: -.03em; overflow-wrap: anywhere; }
.like__d { font: var(--t-small); font-size: 14.5px; color: var(--fog-ink-2); }
.like__go { font: var(--t-caption); overflow-wrap: anywhere; }
.fog .svc__dead { color: var(--fog-mute); }

/* ---------- точки перелома */
@media (min-width: 961px) {
  .dir-tools { position: sticky; top: 76px; }
}
@media (max-width: 1180px) {
  .dir-src { grid-template-columns: 3em minmax(0, 2.6fr) minmax(0, 7.2fr); }
  .svc-cols, .svc:where(li) { grid-template-columns: 3em minmax(0, 2.6fr) minmax(0, 5fr) minmax(0, 2.2fr); }
  .svc__c { display: none; }
  .svc-cols span:nth-child(4) { display: none; }
  /* лейблы: способ отправки демо не прячем — встаёт под описание, сайт остаётся справа */
  .svc__demo { display: flex; grid-row: 2; grid-column: 3; }
  .svc:has(.svc__demo) .svc__go { grid-row: 1; grid-column: 4; }
  .dirx-ready__n { --f: 14.5vw; grid-column: 2 / span 4; }   /* «48» и «записей» помещаются в четыре колонки */
  .dirx-ready__txt { grid-column: 6 / span 7; }
  .dirx-soon__n, .dirx-soon__txt { grid-column: 2 / span 5; }
  .dirx-soon__txt { grid-row: 2; }
  .dirx-fan { grid-column: 7 / -1; grid-row: 1 / span 2; }
}
@media (max-width: 960px) {
  .dirx-hero__foot .lede { grid-column: 1 / -1; }
  .dirx-ready__n { --f: clamp(132px, 19vw, 330px); grid-column: 2 / -1; padding-bottom: calc(var(--f) * .66); }   /* место под кольцом: текст идёт ниже */
  .dirx-ready__txt { grid-column: 2 / -1; }
  .dirx-soon__n, .dirx-soon__txt, .dirx-fan { grid-column: 2 / -1; grid-row: auto; }
  .dirx-fan { --cw: 40; padding-top: 0; }
  .dirx-peek__t { grid-column: 1 / -1; }
  .dirx-peek__head .more { grid-column: 1 / -1; justify-self: start; }
  .dirx-peek__cols { grid-template-columns: 1fr; }
  .dir-head__t, .dir-head__aside { grid-column: 1 / -1; }
  .dir-tools__in { grid-template-columns: 1fr; }
  .dir-cats { justify-content: flex-start; }
  .svc-cols { display: none; }
  .svc:where(li) { grid-template-columns: 2.6em minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-2); }
  .svc__n { grid-row: 1; padding-left: 0; }
  .svc__t, .svc__d, .svc__go, .svc__c { grid-column: 2; }
  .svc__c { display: block; grid-row: 4; }
  .svc__demo { display: flex; grid-column: 2; }
  .svc:has(.svc__demo) .svc__go { grid-row: 3; grid-column: 2; }
  .svc__go { grid-row: 3; margin-top: var(--s-1); }
  .dir-src { grid-template-columns: 1fr; }
  .dir-src .eyebrow, .dir-src > span:last-child { grid-column: 1; }
  .dir-origin, .dir-more { grid-column: 1 / -1; }
  .rec__main, .rec__facts { grid-column: 1 / -1; }
  .dir-help { grid-template-columns: 1fr; justify-items: start; }
  .faq, .dir-faq__rules { grid-column: 1 / -1; }
  .dir-faq__rules { padding-top: 0; }
  .rec__rules ol { grid-template-columns: 1fr; }
  .likes__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .like:nth-child(3) { border-left: 0; padding-left: 0; }
  .like:nth-child(n + 3) { border-top: 1px solid var(--fog-rule); }
}
@media (max-width: 640px) {
  .dir-bar { padding-top: var(--s-5); }
  .dir-bar > .eyebrow { margin-left: 0; }
  .dir-path li:not(:last-child)::after { margin: 0 var(--s-2); }
  .dirx-hero { padding-top: clamp(96px, 30vw, 132px); }
  .dirx-hero__t { font-size: 10.6vw; }
  /* на телефоне справа места нет: глобус садится на верхний край последних букв */
  .dirx-hero__globe { left: auto; right: -.1em; bottom: calc(100% - .27em); width: 1.9em; }
  .dir-facts { gap: var(--s-5) var(--s-6); }
  .dir-facts dd { font-size: 52px; }
  .dirx-ready { padding-block: var(--s-6) var(--s-7); }
  .dirx-ready .dirx__no, .dirx-ready__n, .dirx-ready__txt { grid-column: 1 / -1; }
  .dirx-ready__n { --f: 46vw; }
  .dirx-ready__cats { grid-template-columns: 1fr; }
  .dirx-ready__cats li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .dirx-ready__cats a { grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); padding: var(--s-4) 0; }
  .dirx-ready__cats b { grid-row: 1 / span 2; font-size: 34px; }
  .dirx-soon { grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-4); padding-block: var(--s-5) var(--s-6); }
  .dirx-soon .dirx__no { grid-column: 1 / -1; }
  .dirx-soon__n { grid-column: 1; grid-row: 2; font-size: 38px; }
  /* название — рядом с числом, остальное — во всю ширину */
  .dirx-soon__txt { display: contents; }
  .dirx-soon__t { grid-column: 2; grid-row: 2; align-self: center; }
  .dirx-soon__txt > :not(.dirx-soon__t) { grid-column: 1 / -1; }
  /* на телефоне обложки рядом, без нахлёста: каждая целиком */
  .dirx-fan { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); }
  .dirx-fan__c { grid-area: auto; width: auto; transform: none; }
  .dirx-peek__t { font-size: 8.4vw; }
  .dir-head__t { font-size: clamp(38px, 11vw, 52px); }
  .dir-q input { font-size: 18px; }
  .rec__head { padding-right: var(--s-6); }
  .rec__t { font-size: clamp(52px, 16vw, 72px); }
  .rec__t--long { font-size: clamp(34px, 10vw, 48px); }
  .rec__facts div { grid-template-columns: 6.5em minmax(0, 1fr); }
  .demo { padding-left: var(--s-4); }
  .dir-faq__t { font-size: clamp(38px, 11vw, 52px); }
  .faq__q summary { grid-template-columns: 2.4em minmax(0, 1fr) 16px; font-size: 19px; }
  .faq__a { padding-left: 0; }
  .dirx-ready__cats li:nth-child(n) a { padding-left: 0; }
  .dir-origin { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); }
  .dir-origin__t { font-size: 21px; }
  .likes__row { grid-template-columns: 1fr; }
  .like, .like:nth-child(n) { border-left: 0; padding-inline: 0; }
  .like + .like { border-top: 1px solid var(--fog-rule); }
}

/* медиа для питчинга (тема: inc/dir-media.php): сроки и цена в «Как отправить трек», подводка раздела списка, папка для редакции рядом с вопросами */
.pitch__terms { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); color: var(--ivory); }
.pitch__terms b { margin-right: .6em; font: var(--t-label); font-weight: inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.svc-group__d { padding-top: var(--s-3); font: var(--t-small); font-size: 15px; color: var(--ivory-2); max-width: 72ch; }
.pitch__side { display: grid; gap: var(--s-8); align-content: start; }
.faq__list { list-style: none; padding-left: 0; gap: var(--s-2); }

/* ---------- площадки и клубы (build/sections/venues.py): лестница залов, второй ряд фильтра, города, вопросы, одна площадка */
/* лестница: штрих — площадка, по вместимости в логарифме; высота растёт вместе с залом — ступени слева направо */
.vn-lad { padding-block: var(--s-7) var(--s-8); }
.vn-lad__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-3); align-items: end; margin-bottom: var(--s-6); }
.vn-lad__t { grid-column: 1 / span 6; font: var(--t-part); letter-spacing: -.05em; }
.vn-lad__t .it { margin-left: .04em; }
.vn-lad__d { grid-column: 8 / span 5; font: var(--t-small); font-size: 15px; color: var(--ivory-2); max-width: 46ch; }
.vn-lad__scale { position: relative; height: clamp(120px, 12vw, 180px); padding-bottom: 28px; }
.vn-lad__z { position: absolute; top: 0; bottom: 28px; left: var(--a); width: calc(var(--b) - var(--a)); border-left: 1px solid var(--rule); }
.vn-lad__z--m { background: linear-gradient(to top, rgba(239, 232, 220, .035), transparent); }
.vn-lad__z--l { background: linear-gradient(to top, rgba(239, 232, 220, .07), transparent); }
.vn-lad__ticks { position: absolute; inset: 0 0 28px 0; }
.vn-lad__i { position: absolute; bottom: 0; left: var(--x); width: 2px; height: calc(14% + var(--x) * .86); margin-left: -1px; background: var(--ivory-2); transition: height var(--d-mid) var(--slow), background-color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
a.vn-lad__i:hover, a.vn-lad__i:focus-visible { z-index: 2; height: calc(24% + var(--x) * .86); background: var(--ivory); }
.vn-lad__i.out { opacity: .14; }
a.vn-lad__i::after { content: attr(data-n); position: absolute; bottom: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); padding: 3px 6px 2px; background: var(--ivory); color: var(--ink); font: var(--t-label); letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease); }
a.vn-lad__i[style*="--x:0"]::after, a.vn-lad__i[style*="--x:1"]::after { left: 0; transform: none; }
a.vn-lad__i[style*="--x:9"]::after, a.vn-lad__i[style*="--x:8"]::after { left: auto; right: 0; transform: none; }
a.vn-lad__i:hover::after { opacity: 1; }
.vn-lad__axis { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; border-top: 1px solid var(--rule-2); }
.vn-lad__ax { position: absolute; top: var(--s-2); left: var(--x); transform: translateX(-50%); font: var(--t-label); letter-spacing: .06em; color: var(--mute); }
.vn-lad__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); margin-top: var(--s-6); }
.vn-tier { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0 0; background: none; border: 0; border-top: 1px solid var(--rule-2); text-align: left; color: var(--ivory-2); cursor: pointer; transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.vn-tier b { grid-row: 1 / span 2; font: var(--t-part); font-weight: 200; letter-spacing: -.05em; line-height: 1; color: var(--ivory); }
.vn-tier__t { font: var(--t-title-s); letter-spacing: -.02em; }
.vn-tier__d { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.vn-tier:hover { color: var(--ivory); border-color: var(--ivory-2); }
.vn-tier[aria-pressed="true"] { color: var(--ivory); border-top: 1px solid var(--ivory); box-shadow: inset 0 1px 0 var(--ivory); }
.vn-tier:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
/* второй ряд фильтра — размер — под категориями; счётчик слева от него */
.dir-cats--f { grid-column: 2; }
.dir-tools__in:has(.dir-cats--f) .dir-count { grid-column: 1; grid-row: 2; }
/* строка площадки: формат и жанры под названием, город и вместимость, способ заявки под сайтом */
.vn__t { font: inherit; letter-spacing: inherit; }
.vn__k { margin-top: var(--s-2); font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.vn .svc__c { color: var(--ivory-2); }
.vn__b { display: block; margin-top: var(--s-1); font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.vn-jump { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); padding-top: var(--s-4); font: var(--t-small); font-size: 14.5px; }
.vn-jump a { color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.vn-jump a:hover { color: var(--ivory); }
.vn-jump sup { margin-left: .4em; font: var(--t-label); color: var(--mute); vertical-align: super; }
.vn-city { padding-top: var(--s-7); scroll-margin-top: 220px; }
.vn-city__t { font: var(--t-title-m); letter-spacing: -.04em; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule-2); }
.vn-city__t sup { margin-left: .5em; font: var(--t-label); letter-spacing: .06em; color: var(--mute); vertical-align: super; }
/* вопросы артистов: открытым текстом, две колонки */
.vn-faq { padding-block: var(--room) 0; }
.vn-faq__head { display: grid; gap: var(--s-4); margin-bottom: clamp(32px, 3.4vw, 56px); }
.vn-faq__t { font: var(--t-section); letter-spacing: -.055em; }
.vn-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); }
.vn-faq__i { display: grid; gap: var(--s-3); align-content: start; padding-block: var(--s-5) var(--s-6); border-top: 1px solid var(--rule-2); scroll-margin-top: 120px; }
.vn-faq__q { font: var(--t-title-s); letter-spacing: -.03em; color: var(--ivory); }
.vn-faq__a { font: var(--t-small); font-size: 16px; color: var(--ivory-2); max-width: 60ch; }
.vn-faq__i:target { box-shadow: inset 2px 0 0 var(--red); padding-left: var(--s-4); }
.vn-help { margin-top: var(--room); }
/* как собрали и открытые данные */
.vn-src { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-5); padding-block: var(--s-8) var(--room); }
.vn-src > .eyebrow { grid-column: 1 / span 2; }
.vn-src__txt { grid-column: 3 / span 5; display: grid; gap: var(--s-3); font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.vn-src__data { grid-column: 9 / span 4; display: grid; gap: var(--s-3); align-content: start; font: var(--t-small); font-size: 14.5px; color: var(--ivory-2); }
.vn-src__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: var(--t-ui); font-size: 16px; }
.vn-src__links a { color: var(--ivory); }
.vn-src__cite { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.vn-src__cite q { font: var(--t-caption); color: var(--ivory); overflow-wrap: anywhere; }
.vn-reads { grid-column: 1 / span 6; display: grid; gap: var(--s-5); }
.vn-reads ul { border-top: 1px solid var(--fog-rule); }
.vn-reads li { padding-block: var(--s-3); border-bottom: 1px solid var(--fog-rule); font: var(--t-small); font-size: 16px; }
.dirx-peek__cols:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* одна площадка: огромное число мест и её место на лестнице, как предложить концерт, проверка и источники */
.vn-cap { display: grid; gap: var(--s-3); width: 100%; max-width: 560px; }
.vn-cap__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.vn-cap__n b { font: var(--t-section); font-weight: 200; letter-spacing: -.06em; line-height: .9; color: var(--ivory); }
.vn-cap__n span { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-2); }
.vn-cap__lad { position: relative; height: 56px; border-bottom: 1px solid var(--rule-2); }
.vn-cap__lad .vn-lad__ticks { inset: 0; }
.vn-cap__lad .vn-lad__i { width: 1px; margin-left: 0; background: var(--mute); }
.vn-cap__lad .vn-lad__i.is-me { z-index: 1; width: 3px; margin-left: -1px; height: 100%; background: var(--red); }
.vn-cap__k { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.vn-book { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule-2); }
.vn-book__t { grid-column: 1 / span 5; font: var(--t-part); letter-spacing: -.05em; }
.vn-book__dl { grid-column: 6 / -1; display: grid; }
.vn-book__dl div { display: grid; grid-template-columns: 10em minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.vn-book__dl div:first-child { padding-top: 0; }
.vn-book__dl dt { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: .3em; }
.vn-book__dl dd { font: var(--t-title-s); font-weight: 300; letter-spacing: -.02em; color: var(--ivory); overflow-wrap: anywhere; }
.vn-book__more { grid-column: 6 / -1; font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.vn-proof { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--cg); row-gap: var(--s-2); margin-top: var(--s-7); font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.vn-proof__src { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--cg); margin-top: var(--s-4); }
.vn-proof__src ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: var(--t-caption); }
@media (max-width: 1180px) {
  .vn .svc__c { display: block; grid-column: 2; grid-row: 2; }
  .vn-src__txt { grid-column: 3 / span 6; }
  .vn-src__data { grid-column: 3 / -1; }
}
@media (max-width: 960px) {
  .vn-lad__t, .vn-lad__d { grid-column: 1 / -1; }
  .dir-cats--f { grid-column: 1; }
  .dir-tools__in:has(.dir-cats--f) .dir-count { grid-row: auto; }
  .vn .svc__c { grid-row: 2; }      /* город и вместимость — сразу под названием */
  .vn .svc__d { grid-row: 3; }
  .vn .svc__go { grid-row: 4; }
  .vn-faq__list { grid-template-columns: 1fr; }
  .vn-src > .eyebrow, .vn-src__txt, .vn-src__data { grid-column: 1 / -1; }
  .vn-reads { grid-column: 1 / -1; }
  .dirx-peek__cols:has(> :nth-child(4)) { grid-template-columns: 1fr; }
  .vn-book__t, .vn-book__dl, .vn-book__more { grid-column: 1 / -1; }
  .vn-proof, .vn-proof__src { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vn-lad { padding-block: var(--s-6); }
  .vn-lad__scale { height: 112px; }
  .vn-lad__ax:first-child { transform: none; }
  .vn-lad__tiers { column-gap: var(--s-3); }
  .vn-tier { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .vn-tier b { grid-row: auto; font-size: 30px; }
  .vn-tier__t { font-size: 15px; }
  .vn-tier__d { font-size: 10px; letter-spacing: .06em; }
  .vn-book__dl div { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .vn-cap__n b { font-size: 64px; }
}

/* ---------- дистрибьюторы (тема: inc/dir-distribyutory.php, DS: build/sections/dir_distr.py): наша услуга, кто питчит, условия записи */
/* шапка: «Дистрибьюторы» — длинное слово, кегль меньше, чтобы не наезжать на подводку справа */
.dst-head .dir-head__t { font-size: clamp(40px, 6.6vw, 100px); }
/* наша услуга — своя полоса над списком: красная точка «это мы», цифры, три тарифа, барабан площадок (CSS 3D из agency.css) */
.dst-us { position: relative; border-top: 1px solid var(--rule-2); background: radial-gradient(110% 80% at 92% 0%, rgba(227, 6, 19, .17), transparent 62%), var(--wall-2); }
.dst-us__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-7); padding-block: clamp(64px, 7vw, 112px); }
.dst-us__txt { grid-column: 1 / span 7; display: grid; gap: var(--s-5); align-content: start; }
.dst-us__k { display: inline-flex; align-items: baseline; gap: var(--s-3); color: var(--ivory-2); }
.dst-us__k i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(227, 6, 19, .18); transform: translateY(-1px); }
.dst-us__t { font: var(--t-section); letter-spacing: -.055em; }
.dst-us__t .it { margin-left: .06em; }
.dst-us__d { font: var(--t-lede); color: var(--ivory-2); max-width: 46ch; }
.dst-us__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: var(--s-5) var(--cg); margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.dst-us__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); }
.dst-us__stats dd { font: var(--t-title-m); letter-spacing: -.045em; color: var(--ivory); white-space: nowrap; }
.dst-us__stats dt { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); max-width: 20ch; }
.dst-us__fig { grid-column: 9 / span 4; container-type: inline-size; display: grid; align-content: center; gap: var(--s-4); }
.dst-reel { --h: clamp(48px, 15cqi, 72px); }
.dst-reel .reel__drum li { padding-inline: var(--s-4); font-size: clamp(18px, 8cqi, 30px); }
.dst-reel__note { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-2); }
.dst-us__plans { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.dst-plan { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5) var(--cg) var(--s-6) 0; }
.dst-plan + .dst-plan { padding-left: var(--cg); border-left: 1px solid var(--rule); }
.dst-plan__n { display: flex; align-items: baseline; gap: var(--s-2); font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-2); }
.dst-plan--accent .dst-plan__n::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: translateY(-1px); }
.dst-plan__p { font: var(--t-part); letter-spacing: -.05em; color: var(--ivory); white-space: nowrap; }
.dst-plan__s { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dst-plan ul { display: grid; gap: var(--s-2); margin-top: var(--s-3); font: var(--t-small); font-size: 14.5px; color: var(--ivory-2); }
.dst-plan li { position: relative; padding-left: 1.3em; }
.dst-plan li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6em; height: 1px; background: var(--mute); }
.dst-us__plus { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--cg); font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.dst-us__plus li { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.dst-us__go { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: var(--s-4) var(--s-6); padding-top: var(--s-2); }
.dst-us__src { grid-column: 1 / -1; font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); max-width: 120ch; }
.dst-us__src a { color: var(--ivory-2); text-transform: none; letter-spacing: .02em; }
/* в списке: строка нашей услуги — красная черта слева и метка «это мы» */
.dst-row--us { box-shadow: inset 2px 0 0 var(--red); }
.dst-row__us, .dst-mx__tb tbody th small { margin-left: var(--s-3); font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; vertical-align: .25em; }
.rec__k .dst-row__us { margin-left: 0; vertical-align: baseline; }

/* кто питчит в редакции: строки — дистрибьюторы, столбцы — площадки; красная точка — питчит сам, точка в кольце — передаёт форму из кабинета */
.dst-mx { padding-block: clamp(64px, 7vw, 112px) var(--s-8); }
.dst-mx__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-4); align-items: end; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule-2); }
.dst-mx__t { grid-column: 1 / span 7; font: var(--t-section); letter-spacing: -.055em; }
.dst-mx__t .it { margin-left: .06em; }
.dst-mx__d { grid-column: 9 / span 4; font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.dst-mx__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.dst-mx__scroll:focus-visible { outline-offset: 4px; }
.dst-mx__tb { width: 100%; min-width: 680px; border-collapse: collapse; }
.dst-mx__tb th, .dst-mx__tb td { padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.dst-mx__tb thead th { padding-block: var(--s-5) var(--s-3); font: var(--t-label); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.dst-mx__tb thead th:first-child, .dst-mx__tb thead th:nth-child(2), .dst-mx__tb tbody th, .dst-mx__tb .dst-mx__how { text-align: left; }
.dst-mx__tb tbody th { padding-left: 0; font: var(--t-title-s); font-weight: 400; letter-spacing: -.03em; white-space: nowrap; }
.dst-mx__tb tbody th a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.dst-mx__tb tbody th a:hover { background-size: 0 1px; background-position: 100% 100%; transition: background-size var(--d-mid) var(--slow); }
.dst-mx__how { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-2); white-space: nowrap; }
.dst-mx__tb tbody tr { transition: background-color var(--d-fast) var(--ease); }
.dst-mx__tb tbody tr:hover { background: var(--wall-2); }
.dst-mx__tb tbody tr.is-us { background: linear-gradient(90deg, rgba(227, 6, 19, .12), transparent 72%); }
.dst-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--rule-2); vertical-align: middle; transition: transform var(--d-mid) var(--slow), box-shadow var(--d-mid) var(--slow); }
.dst-dot.is-on { background: var(--red); border-color: var(--red); }
.dst-dot.is-form { border-color: var(--ivory); background: radial-gradient(circle, var(--ivory) 0 2px, transparent 2.5px); }
.dst-mx__tb tbody tr:hover .dst-dot.is-on, .dst-mx__tb tbody tr:hover .dst-dot.is-form { transform: scale(1.35); }
.dst-mx__tb tbody tr:hover .dst-dot.is-on { box-shadow: 0 0 0 5px rgba(227, 6, 19, .18); }
.dst-mx__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-top: var(--s-4); font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dst-mx__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.dst-mx__hint { display: none; padding-top: var(--s-4); font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dst-mx__more { padding-top: var(--s-4); font: var(--t-small); font-size: 15px; color: var(--ivory-2); max-width: 88ch; }
.dst-mx__more a { color: var(--ivory); }
/* строки таблицы проявляются, когда въезжают в окно (только где браузер умеет view-timeline) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dst-mx__tb tbody tr { animation: dst-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .dst-mx__tb tbody .dst-dot.is-on { animation: dst-pop linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
  }
}
@keyframes dst-in { from { opacity: 0; translate: 0 14px; } }
@keyframes dst-pop { from { transform: scale(0); } 70% { transform: scale(1.4); } }

/* одна запись: питчинг — как «Как отправить демо», условия — таблицей под ним */
.dst-pitch__how { font: var(--t-body); font-size: 16.5px; color: var(--ivory); max-width: 52ch; }
.dst-pitch__k { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: calc(-1 * var(--s-2)); }
.dst-pitch__pl { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory); }
.dst-pitch__pl li { display: inline-flex; align-items: center; gap: var(--s-2); }
.dst-pitch__pl li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.demo--off .dst-pitch__pl li::before { background: none; border: 1px solid var(--mute); }
.dst-terms { display: grid; width: 100%; max-width: 46rem; border-top: 1px solid var(--rule-2); }
.dst-terms div { display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.dst-terms dt { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: .4em; }
.dst-terms dd { font: var(--t-body); font-size: 16px; color: var(--ivory); overflow-wrap: anywhere; }
.dst-terms small, .dst-rec .rec__facts small { display: block; margin-top: var(--s-1); font: var(--t-small); font-size: 14.5px; color: var(--ivory-2); }
.dst-news, .dst-note { max-width: 52ch; font: var(--t-small); font-size: 15px; color: var(--ivory-2); }
.dst-news .eyebrow { display: block; margin-bottom: var(--s-2); color: var(--mute); }
/* «Читайте в журнале» под «что сравнить»: те же линейки, без номеров */
.dst-reads { margin-top: var(--s-6); }
.dst-reads ul { width: 100%; border-top: 1px solid var(--rule); }
.dst-reads li { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font: var(--t-small); font-size: 15px; }
.dst-reads a { color: var(--ivory); }
.dst-like__m { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fog-mute); }
.likes .like:has(.dst-like__m) { grid-template-rows: auto auto 1fr auto auto; }
.rec + .dst-us { border-top: 0; }

@media (max-width: 1180px) {
  .dst-us__txt { grid-column: 1 / span 8; }
  .dst-us__fig { grid-column: 9 / -1; }
  .dst-mx__t { grid-column: 1 / span 8; }
  .dst-mx__d { grid-column: 1 / span 8; }
}
@media (max-width: 960px) {
  .dst-us__txt, .dst-us__fig, .dst-us__plus, .dst-us__go { grid-column: 1 / -1; }
  .dst-us__fig { max-width: 420px; }
  .dst-us__plans { grid-template-columns: 1fr; }
  .dst-plan, .dst-plan + .dst-plan { padding: var(--s-5) 0; border-left: 0; }
  .dst-plan + .dst-plan { border-top: 1px solid var(--rule); }
  .dst-mx__t, .dst-mx__d { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dst-us__in { row-gap: var(--s-6); }
  .dst-us__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dst-us__plus { grid-template-columns: 1fr; }
  .dst-terms div { grid-template-columns: 1fr; row-gap: var(--s-1); }
  /* на телефоне без столбца «Как»: вид питчинга и так виден по точке, а точки встают сразу за названием */
  .dst-mx__hint { display: block; }
  .dst-mx__tb { min-width: 0; }
  .dst-mx__tb thead th:nth-child(2), .dst-mx__tb .dst-mx__how { display: none; }
  .dst-mx__tb th, .dst-mx__tb td { padding-inline: var(--s-3); }
  .dst-mx__tb tbody th { font-size: 16px; }
  .dst-mx__tb thead th { white-space: normal; min-width: 4.6em; line-height: 1.3; }
  .dst-mx__tb tbody th small { display: block; margin: 2px 0 0; }
  /* на телефоне таблица едет вбок, название остаётся на месте */
  .dst-mx__tb thead th:first-child, .dst-mx__tb tbody th { position: sticky; left: 0; z-index: 1; padding-right: var(--s-3); background: var(--wall); }
  .dst-mx__tb tbody tr.is-us th { background: linear-gradient(90deg, rgba(227, 6, 19, .12), rgba(227, 6, 19, .12)), var(--wall); }
}
/* /дистрибьюторы — конец блока окна 22 */
/* лейблы: наш лейбл — та же полоса (DS: build/sections/directories.py → own_band, тема: us_dir_own_band); справа — кого продвигали */
.lbl-us__fig { grid-column: 9 / span 4; display: grid; align-content: start; gap: var(--s-4); }
.lbl-us__fig ul { display: grid; border-top: 1px solid var(--rule); }
.lbl-us__fig li { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font: var(--t-title-s); letter-spacing: -.03em; color: var(--ivory); }
.lbl-us__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-4); }
.lbl-us__stats { margin-top: var(--s-6); }
/* вёрстка телефона — карточка 2 проекта upsound.org, 29.10: поправки поверх блоков оглавления и «нашего лейбла», сами блоки не менялись */
@media (max-width: 960px) {
  /* «Это мы · лейбл UpSound»: колонка «Маркетинг для» оставалась в столбцах 9–12 и резала имена краем экрана */
  .lbl-us__fig { grid-column: 1 / -1; max-width: 420px; }
  /* поиск и разделы над списком: столбец 1fr раздувался по самому широкому ряду — на 320 поле поиска шире экрана на 35px */
  .dir-tools__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* оглавление: по столбику на запись (146 площадок, 122 медиа) с зазором 3px раздвигало колонку до 470–520px */
  .dirx-ready__txt { grid-template-columns: minmax(0, 1fr); }
  .dirx-bars { gap: 1px; }
  .dirx-bars__g + .dirx-bars__g > a:first-child { margin-left: var(--s-2); }
  /* «146 площадок»: число мельче, чтобы подпись помещалась рядом и на 320 */
  .dirx-ready__n { --f: 35vw; }
}
/* /вёрстка телефона — конец блока карточки 2 */