/* ===== _base.css ===== */
/* Интерактивы статьи (ix): общие части. Склейка — tools/ix_bundle.py → assets/css/ix.css (грузится только в статьях с такими блоками).
   Ширины — как у остальных блоков статьи: колонка текста, «до правого поля» (--wide), полоса до края окна (--band). */
.ix { position: relative; margin-block: 2.8em !important; }
.ix--wide { margin-right: calc(-1 * (var(--notes-w) + var(--gap-w))) !important; }
.ix--band { isolation: isolate; margin-block: 3.4em !important; padding-block: clamp(44px, 4.4vw, 72px); }
.ix--band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--gut-w)); right: -100vw; background: var(--band); }
.ix--dark { --band: var(--wall-2); }
.ix--fog { --band: var(--fog); color: var(--ink); color-scheme: light; }
.ix--red { --band: var(--red); color: #fff; }
.ix--red ::selection { background: var(--ink); color: #fff; }
/* жирный в тексте статьи — светлый (.prose b): внутри интерактива цвет — от полосы, иначе на светлой он пропадает. Вес остаётся */
.prose .ix :is(b, strong) { color: inherit; }
/* обводка фокуса — цвета текста полосы: на светлой ivory не видна */
.ix--fog :focus-visible { outline-color: var(--ink); }
.ix--red :focus-visible { outline-color: #fff; }

/* шапка блока: метка моно, заголовок-вывод, строка пояснения */
.ix__k { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.ix__k i { font-style: normal; color: var(--ivory-2); }
.ix__k .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 1px; }
.ix__t { font: 300 clamp(26px, 2.4vw, 38px)/1.08 var(--f-display); letter-spacing: -.045em; color: var(--ivory); margin-top: 14px; max-width: 22ch; text-wrap: balance; }
.ix__sub { font: 300 16px/1.55 var(--f-text); color: var(--ivory-2); margin-top: 12px; max-width: 58ch; }
.ix__src { font: 400 12px/1.55 var(--f-mono); color: var(--mute); margin-top: 22px; }
.ix__src a { color: inherit; }
.ix--fog .ix__k, .ix--fog .ix__src { color: var(--fog-mute); }
.ix--fog .ix__k i, .ix--fog .ix__sub { color: var(--fog-ink-2); }
.ix--fog .ix__t { color: var(--ink); }
.ix--red .ix__k, .ix--red .ix__src, .ix--red .ix__sub, .ix--red .ix__k i { color: #fff; }
.ix--red .ix__t { color: #fff; }
.ix--red .ix__k .dot { background: var(--ink); }

/* строка действий: сохранить, скопировать, скачать — тихие кнопки моно с линией */
.ix-bar { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 22px; }
.ix-act { appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ivory-2); font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--rule-2); transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.ix-act:hover, .ix-act:focus-visible { color: var(--ivory); border-bottom-color: var(--ivory); }
.ix-act svg { width: 14px; height: 14px; flex: none; }
.ix--fog .ix-act { color: var(--fog-ink-2); border-bottom-color: var(--fog-rule); }
.ix--fog .ix-act:hover, .ix--fog .ix-act:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.ix--red .ix-act { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.ix--red .ix-act:hover, .ix--red .ix-act:focus-visible { border-bottom-color: #fff; }
.ix-say { font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--mute); min-height: 1.4em; }
.ix--fog .ix-say { color: var(--fog-mute); }
.ix--red .ix-say { color: #fff; }

/* фильтр: прямоугольные метки моно, выбранная — светлая; без пилюль и цветных кнопок */
.ix-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-chip { appearance: none; cursor: pointer; border: 1px solid var(--rule-2); background: none; color: var(--ivory-2); padding: 8px 12px 7px; border-radius: 0;
  font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.ix-chip:hover { border-color: var(--ivory); color: var(--ivory); }
.ix-chip[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.ix-chip small { font: inherit; opacity: .6; margin-left: 6px; }
@media (pointer: coarse) { .ix-chip { min-height: 40px; } }   /* палец: метка не ниже 40 px */
.ix--fog .ix-chip { border-color: var(--fog-rule); color: var(--fog-ink-2); }
.ix--fog .ix-chip:hover { border-color: var(--ink); color: var(--ink); }
.ix--fog .ix-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--fog); }

/* огромная тонкая цифра — общий приём для счётчиков и шагов */
.ix-num { font: 200 clamp(64px, 7vw, 120px)/.8 var(--f-display); letter-spacing: -.07em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.ix--fog .ix-num { color: var(--ink); }

/* блоки услуг и инструментов внутри интерактивов (результат теста, итог расчёта) — одна строка и ссылка */
.ix-cta { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule-2); }
.ix-cta__pic { grid-row: 1 / span 2; width: 52px; height: 52px; object-fit: contain; }
.ix-cta__pic.note__eye { width: 40px; height: 40px; }
.ix-cta__k { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ix-cta__t { font: 400 16px/1.45 var(--f-text); color: var(--ivory); }
.ix-cta__t a { color: inherit; }
.ix--fog .ix-cta { border-top-color: var(--fog-rule); }
.ix--fog .ix-cta__k { color: var(--fog-mute); }
.ix--fog .ix-cta__t { color: var(--ink); }

/* появление при прокрутке — только украшение: без JS и при «уменьшить движение» всё видно сразу */
@media (prefers-reduced-motion: no-preference) {
  .js .ix [data-ix-in] { opacity: 0; transform: translateY(14px); transition: opacity var(--d-mid) var(--ease), transform var(--d-slow) var(--slow); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .ix.is-in [data-ix-in] { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .ix--wide { margin-right: 0 !important; }
  .ix--band::before { right: calc(-1 * var(--gut)); }
}
@media (max-width: 960px) {
  .ix--band::before { left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); }
}
@media print {
  .ix-bar, .ix-chips { display: none !important; }
}

/* ===== bars.css ===== */
/* Рейтинг полосками (upsound/bars): номер моно, подпись, тонкая полоса (ivory 35 %, выделенная — красная), число справа.
   Полосы растут, когда блок в экране (.is-in от ядра). Строка с пояснением — <details>, «+» раскрывает её плавно. */
.ix-bars { --bar: color-mix(in srgb, var(--ivory) 35%, transparent); --ncol: 42px; }
.ix-bars__unit { margin-top: var(--s-6); padding-right: calc(16px + var(--s-4)); text-align: right; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ix .ix-bars__list { --vcol: calc(var(--vw, 4) * .72em + .3em); display: block; margin-top: var(--s-3); border-top: 1px solid var(--rule-2); }
.ix:not(:has(.ix-bars__unit)) .ix-bars__list { margin-top: var(--s-6); }
.ix .ix-bars__it { padding: 0; border-bottom: 1px solid var(--rule); }
.ix .ix-bars__it::before { content: none; }
.ix-bars__row { display: grid; grid-template-columns: var(--ncol) clamp(140px, 26%, 250px) minmax(0, 1fr) var(--vcol) 16px; column-gap: var(--s-4); align-items: center; min-height: 52px; padding: 10px 0; font-size: 19px; }
.ix-bars__d > summary { list-style: none; cursor: pointer; }
.ix-bars__d > summary::-webkit-details-marker { display: none; }
.ix-bars__n { font: 400 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--mute); }
.ix-bars__l { font: 400 16px/1.35 var(--f-text); color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.ix-bars__bar { position: relative; height: 6px; }
.ix-bars__bar i { position: absolute; inset: 0 auto 0 0; width: max(2px, calc(var(--v) * 100%)); background: var(--bar); transform-origin: left;
  transition: transform 1.4s var(--slow), background-color var(--d-fast) var(--ease); transition-delay: calc(var(--i, 0) * 55ms), 0s; }
.ix-bars__v { justify-self: end; font: 300 19px/1 var(--f-display); letter-spacing: -.03em; color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-bars__pm { position: relative; width: 12px; height: 12px; justify-self: end; }
.has-note .ix-bars__pm::before, .has-note .ix-bars__pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ivory-2); transition: transform var(--d-mid) var(--slow); }
.has-note .ix-bars__pm::after { transform: rotate(90deg); }
.ix-bars__d[open] .ix-bars__pm::after { transform: rotate(0); }
.ix-bars__d > summary:hover .ix-bars__l, .ix-bars__d[open] .ix-bars__l, .is-mark .ix-bars__l { color: var(--ivory); }
.ix-bars__d > summary:hover .ix-bars__bar i, .ix-bars__d[open] .ix-bars__bar i { background: color-mix(in srgb, var(--ivory) 62%, transparent); }
.ix-bars .is-mark .ix-bars__bar i { background: var(--red); }
.ix-bars__d > summary:focus-visible { outline-offset: 2px; }
.ix-bars__note { padding: 0 calc(16px + var(--s-4)) var(--s-5) calc(var(--ncol) + var(--s-4)); font: 300 15.5px/1.55 var(--f-text); color: var(--ivory-2); max-width: 64ch; }
.ix-bars__d::details-content { block-size: 0; overflow: clip; transition: block-size var(--d-mid) var(--slow), content-visibility var(--d-mid) allow-discrete; }
.ix-bars__d[open]::details-content { block-size: auto; }
.ix-bars__more { margin-top: var(--s-4); }

/* данные таблицей — как у графика */
.ix-bars__table { margin-top: var(--s-3); font-size: 14px; }
.ix-bars__table summary { cursor: pointer; width: fit-content; color: var(--ivory-2); }
.ix-bars__table table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-variant-numeric: tabular-nums; }
.ix-bars__table :is(th, td) { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); font-weight: 400; vertical-align: top; }
.ix-bars__table thead th { font: 400 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ix-bars__table td:nth-child(3), .ix-bars__table thead th:nth-child(3) { text-align: right; white-space: nowrap; }
.ix-bars__table td:first-child { color: var(--mute); width: 3ch; }

@media (prefers-reduced-motion: no-preference) {
  .js .ix-bars:not(.is-in) .ix-bars__bar i { transform: scaleX(0); }
  .ix-bars__it.is-shown { animation: ix-bars-in var(--d-mid) var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
  .ix-bars__it.is-shown .ix-bars__bar i { animation: ix-bars-grow 1.2s var(--slow) both; animation-delay: calc(var(--k, 0) * 60ms + .1s); }
}
@keyframes ix-bars-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ix-bars-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ix-bars__d::details-content { transition: none; }
}
@media (max-width: 640px) {
  .ix-bars { --ncol: 30px; }
  .ix-bars__unit { padding-right: calc(12px + var(--s-3)); }
  .ix-bars__row { grid-template-columns: var(--ncol) minmax(0, 1fr) auto 12px; grid-template-areas: "n l v pm" ". bar bar bar"; column-gap: var(--s-3); row-gap: 10px; min-height: 0; padding: 14px 0; }
  .ix-bars__n { grid-area: n; } .ix-bars__l { grid-area: l; } .ix-bars__v { grid-area: v; } .ix-bars__pm { grid-area: pm; }
  .ix-bars__bar { grid-area: bar; height: 5px; }
  .ix-bars__l { font-size: 15.5px; }
  .ix-bars__v { font-size: 17px; }
  .ix-bars__note { padding: 0 0 var(--s-4) calc(var(--ncol) + var(--s-3)); font-size: 15px; }
  .ix-bars__table table { font-size: 13px; }
}
@media print {
  .ix-bars__it[hidden] { display: list-item !important; }
}

/* ===== calc.css ===== */
/* Калькулятор (calc): слева поля — ползунок (тонкая линия, красная точка), число, выбор метками; справа огромная тонкая цифра итога,
   строки «подпись … значение» с полоской доли и вывод. На телефоне — в колонку, снизу экрана строка с итогом, пока видны поля. */
.ix-calc { --c-fg: var(--ivory); --c-fg2: var(--ivory-2); --c-mute: var(--mute); --c-rule: var(--rule); --c-rule2: var(--rule-2); --c-bg: var(--wall-2); --c-on: var(--ink); scroll-margin-top: 96px; }
.ix--fog.ix-calc { --c-fg: var(--ink); --c-fg2: var(--fog-ink-2); --c-mute: var(--fog-mute); --c-rule: var(--fog-rule); --c-rule2: color-mix(in srgb, var(--ink) 26%, transparent); --c-bg: var(--fog); --c-on: var(--fog); }
.ix-calc :focus-visible { outline-color: var(--c-fg); }
.ix-calc a:not(.btn) { background-image: linear-gradient(var(--c-rule2), var(--c-rule2)); }
.ix-calc a:not(.btn):hover { background-image: linear-gradient(var(--c-fg), var(--c-fg)); }
.ix-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(32px, 4.6vw, 76px); align-items: start; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-rule2); }

/* поля */
.ix-calc__in { display: grid; gap: var(--s-5); }
.ix-calc__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.ix-calc__l { padding: 0; font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); }
.ix-calc__v, .ix-calc .ix-calc__v b { font: 300 clamp(22px, 2vw, 28px)/1 var(--f-display); letter-spacing: -.04em; color: var(--c-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-calc__u { margin-left: 6px; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--c-mute); }
.ix-calc input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: none; cursor: pointer; --p: 50%; }
.ix-calc input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(to right, var(--c-fg) var(--p), var(--c-rule2) var(--p)); }
.ix-calc input[type="range"]::-moz-range-track { height: 1px; background: var(--c-rule2); }
.ix-calc input[type="range"]::-moz-range-progress { height: 1px; background: var(--c-fg); }
.ix-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--red); transition: transform var(--d-fast) var(--slow), box-shadow var(--d-fast) var(--ease); }
.ix-calc input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--red); }
.ix-calc input[type="range"]:hover::-webkit-slider-thumb, .ix-calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }
.ix-calc input[type="range"]:focus-visible { outline: none; }
.ix-calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 5px var(--c-fg); }
.ix-calc input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 5px var(--c-fg); }
.ix-calc__f--number { padding-bottom: 10px; border-bottom: 1px solid var(--c-rule2); transition: border-color var(--d-fast) var(--ease); }
.ix-calc__f--number:focus-within { border-bottom-color: var(--c-fg); }
.ix-calc__f--range { position: relative; }
.ix-calc__f--range:has(.ix-calc__mk) input { margin-top: var(--s-3); }
.ix-calc__mk { position: absolute; bottom: 13px; width: 1px; height: 14px; background: var(--c-fg); pointer-events: none; transition: left var(--d-mid) var(--slow); }
.ix-calc__mk i { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font: 500 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--c-fg2); white-space: nowrap; }
.ix-calc__box { display: flex; align-items: baseline; cursor: text; }
.ix-calc__box input { width: 7.2ch; padding: 4px 0; border: 0; background: none; outline: none; text-align: right; font: 300 clamp(22px, 2vw, 28px)/1 var(--f-display); letter-spacing: -.04em; color: var(--c-fg); font-variant-numeric: tabular-nums; }
.ix-calc__f--select { display: block; }
.ix-calc__f--select legend { float: left; width: 100%; margin-bottom: var(--s-3); }
.ix-calc__f--select .ix-chips { clear: both; }
.ix-calc__opt { position: relative; }
.ix-calc__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ix-calc__opt .ix-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; }
.ix-calc__opt input:checked + .ix-chip { background: var(--c-fg); border-color: var(--c-fg); color: var(--c-on); }
.ix-calc__opt input:focus-visible + .ix-chip { outline: 2px solid var(--c-fg); outline-offset: 3px; }

/* итог */
.ix-calc__out { position: sticky; top: 112px; container-type: inline-size; }
.ix-calc__k { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); }
.ix-calc__big { display: flex; align-items: baseline; gap: .12em; margin-top: var(--s-4); font: 200 clamp(36px, calc(126cqi / max(6, var(--n, 6))), 132px)/1 var(--f-display);   /* --n — знаков в числе: 7–9 знаков («3 333 333») не обрезаются */ letter-spacing: -.07em; color: var(--c-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ix-calc__big > span { font: 300 max(20px, .24em)/1 var(--f-display); letter-spacing: -.02em; color: var(--c-fg2); }
.ix-calc .ix-calc__big b { display: inline-flex; color: inherit; height: 1em; overflow: hidden; font-weight: inherit; transition: color var(--d-mid) var(--ease); }
.ix-calc .ix-calc__big.is-neg b { color: var(--red); }
.ix-calc .ix-calc__big b { letter-spacing: 0; }
.ix-calc__big b > span + span { margin-left: -.04em; }
.ix-calc__r > span { display: block; transition: transform .9s var(--slow); }
.ix-calc__r i { display: block; height: 1em; font-style: normal; text-align: center; letter-spacing: 0; }
.ix-calc__big.is-now .ix-calc__r > span { transition: none; }
.ix-calc__note { grid-column: 1 / -1; margin-top: 6px; font: 400 11.5px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--c-mute); }
.ix-calc__rows { margin: var(--s-6) 0 0; border-top: 1px solid var(--c-rule); }
.ix-calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline; padding: 13px 0 14px; border-bottom: 1px solid var(--c-rule); }
.ix-calc__row dt { font: 400 15px/1.4 var(--f-text); color: var(--c-fg2); }
.ix-calc__row dd { margin: 0; font: 300 clamp(18px, 1.5vw, 22px)/1.1 var(--f-display); letter-spacing: -.03em; color: var(--c-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-calc__row i { grid-column: 1 / -1; position: relative; height: 3px; margin-top: 10px; background: var(--c-rule); }
.ix-calc__row i::after { content: ""; position: absolute; inset: 0; transform: scaleX(var(--w, 0)); transform-origin: left; background: color-mix(in srgb, var(--c-fg) 35%, transparent); transition: transform .9s var(--slow); }
.ix-calc__verdict { position: relative; margin-top: var(--s-5); padding-left: 22px; font: 300 16.5px/1.55 var(--f-text); color: var(--c-fg); }
.ix-calc__verdict::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ix-calc .ix-bar { margin-top: var(--s-6); }
.ix-calc__peek { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ix-calc__verdict.is-new { animation: ixc-in .7s var(--slow) both; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-calc__r > span, .ix-calc__row i::after { transition: none; }
}
@keyframes ixc-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 760px) {
  .ix-calc__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .ix-calc__out { position: static; }
  .ix-calc.is-live .ix-calc__peek { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin: 0 calc(-1 * var(--gut)); padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: var(--c-bg); border-top: 1px solid var(--c-rule2); transition: opacity var(--d-fast) var(--ease), transform var(--d-mid) var(--slow); }
  .ix-calc__peek span { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); }
  .ix-calc .ix-calc__peek b { font: 300 24px/1 var(--f-display); letter-spacing: -.04em; color: var(--c-fg); white-space: nowrap; }
  .ix-calc__peek.is-off { opacity: 0; transform: translateY(100%); pointer-events: none; }
}

/* ===== case.css ===== */
/* case — кейс агентства: обложка слева (серая, цвет под курсором — .litf, наклон — data-tilt из site.js), справа метка, название, цифра, строка, ссылка.
   Линии сверху и снизу; tone dark|fog — полоса. Своего JS нет. */
.ix-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 64px); align-items: center;
  padding-block: clamp(28px, 3vw, 44px); border-block: 1px solid var(--rule-2); }
.ix-case.ix--band { border-block: 0; }
.ix-case--post { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
/* в покое обложка чуть повёрнута к тексту, под курсором выпрямляется и следует за ним */
.ix-case__pic { --rx: 0; --ry: 0; --rest: 9deg; position: relative; display: block; background: none !important;
  transform: perspective(1300px) rotateX(calc(var(--rx) * .45deg)) rotateY(calc(var(--rest) + var(--ry) * .55deg)); transform-origin: 60% 50%;
  box-shadow: 0 46px 70px -34px rgba(0, 0, 0, .9); transition: transform 1.1s var(--slow); }
.ix-case__pic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--wall-2); }
.ix-case--post .ix-case__pic img { aspect-ratio: 1024 / 704; }
.ix-case:hover .litf { --r: clamp(150px, 15vw, 240px); }
.ix-case:hover .ix-case__pic { --rest: 1deg; }
.ix-case__txt { display: grid; justify-items: start; gap: var(--s-4); min-width: 0; }
.ix-case__txt .ix__k { margin: 0; }
.ix-case__t { font: 300 clamp(26px, 2.4vw, 38px)/1.08 var(--f-display); letter-spacing: -.045em; color: var(--ivory); text-wrap: balance; }
.ix-case__t a { background: none !important; transition: color var(--d-fast) var(--ease); }
.ix-case__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.ix-case__num { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px !important; }
.ix-case .ix-case__num b { font: 200 clamp(58px, 5.6vw, 96px)/.8 var(--f-display); letter-spacing: -.07em; color: var(--ivory); white-space: nowrap; }
.ix-case__num span { font: 400 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); max-width: 24ch; padding-bottom: 2px; }
.ix-case__lead { font: 300 17px/1.55 var(--f-text); color: var(--ivory-2); max-width: 44ch; }
.ix-case__go { margin-top: 6px; }

/* светлая полоса */
.ix-case.ix--fog .ix-case__t, .ix-case.ix--fog .ix-case__num b { color: var(--ink); }
.ix-case.ix--fog .ix-case__lead { color: var(--fog-ink-2); }
.ix-case.ix--fog .ix-case__num span { color: var(--fog-mute); }
.ix-case.ix--fog .ix-case__go { border-color: var(--fog-rule); color: var(--ink); }
.ix-case.ix--fog .ix-case__go:hover { border-color: var(--ink); }
.ix-case.ix--fog .ix-case__pic { box-shadow: 0 40px 60px -34px rgba(11, 10, 9, .45); }
.ix-case.ix--fog :focus-visible { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .ix-case__pic { transition: none; } }
@media (max-width: 960px) {
  .ix-case, .ix-case--post { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .ix-case__pic { max-width: 420px; transform: none; }
}
@media (max-width: 640px) { .ix-case__pic { max-width: 100%; } }

/* ===== dates.css ===== */
/* dates — дедлайны как календарь журнала: шкала времени с «сегодня», строки «дата · статус и название · действия».
   Статусы — .state из css/components/opportunity.css. Поведение — assets/js/ix/dates.js. */
.ix-dates { border-top: 1px solid var(--ivory); padding-top: 18px; }

/* шкала: тонкая линия, засечки месяцев, точки сроков, красная черта «сегодня» */
.ix-dates__ruler { position: relative; height: 70px; margin: var(--s-7) 0 var(--s-2); }
.ix-dates__line { position: absolute; left: 0; right: 0; top: 40px; border-top: 1px solid var(--rule-2); }
.ix-dates__tick { position: absolute; left: calc(var(--x) * 100%); top: 34px; height: 30px; padding: 16px 0 0 7px; border-left: 1px solid var(--rule-2);
  font: 400 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.ix-dates__dot { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc(40px - var(--y, 0) * 13px); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--ivory); transition: transform var(--d-mid) var(--slow), opacity var(--d-fast) var(--ease); }
.ix-dates__dot.is-last { background: var(--red); box-shadow: 0 0 0 4px rgba(227, 6, 19, .2); }
.ix-dates__dot.is-closed { background: var(--wall); border: 1px dashed var(--mute); }
.ix-dates__dot::after { content: attr(data-d); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); font: 400 10px/1 var(--f-mono); letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.ix-dates__dot.is-last::after { color: var(--red-ink); }
.ix-dates__dot.is-open::after { color: var(--ivory-2); }
.ix-dates__dot.is-hl { transform: scale(1.7); }
.ix-dates__dot.is-hl::after { transform: translateX(-50%) scale(.6); }
.ix-dates__dot.is-off { opacity: .2; }
.ix-dates__now { position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: 0; height: 52px; border-left: 1px solid var(--red); }
.ix-dates__now span { position: absolute; top: -2px; left: 8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; }
.ix-dates__now.is-flip span { left: auto; right: 8px; }

/* фильтр и «все в календарь» */
.ix-dates__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px var(--s-5); margin-top: var(--s-5); }
.ix-dates__bar .ix-say { flex-basis: 100%; min-height: 0; }
.ix-dates__bar .ix-say:empty { display: none; }
.ix-dates__all small { font: inherit; opacity: .6; }

/* строки */
.ix-dates__list { margin-top: var(--s-5); }
.ix-dates__row { display: grid; grid-template-columns: clamp(96px, 10vw, 148px) minmax(0, 1fr) auto; column-gap: var(--cg); align-items: start; padding: 26px 0 28px; border-top: 1px solid var(--rule); transition: background-color var(--d-fast) var(--ease); }
.ix-dates__row:last-child { border-bottom: 1px solid var(--rule); }
.ix-dates__when { display: grid; gap: 8px; }
/* b внутри статьи: правило .prose b (вес 500, цвет ivory) перебиваем двумя классами */
.ix-dates .ix-dates__when b { font: 200 clamp(48px, 4.6vw, 74px)/.82 var(--f-display); letter-spacing: -.06em; color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-dates__when span:not(.sr) { font: 400 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ix-dates__when { min-width: 0; }
.ix-dates .ix-dates__when--w b { font: 300 clamp(16px, 1.25vw, 19px)/1.12 var(--f-display); letter-spacing: -.03em; white-space: normal; padding-top: 2px; color: var(--ivory-2); }
.ix-dates__body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ix-dates__st { margin: 0; }
.ix-dates__t { font: 400 clamp(19px, 1.5vw, 23px)/1.25 var(--f-display); letter-spacing: -.03em; color: var(--ivory); text-wrap: balance; }
.ix-dates__m { font: 400 11px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ix-dates__x { font-size: 15px; line-height: 1.55; color: var(--ivory-2); max-width: 54ch; }
.ix-dates__acts { display: grid; justify-items: end; gap: 14px; padding-top: 2px; }
.ix-dates__go { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); font: 500 14px/1.2 var(--f-text); color: var(--ivory); white-space: nowrap;
  background: none !important; transition: border-color var(--d-fast) var(--ease), gap var(--d-mid) var(--slow); }
.ix-dates__go:hover, .ix-dates__go:focus-visible { border-color: var(--ivory); gap: 18px; }
.ix-dates__cal { white-space: nowrap; }
.ix-dates__row.is-hl { background: linear-gradient(90deg, rgba(239, 232, 220, .035), transparent 70%); }
.ix-dates__row.is-last .ix-dates__when b { color: var(--ivory); }

/* закрытые — внизу, приглушены */
.ix-dates__gone { margin-top: var(--s-7); font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 14px; }
.ix-dates__gone::after { content: ""; flex: 1; border-top: 1px dashed var(--rule-2); }
.ix-dates__list--gone { margin-top: var(--s-3); }
.ix-dates__row.is-closed .ix-dates__when b { color: var(--mute); }
.ix-dates__row.is-closed .ix-dates__t { color: var(--ivory-2); }
.ix-dates__row.is-closed .ix-dates__x { color: var(--mute); }
.ix-dates__row.is-closed .ix-dates__go { color: var(--ivory-2); }

.ix-dates__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px var(--s-5); margin-top: var(--s-5); }
.ix-dates__foot .ix__src { margin: 0; }

/* появление: линия шкалы прочерчивается слева направо, точки встают по порядку дат, «сегодня» опускается последней. Без JS и при «уменьшить движение» — сразу итог */
@media (prefers-reduced-motion: no-preference) {
  .js .ix-dates__line { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--slow); }
  .js .ix-dates__tick { opacity: 0; transition: opacity .6s var(--ease) calc(.15s + var(--x) * 1.1s); }
  .js .ix-dates__dot { opacity: 0; transition: opacity .5s var(--ease) calc(.25s + var(--x) * 1.2s), transform var(--d-mid) var(--slow); }
  .js .ix-dates__now { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--slow) 1.3s; }
  .js .ix-dates.is-in .ix-dates__line { transform: none; }
  .js .ix-dates.is-in .ix-dates__tick, .js .ix-dates.is-in .ix-dates__dot { opacity: 1; }
  .js .ix-dates.is-in .ix-dates__dot.is-off { opacity: .2; transition-delay: 0s; }
  .js .ix-dates.is-in .ix-dates__now { clip-path: inset(-20px -200px -4px -200px); }
}
@media (prefers-reduced-motion: reduce) { .ix-dates__dot, .ix-dates__row { transition: none; } }
@media (max-width: 640px) {
  .ix-dates__ruler { height: 64px; margin-top: var(--s-6); }
  .ix-dates__tick { font-size: 9.5px; padding-left: 5px; }
  .ix-dates__row { grid-template-columns: 70px minmax(0, 1fr); column-gap: 16px; padding: 22px 0 24px; }
  .ix-dates .ix-dates__when b { font-size: 44px; }
  /* без даты: слово — строкой над названием, текст строки стоит по той же линии, что у строк с датой */
  .ix-dates__when--w { grid-column: 1 / -1; margin-bottom: 12px; }
  .ix-dates .ix-dates__when--w b { font-size: 18px; }
  .ix-dates__when--w ~ .ix-dates__body { grid-column: 2; }
  .ix-dates__acts { grid-column: 2; justify-items: start; display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 18px; align-items: center; }
  .ix-dates__bar .ix-chips { gap: 6px; }
}
@media print { .ix-dates__ruler, .ix-dates__bar { display: none !important; } }

/* ===== finds.css ===== */
/* Находки (upsound/finds): 2–4 фразы в ряд, число внутри фразы — Unbounded крупнее текста. Сверху у каждой — тонкая линия,
   она прочерчивается слева направо при появлении; число досчитывает JS. На телефоне — столбиком. */
.ix .ix-finds__list { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: var(--s-7) clamp(24px, 3vw, 48px); margin-top: var(--s-5); }
.ix .ix-finds__it { position: relative; padding: var(--s-5) 0 0; }
.ix .ix-finds__it::before { content: ""; position: absolute; left: 0; right: 0; top: 0; width: auto; height: 1px; background: var(--rule-2); transform-origin: left; }
.ix-finds__p { font: 300 clamp(20px, 1.7vw, 26px)/1.36 var(--f-text); letter-spacing: -.012em; color: var(--ivory-2); text-wrap: pretty; }
.ix-finds .ix-finds__num { font: 200 1.86em/.9 var(--f-display); letter-spacing: -.055em; color: var(--ivory); white-space: nowrap; }
.ix-finds .ix-finds__num.is-run { display: inline-grid; justify-items: end; }
.ix-finds__num.is-run::after { content: attr(data-to); grid-area: 1 / 1; visibility: hidden; }
.ix-finds__num.is-run > [aria-hidden] { grid-area: 1 / 1; font-variant-numeric: tabular-nums; }
.ix-finds__note { font: 400 12px/1.55 var(--f-mono); letter-spacing: .02em; color: var(--mute); margin-top: var(--s-3); max-width: 40ch; }
@media (prefers-reduced-motion: no-preference) {
  .ix .ix-finds__it::before { transition: transform var(--d-slow) var(--slow); transition-delay: calc(var(--i, 0) * 120ms); }
  .js .ix-finds:not(.is-in) .ix-finds__it::before { transform: scaleX(0); }
}
@media (max-width: 960px) {
  .ix .ix-finds__list { --c: 2 !important; }
  .ix-finds__list > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ix .ix-finds__list { --c: 1 !important; gap: var(--s-6); }
  .ix-finds__p { font-size: 21px; }
}

/* ===== flip.css ===== */
/* flip — карточки-перевёртыши (CSS 3D). Лицо — тёмная плоскость, оборот — светлый (у одной карточки может быть красный).
   Без JS (.is-live нет) обе стороны стоят одна под другой. Поведение — assets/js/ix/flip.js. */
.ix-flip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.ix-flip__card { position: relative; perspective: 1700px; }
.ix-flip__card.is-wide { grid-column: 1 / -1; }
.ix-flip__in { display: grid; }
.ix-flip__face { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-4); padding: clamp(20px, 2vw, 30px); overflow: hidden; }
.ix-flip__front { background: var(--wall-3); color: var(--ivory); grid-template-rows: auto 1fr auto auto; }
.ix-flip__back { background: var(--fog); color: var(--ink); }
.is-red .ix-flip__back { background: var(--red); color: #fff; }
.ix-flip__k { display: flex; justify-content: space-between; gap: var(--s-3); font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ix-flip__back .ix-flip__k { color: var(--fog-mute); }
.is-red .ix-flip__back .ix-flip__k { color: #fff; }
.ix-flip__n { display: flex; align-items: flex-start; gap: .14em; font: 200 clamp(68px, 6.6vw, 112px)/.8 var(--f-display); letter-spacing: -.07em; color: var(--ivory); margin-left: -.05em; font-variant-numeric: tabular-nums; }
.ix-flip__n small { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--mute); padding-top: .3em; }
.ix-flip__t { align-self: end; font: 300 clamp(21px, 1.75vw, 27px)/1.14 var(--f-display); letter-spacing: -.035em; color: var(--ivory); max-width: 19ch; text-wrap: balance; }
.ix-flip__x { font: 400 16.5px/1.55 var(--f-text); max-width: 46ch; }
.ix-flip__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.ix-flip__go { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--fog-rule); font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog-ink-2); background: none !important; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.ix-flip__go:hover, .ix-flip__go:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.ix-flip__go svg { width: 9px; height: 13px; }
.is-red .ix-flip__go { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.is-red .ix-flip__go:hover, .is-red .ix-flip__go:focus-visible { border-bottom-color: #fff; }
.ix-flip__back :focus-visible { outline-color: var(--ink); }
.is-red .ix-flip__back :focus-visible { outline-color: #fff; }
.ix-flip__hint { display: none; align-items: center; gap: 10px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.ix-flip__front .ix-flip__hint { justify-content: space-between; padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--ivory-2); }
.ix-flip__back .ix-flip__hint { color: var(--fog-mute); }
.is-red .ix-flip__back .ix-flip__hint { color: #fff; }
.ix-flip__hint svg { width: 15px; height: 15px; flex: none; transition: transform var(--d-mid) var(--slow); }
/* широкая последняя карточка: номер слева, фраза справа */
.ix-flip__card.is-wide .ix-flip__front { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--cg); }
.ix-flip__card.is-wide .ix-flip__front > :not(.ix-flip__n, .ix-flip__t) { grid-column: 1 / -1; }
.ix-flip__card.is-wide .ix-flip__n { grid-row: 2 / span 2; align-self: end; }
.ix-flip__card.is-wide .ix-flip__t { grid-column: 2; grid-row: 2 / span 2; max-width: 22ch; }
.ix-flip__card.is-wide .ix-flip__x { max-width: 64ch; }
.ix-flip.is-live .ix-flip__card.is-wide .ix-flip__face { min-height: clamp(220px, 16vw, 260px); }

/* без JS: оборот сразу под лицом */
.ix-flip:not(.is-live) .ix-flip__front { padding-bottom: var(--s-5); }

/* живые карточки: обе стороны в одной клетке сетки — высота по большей; поворот вокруг вертикали */
.ix-flip.is-live .ix-flip__card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ix-flip.is-live .ix-flip__tilt { height: 100%; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .7s var(--slow); }
.ix-flip.is-live .ix-flip__in { height: 100%; transform-style: preserve-3d; transition: transform 1.15s var(--slow); }
.ix-flip.is-live .ix-flip__face { grid-area: 1 / 1; min-height: clamp(250px, 20vw, 300px); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 34px 60px -38px rgba(0, 0, 0, .9); }
.ix-flip.is-live .ix-flip__back { transform: rotateY(180deg); }
.ix-flip.is-live .is-flip .ix-flip__in { transform: rotateY(180deg); }
.ix-flip.is-live .ix-flip__hint { display: flex; }
.ix-flip.is-live.is-all .ix-flip__in { transition-delay: calc(var(--i, 0) * 70ms); }
.ix-flip.is-live .ix-flip__card:hover .ix-flip__front .ix-flip__hint { color: var(--ivory); }
.ix-flip.is-live .ix-flip__card:hover .ix-flip__front .ix-flip__hint svg { transform: rotate(-200deg); }
.ix-flip.is-live .ix-flip__card:has(.ix-flip__btn:focus-visible) { outline: 2px solid var(--ivory); outline-offset: 5px; }
.ix--fog.is-live .ix-flip__card:has(.ix-flip__btn:focus-visible) { outline-color: var(--ink); }
/* первая карточка один раз чуть приоткрывается, когда блок попал в экран: видно, что у карточек есть оборот */
.ix-flip.is-live.is-peek .ix-flip__card:first-child:not(.is-flip) .ix-flip__in { animation: ix-flip-peek 1.5s var(--slow) both; }
@keyframes ix-flip-peek { 0%, 100% { transform: none; } 38% { transform: rotateY(-32deg); } }
/* блик за курсором — только на лице */
.ix-flip.is-live .ix-flip__front::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .6s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(239, 232, 220, .09), transparent 58%); }
.ix--fog .ix-flip__card:not(.is-red) .ix-flip__back { background: var(--paper); }
.ix--fog.is-live .ix-flip__face { box-shadow: 0 30px 50px -36px rgba(11, 10, 9, .45); }

/* «уменьшить движение»: без поворота, стороны сменяются прозрачностью */
@media (prefers-reduced-motion: reduce) {
  .ix-flip.is-live .ix-flip__tilt, .ix-flip.is-live .ix-flip__in, .ix-flip.is-live .is-flip .ix-flip__in, .ix-flip.is-live .ix-flip__back { transform: none; transition: none; }
  .ix-flip.is-live .ix-flip__face { transition: opacity .4s var(--ease), visibility 0s linear .4s; }
  .ix-flip.is-live .ix-flip__back, .ix-flip.is-live .is-flip .ix-flip__front { opacity: 0; visibility: hidden; }
  .ix-flip.is-live .is-flip .ix-flip__back { opacity: 1; visibility: visible; transition-delay: 0s; }
  .ix-flip.is-live .ix-flip__hint svg { transition: none; }
  .ix-flip.is-live.is-peek .ix-flip__card:first-child .ix-flip__in { animation: none; }
}
@media (max-width: 640px) {
  .ix-flip__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-6); }
  .ix-flip.is-live .ix-flip__face { min-height: 0; }
  .ix-flip__front { min-height: 0; }
  .ix-flip__n { font-size: 64px; }
  .ix-flip__card.is-wide .ix-flip__front { grid-template-columns: minmax(0, 1fr); }
  .ix-flip__card.is-wide .ix-flip__n, .ix-flip__card.is-wide .ix-flip__t { grid-column: 1; grid-row: auto; }
}
@media print {
  .ix-flip__in, .ix-flip__back { transform: none !important; }
  .ix-flip__face { grid-area: auto !important; backface-visibility: visible !important; }
}

/* ===== magnet.css ===== */
/* magnet — лид-магнит: бесплатный PDF агентства, файл присылает бот АПСАУНД ЧЕК. До правого поля, на полосе (tone dark | fog).
   Слева брошюра в CSS 3D — приём «PDF в подарок» со страницы «Инструменты»: обложка повёрнута к тексту, справа стопка страниц, тень на полке.
   Под курсором брошюра выпрямляется и идёт за ним (data-tilt, site.js темы). Без JS и при «уменьшить движение» — та же поза, без движения. Своего JS нет. */
.ix-magnet { --book: clamp(196px, 18vw, 256px); display: grid; grid-template-columns: var(--book) minmax(0, 1fr); column-gap: clamp(40px, 5.2vw, 84px); align-items: center; }
.ix-magnet__pic { --rx: 0; --ry: 0; --rest: -17deg; --lift: 0px; display: block; padding: 0 14px 14px 0; perspective: 1100px; background: none !important; }
.ix-magnet__pic img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 453; object-fit: cover; background: var(--wall-3);
  transform-origin: 0 50%; transform: translateY(var(--lift)) rotateY(calc(var(--rest) + var(--ry) * .45deg)) rotateX(calc(2deg + var(--rx) * .4deg));
  /* стопка страниц справа снизу и тень на «полке» */
  box-shadow: 3px 3px 0 -1px var(--fog), 6px 6px 0 -2px var(--ivory-2), 9px 9px 0 -3px var(--fog), 12px 12px 0 -4px var(--mute), 26px 34px 44px -22px rgba(0, 0, 0, .9); }

.ix-magnet__txt { display: grid; justify-items: start; gap: var(--s-4); min-width: 0; }
.ix-magnet__k { font: 500 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ix-magnet__k .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 1px; }
.ix-magnet__sep { margin-inline: .7em; }
.ix-magnet .ix-magnet__k b { font-weight: 500; color: var(--ivory-2); }
.ix-magnet__t { font: 300 clamp(28px, 2.7vw, 42px)/1.06 var(--f-display); letter-spacing: -.045em; color: var(--ivory); max-width: 17ch; text-wrap: balance; }
.ix-magnet__t a { background: none !important; }
.ix-magnet__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.ix-magnet__lead { font: 300 17px/1.55 var(--f-text); color: var(--ivory-2); max-width: 44ch; text-wrap: pretty; }
.ix-magnet__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: var(--s-3) !important; }
.ix-magnet__note { font: 300 14px/1.45 var(--f-text); color: var(--mute); max-width: 28ch; }

/* светлая полоса: страницы стопки — бумага темнее полосы, тень мягче */
.ix-magnet.ix--fog .ix-magnet__k, .ix-magnet.ix--fog .ix-magnet__note { color: var(--fog-mute); }
.ix-magnet.ix--fog .ix-magnet__k b, .ix-magnet.ix--fog .ix-magnet__lead { color: var(--fog-ink-2); }
.ix-magnet.ix--fog .ix-magnet__t { color: var(--ink); }
.ix-magnet.ix--fog .ix-magnet__pic img { box-shadow: 3px 3px 0 -1px var(--paper), 6px 6px 0 -2px var(--ivory-2), 9px 9px 0 -3px var(--paper), 12px 12px 0 -4px var(--mute), 24px 32px 40px -22px rgba(11, 10, 9, .55); }

@media (prefers-reduced-motion: no-preference) {
  .ix-magnet__pic img { transition: transform 1.1s var(--slow), box-shadow 1.1s var(--slow); }
  .ix-magnet:hover .ix-magnet__pic, .ix-magnet:focus-within .ix-magnet__pic { --rest: -5deg; --lift: -8px; }
  .ix-magnet:hover .ix-magnet__pic img, .ix-magnet:focus-within .ix-magnet__pic img {
    box-shadow: 2px 2px 0 -1px var(--fog), 4px 4px 0 -2px var(--ivory-2), 6px 6px 0 -3px var(--fog), 8px 8px 0 -4px var(--mute), 30px 46px 54px -24px rgba(0, 0, 0, .95); }
  .ix-magnet.ix--fog:hover .ix-magnet__pic img, .ix-magnet.ix--fog:focus-within .ix-magnet__pic img {
    box-shadow: 2px 2px 0 -1px var(--paper), 4px 4px 0 -2px var(--ivory-2), 6px 6px 0 -3px var(--paper), 8px 8px 0 -4px var(--mute), 28px 44px 50px -24px rgba(11, 10, 9, .6); }
}

/* телефон: брошюра слева, метка рядом столбиком; название, строка и кнопка — во всю ширину */
@media (max-width: 640px) {
  .ix-magnet { --book: 40%; grid-template-areas: "pic k" "t t" "lead lead" "go go"; column-gap: 20px; row-gap: var(--s-4); align-items: end; }
  .ix-magnet__txt { display: contents; }
  .ix-magnet__pic { grid-area: pic; margin-bottom: var(--s-3); }
  .ix-magnet__k { grid-area: k; align-self: end; display: grid; gap: 6px; padding-bottom: var(--s-5); }
  .ix-magnet__sep { display: none; }
  .ix-magnet__k .dot { margin: 0 10px 0 -17px; }   /* точка — в промежутке у обложки: строки метки стоят по одной линии */
  .ix-magnet__t { grid-area: t; font-size: clamp(22px, 7.4vw, 30px); max-width: none; }
  .ix-magnet__lead { grid-area: lead; font-size: 16px; }
  .ix-magnet__go { grid-area: go; margin-top: var(--s-2) !important; }
  .ix-magnet__btn { width: 100%; }
  .ix-magnet__note { max-width: none; }
}
@media print { .ix-magnet__pic { display: none; } .ix-magnet { display: block; } }

/* ===== quiz.css ===== */
/* Тест / развилка (quiz): один вопрос на экране — огромный тонкий номер и карта развилки слева, вопрос и варианты-строки справа,
   полоса прогресса; итог — крупный заголовок, «что сделать», путь или полоски баллов, услуга. Без JS (нет .is-live) — все вопросы списком. */
.ix-quiz { --q-fg: var(--ivory); --q-fg2: var(--ivory-2); --q-mute: var(--mute); --q-rule: var(--rule); --q-rule2: var(--rule-2); --q-numw: clamp(112px, 12vw, 176px); scroll-margin-top: 96px; }
.ix--fog.ix-quiz { --q-fg: var(--ink); --q-fg2: var(--fog-ink-2); --q-mute: var(--fog-mute); --q-rule: var(--fog-rule); --q-rule2: color-mix(in srgb, var(--ink) 26%, transparent); }
.ix-quiz :focus-visible { outline-color: var(--q-fg); }
.ix-quiz a:not(.btn) { background-image: linear-gradient(var(--q-rule2), var(--q-rule2)); }
.ix-quiz a:not(.btn):hover { background-image: linear-gradient(var(--q-fg), var(--q-fg)); }
.ix-quiz__n span, .ix-quiz__of, .ix-quiz__rk, .ix-quiz__sk, .ix-quiz__read > span { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--q-mute); }

/* вопрос: номер | вопрос, подсказка, варианты */
.ix-quiz__stage { margin-top: var(--s-7); border-top: 1px solid var(--q-rule2); }
.ix-quiz__q, .ix-quiz.is-live .ix-quiz__stage { display: grid; grid-template-columns: var(--q-numw) minmax(0, 1fr); column-gap: var(--s-6); padding-top: var(--s-6); }
.ix-quiz__q + .ix-quiz__q { margin-top: var(--s-7); border-top: 1px solid var(--q-rule); }
.ix-quiz__n, .ix-quiz .ix-quiz__num b { font: 200 clamp(64px, 7.4vw, 120px)/.8 var(--f-display); letter-spacing: -.07em; color: var(--q-fg); font-variant-numeric: tabular-nums; }
.ix-quiz__n span, .ix-quiz__of { display: block; margin-top: var(--s-4); }
.ix-quiz__qt { font: 300 clamp(23px, 2.2vw, 34px)/1.14 var(--f-display); letter-spacing: -.045em; color: var(--q-fg); max-width: 22ch; }
.ix-quiz__hint { margin-top: var(--s-3); font: 300 15.5px/1.55 var(--f-text); color: var(--q-fg2); max-width: 54ch; }
.ix-quiz .ix-quiz__opts { display: block; margin-top: var(--s-5); border-top: 1px solid var(--q-rule); }
.ix-quiz .ix-quiz__o, .ix-quiz__b { position: relative; display: grid; grid-template-columns: 2.6ch minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--q-rule); font: 400 17.5px/1.4 var(--f-text); color: var(--q-fg2); }
.ix-quiz .ix-quiz__o::before { content: none; }
.ix-quiz__l { position: relative; font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; color: var(--q-mute); }
.ix-quiz__go { font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--q-mute); text-align: right; max-width: 22ch; }

/* с JS: номер «перекатывается», варианты — кнопки, итог на месте вопроса */
.ix-quiz.is-live .ix-quiz__qs > li:not(.is-cur), .ix-quiz.is-live .ix-quiz__n, .ix-quiz.is-live .ix-quiz__go, .ix-quiz.is-done .ix-quiz__num, .ix-quiz.is-done .ix-quiz__qs { display: none; }
.ix-quiz.is-live .ix-quiz__q, .ix-quiz.is-live .ix-quiz__o { display: block; padding: 0; margin: 0; border: 0; }
.ix-quiz.is-live .ix-quiz__qs { grid-area: 1 / 2; }
.ix-quiz__out { grid-area: 1 / 1 / auto / -1; }
.ix-quiz .ix-quiz__num b { display: flex; height: 1em; overflow: hidden; margin-top: -.1em; line-height: 1; letter-spacing: 0; }
.ix-quiz__d + .ix-quiz__d { margin-left: -.05em; }
.ix-quiz__d > span { display: block; transition: transform 1s var(--slow); }
.ix-quiz__d i { display: block; height: 1em; font-style: normal; text-align: center; }
.ix-quiz__map { display: block; width: 100%; max-width: 160px; height: auto; margin-top: var(--s-7); overflow: visible; }
.ix-quiz__side .ix-quiz__map { max-width: 240px; margin: 0 0 var(--s-5); }
.ix-quiz__map path { fill: none; stroke: var(--q-rule2); vector-effect: non-scaling-stroke; transition: stroke var(--d-mid) var(--ease); }
.ix-quiz__map circle { fill: var(--q-mute); transition: fill var(--d-mid) var(--ease), r var(--d-mid) var(--slow); }
.ix-quiz__map .is-leaf { fill: var(--q-rule2); }
.ix-quiz__map path.is-on { stroke: var(--q-fg); }
.ix-quiz__map circle.is-on { fill: var(--q-fg); }
.ix-quiz__map circle.is-cur { fill: var(--red); r: 4.5px; }
.ix-quiz__qt:focus, .ix-quiz__rt:focus { outline: none; }
.ix-quiz__b { width: 100%; appearance: none; background: none; border-width: 0 0 1px; text-align: left; cursor: pointer; min-height: 56px; transition: color var(--d-fast) var(--ease), padding var(--d-mid) var(--slow); }
.ix-quiz__b:focus-visible { outline-offset: 2px; }
.ix-quiz__b::after, .ix-quiz__l::after { content: ""; position: absolute; left: 0; transition: transform var(--d-mid) var(--slow); }
.ix-quiz__b::after { right: 0; bottom: -1px; height: 1px; background: var(--q-fg); transform: scaleX(0); transform-origin: left; }
.ix-quiz__l::after { top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--red); transform: scale(0); }
.ix-quiz__ar { align-self: center; justify-self: end; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--q-mute); transition: transform var(--d-mid) var(--slow), color var(--d-fast) var(--ease); }
.ix-quiz__ar svg { display: block; width: 18px; height: 10px; }
@media (hover: hover) {
  .ix-quiz__b:hover { color: var(--q-fg); padding-left: var(--s-2); }
  .ix-quiz__b:hover::after { transform: none; }
  .ix-quiz__b:hover .ix-quiz__ar { color: var(--q-fg); transform: translateX(4px); }
}
.ix-quiz__b[aria-pressed="true"] { color: var(--q-fg); }
.ix-quiz__b[aria-pressed="true"] .ix-quiz__l { color: transparent; }
.ix-quiz__b[aria-pressed="true"] .ix-quiz__l::after { transform: none; }

/* низ: полоса прогресса с красной точкой и «Назад» */
.ix-quiz__foot { display: grid; justify-items: start; gap: var(--s-4); margin-top: var(--s-6); }
.ix-quiz__back[disabled] { visibility: hidden; }
.ix-quiz__back svg { width: 14px; height: 10px; }
.ix-quiz__p { position: relative; width: 100%; height: 1px; background: var(--q-rule2); }
.ix-quiz__p i, .ix-quiz__p b { position: absolute; top: 0; left: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--q-fg); transition: width 1s var(--slow), left 1s var(--slow); }
.ix-quiz__p b { left: calc(var(--p, 0) * 100%); width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%; background: var(--red); }

/* итог */
.ix-quiz__rk { display: flex; align-items: center; gap: 10px; }
.ix-quiz__rk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ix-quiz__out .ix-quiz__res { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); align-items: start; }
.ix-quiz__out .ix-quiz__res > * { grid-column: 1 / -1; }
.ix-quiz__out .ix-quiz__rt { margin-top: var(--s-4); font: 300 clamp(36px, 4.6vw, 70px)/1 var(--f-display); letter-spacing: -.055em; color: var(--q-fg); max-width: 15ch; }
.ix-quiz__out .ix-quiz__rx { margin-top: var(--s-5); font: 300 clamp(18px, 1.45vw, 21px)/1.55 var(--f-text); color: var(--q-fg2); max-width: 58ch; }
.ix-quiz__out .ix-quiz__todo, .ix-quiz__out .ix-quiz__side { grid-row: 4; margin-top: var(--s-6); }
.ix-quiz__out .ix-quiz__todo { grid-column: 1; }
.ix-quiz__out .ix-quiz__side { grid-column: 2; }
.ix-quiz .ix-quiz__todo { display: grid; gap: .6em; font: 400 16.5px/1.5 var(--f-text); color: var(--q-fg); }
.ix-quiz .ix-quiz__todo > li { position: relative; padding-left: 28px; }
.ix-quiz .ix-quiz__todo > li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 12px; height: 1px; background: var(--q-mute); }
.ix-quiz__sk { margin-bottom: var(--s-3); }
.ix-quiz__path li, .ix-quiz__bars li { display: grid; grid-template-columns: 3.4ch minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--q-rule); font: 400 15px/1.45 var(--f-text); color: var(--q-fg2); }
.ix-quiz__path li:last-child, .ix-quiz__bars .is-win, .ix-quiz .ix-quiz__bars .is-win b { color: var(--q-fg); }
.ix-quiz__path li > span:first-child { font: 400 11px/2 var(--f-mono); letter-spacing: .08em; color: var(--q-mute); }
.ix-quiz__bars li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: baseline; padding: 11px 0 12px; font-size: 14.5px; }
.ix-quiz .ix-quiz__bars b { font: 300 20px/1 var(--f-display); letter-spacing: -.03em; color: var(--q-fg2); font-variant-numeric: tabular-nums; }
.ix-quiz__bars i { grid-column: 1 / -1; position: relative; height: 3px; background: var(--q-rule); }
.ix-quiz__bars i::after { content: ""; position: absolute; inset: 0; transform: scaleX(var(--v)); transform-origin: left; background: color-mix(in srgb, var(--q-fg) 35%, transparent); }
.ix-quiz__bars .is-win i::after { background: var(--red); }
.ix-quiz__read { margin-top: var(--s-6); font: 400 15.5px/1.7 var(--f-text); color: var(--q-mute); }
.ix-quiz__read > span { display: block; }
.ix-quiz__read a { color: var(--q-fg); }
.ix-quiz__read i { font-style: normal; }
.ix-quiz__out .ix-bar { margin-top: var(--s-6); }

/* все итоги: тихо внизу, раскрываются плавно */
.ix-quiz__all { margin-top: var(--s-7); border-top: 1px solid var(--q-rule); }
.ix-quiz__all > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 18px 0; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--q-fg2); }
.ix-quiz__all > summary::-webkit-details-marker { display: none; }
.ix-quiz__all > summary i { font-style: normal; color: var(--q-mute); }
.ix-quiz__all > summary::after { content: "+"; margin-left: auto; font: 300 22px/.6 var(--f-text); transition: transform var(--d-mid) var(--slow); }
.ix-quiz__all[open] > summary::after { transform: rotate(45deg); }
.ix-quiz__all::details-content { block-size: 0; overflow: clip; transition: block-size .7s var(--slow), content-visibility .7s allow-discrete; }
.ix-quiz__all[open]::details-content { block-size: auto; }
.ix-quiz__list .ix-quiz__res { padding: var(--s-6) 0; border-top: 1px solid var(--q-rule); }
.ix-quiz__list .ix-quiz__rt { font: 300 clamp(22px, 2vw, 28px)/1.15 var(--f-display); letter-spacing: -.04em; color: var(--q-fg); max-width: 26ch; }
.ix-quiz__list .ix-quiz__rx { margin-top: var(--s-3); font: 300 16.5px/1.55 var(--f-text); color: var(--q-fg2); max-width: 60ch; }
.ix-quiz__list .ix-quiz__todo { margin-top: var(--s-4); font-size: 15.5px; color: var(--q-fg2); }
.ix-quiz__list .ix-quiz__read { margin-top: var(--s-4); }

@media (prefers-reduced-motion: no-preference) {
  .ix-quiz__stage.is-h { overflow: clip; overflow-clip-margin: 12px; transition: height .7s var(--slow); }
  .ix-quiz__stage.is-anim .is-cur, .ix-quiz__stage.is-anim .ix-quiz__out { animation: ixq-in .8s var(--slow) both; }
  .ix-quiz__w { display: inline-block; overflow: clip; vertical-align: top; padding: .06em .05em .16em 0; margin: -.06em -.05em -.16em 0; }
  .ix-quiz__w > i { display: inline-block; font-style: normal; animation: ixq-up 1.15s var(--slow) both; animation-delay: calc(var(--i) * 60ms + .12s); }
  .ix-quiz__bars i::after { animation: ixq-bar 1.4s var(--slow) both .35s; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-quiz__stage.is-anim .is-cur, .ix-quiz__stage.is-anim .ix-quiz__out { animation: ixq-fade .3s var(--ease) both; }
  .ix-quiz__d > span, .ix-quiz__p i, .ix-quiz__p b { transition: none; }
}
@keyframes ixq-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes ixq-up { from { transform: translateY(108%); } }
@keyframes ixq-bar { from { transform: scaleX(0); } }
@keyframes ixq-fade { from { opacity: 0; } }

@media (max-width: 640px) {
  .ix-quiz__q, .ix-quiz.is-live .ix-quiz__stage, .ix-quiz__out .ix-quiz__res { grid-template-columns: minmax(0, 1fr); }
  .ix-quiz__n, .ix-quiz__num { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--s-5); }
  .ix-quiz__n, .ix-quiz .ix-quiz__num b { font-size: 64px; }
  .ix-quiz__n span, .ix-quiz__of { margin: 0; }
  .ix-quiz__num .ix-quiz__map { align-self: center; max-width: 136px; margin: 0 0 0 auto; }
  .ix-quiz.is-live .ix-quiz__qs { grid-area: 2 / 1; }
  .ix-quiz .ix-quiz__o, .ix-quiz__b { font-size: 16.5px; gap: var(--s-3); }
  .ix-quiz__go { grid-column: 2; text-align: left; }
  .ix-quiz__out .ix-quiz__todo, .ix-quiz__out .ix-quiz__side { grid-column: 1; grid-row: auto; }
}
@media print { .ix-quiz__foot { display: none; } }

/* ===== table.css ===== */
/* Сравнение (upsound/table): таблица тонкими линиями, шапка моно. Сортировка — кнопки в шапке (aria-sort, стрелка моно),
   фильтр — чипы .ix-chip по меткам, у строки с пояснением — «+» (JS). Без JS пояснение стоит строкой под своей строкой.
   На телефоне строки — карточки «подпись — значение», сортировка — кнопками над ними. */
.ix-table__filter { margin-top: var(--s-6); }
.ix-table__wrap { margin-top: var(--s-5); overflow-x: auto; }
.ix:not(:has(.ix-table__filter:not([hidden]))) .ix-table__wrap { margin-top: var(--s-6); }
.ix-table__t { width: 100%; border-collapse: collapse; font: 300 15.5px/1.5 var(--f-text); color: var(--ivory-2); }
.ix-table__t thead th { text-align: left; vertical-align: bottom; padding: 0 var(--s-5) var(--s-3) 0; border-bottom: 1px solid var(--rule-2);
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ix-table__t thead th.is-num { text-align: right; }
.ix-table__r > * { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-5) var(--s-4) 0; border-bottom: 1px solid var(--rule); font-weight: 300;
  transition: background-color var(--d-fast) var(--ease); }
.ix-table__t :is(thead th, .ix-table__r > *):last-child { padding-right: 0; }
.ix-table__r > th { width: 22%; }
.ix-table__r.has-note > * { border-bottom-color: transparent; }
.ix-table__name { display: block; font: 300 19px/1.25 var(--f-display); letter-spacing: -.025em; color: var(--ivory); }
.ix-table__tag { display: block; margin-top: 6px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ix-table__r > .is-num { text-align: right; font: 300 20px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-table__r > .is-num.is-txt { font: 300 15.5px/1.5 var(--f-text); letter-spacing: 0; color: var(--ivory-2); white-space: normal; }

/* пояснение: строка во всю ширину, текст — от второго столбца; раскрытие — grid-template-rows 0fr → 1fr */
.ix-table__nr > td { padding: 0; border-bottom: 1px solid var(--rule); }
.ix-table__note { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--d-mid) var(--slow); }
.ix-table__note > div { min-height: 0; overflow: hidden; }
.ix-table__note p { margin-left: var(--nl, 22%); padding: 0 0 var(--s-5); max-width: 68ch; font: 300 15.5px/1.55 var(--f-text); color: var(--ivory-2); }
.ix-table.is-live .ix-table__nr:not(.is-open) .ix-table__note { grid-template-rows: 0fr; }
.ix-table.is-live .ix-table__nr:not(.is-open) .ix-table__note > div { visibility: hidden; transition: visibility 0s var(--d-mid); }
.ix-table.is-live .ix-table__r.has-note { cursor: pointer; }
.ix-table.is-live .ix-table__r.has-note:hover > *, .ix-table__r.is-open > * { background: color-mix(in srgb, var(--ivory) 3%, transparent); }
.ix-table__r.is-open + .ix-table__nr > td { background: color-mix(in srgb, var(--ivory) 3%, transparent); }

/* «+» у названия строки и кнопки сортировки в шапке */
.ix-table__open, .ix-table__sort { appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.ix-table__open { display: flex; width: 100%; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.ix-table__pm { position: relative; flex: none; width: 11px; height: 11px; top: -.1em; }
.ix-table__pm::before, .ix-table__pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ivory-2); transition: transform var(--d-mid) var(--slow); }
.ix-table__pm::after { transform: rotate(90deg); }
.ix-table__open[aria-expanded="true"] .ix-table__pm::after { transform: rotate(0); }
.ix-table__sort { display: inline-flex; gap: 8px; align-items: baseline; transition: color var(--d-fast) var(--ease); }
.ix-table__sort:hover, .ix-table__t th[aria-sort] .ix-table__sort { color: var(--ivory); }
.ix-table__ar { font: 400 12px/1 var(--f-mono); opacity: .45; }
.ix-table__t th[aria-sort] .ix-table__ar { opacity: 1; }
.ix-table__t th.is-num .ix-table__sort { flex-direction: row-reverse; }
@media (prefers-reduced-motion: no-preference) {
  .ix-table__r.is-back, .ix-table__r.is-back + .ix-table__nr { animation: ix-table-in var(--d-mid) var(--ease) both; }
}
@keyframes ix-table-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ix-table__note, .ix-table__pm::before, .ix-table__pm::after { transition: none; }
}

@media (max-width: 640px) {
  .ix-table__wrap { overflow: visible; }
  .ix-table__t, .ix-table__t :is(thead, tbody, tr, th, td) { display: block; }
  .ix-table__t thead th { display: none; border: 0; padding: 0; }
  .ix-table.is-live .ix-table__t thead tr:has(th[data-sort]) { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule-2); }
  .ix-table.is-live .ix-table__t thead th[data-sort] { display: block; }
  .ix-table__t thead th .ix-table__sort { min-height: 40px; align-items: center; flex-direction: row; }
  .ix-table__r { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
  .ix-table__r.has-note { border-bottom: 0; padding-bottom: var(--s-3); }
  .ix-table__r > * { width: auto !important; padding: 0; border: 0; background: none !important; }
  .ix-table__r > td { margin-top: var(--s-3); }
  .ix-table__r > td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
  .ix-table__r > .is-num { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); text-align: right; }
  .ix-table__r > .is-num::before { margin: 0; }
  .ix-table__open { min-height: 40px; align-items: center; }
  .ix-table__note p { margin-left: 0; padding-left: var(--s-4); border-left: 1px solid var(--rule-2); margin-bottom: var(--s-5); padding-bottom: 0; }
  .ix-table__r.is-open + .ix-table__nr > td { background: none; }
}

/* ===== timeline.css ===== */
/* Путь / лента времени (upsound/timeline): нить слева, точки событий, огромная тонкая цифра справа.
   Нить у каждого события — два отрезка (до точки и после): заливку задаёт JS через --fa/--fb (0…1), без JS — 1, нить целиком.
   Красная точка — у текущего события (JS: .is-now), без JS и при «уменьшить движение» — у последнего. */
.ix-timeline { --tl-line: var(--rule-2); --tl-fill: var(--ivory); --tl-bg: var(--wall-2); --tl-dim: var(--mute); --tl-txt: var(--ivory-2); --tl-h: var(--ivory); }
.ix-timeline.ix--fog { --tl-line: var(--fog-rule); --tl-fill: var(--ink); --tl-bg: var(--fog); --tl-dim: var(--fog-mute); --tl-txt: var(--fog-ink-2); --tl-h: var(--ink); }
.ix-timeline__list { margin-top: var(--s-7); container-type: inline-size; }
.ix-timeline__ev { --hs: clamp(19px, 1.5vw, 22px); --x: 5px; --dy: calc(var(--hs) * .65); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when val" "body val"; grid-template-rows: auto 1fr; column-gap: var(--s-6); align-items: start; align-content: start; padding: 0 0 var(--s-7) 40px; }
.ix-timeline__ev.has-when { --dy: calc(18px + var(--s-2) + var(--hs) * .65); }
.ix-timeline__ev:last-child { padding-bottom: 0; }

/* нить: отрезок до точки (::before) и после (::after); светлая часть — фон-градиент высотой --f */
.ix-timeline__ev::before, .ix-timeline__ev::after { content: ""; position: absolute; left: calc(var(--x) - .5px); width: 1px;
  background: linear-gradient(var(--tl-fill), var(--tl-fill)) 0 0 / 100% calc(var(--f) * 100%) no-repeat var(--tl-line); }
.ix-timeline__ev::before { --f: var(--fa, 1); top: 0; height: calc(var(--dy) - 10px); }
.ix-timeline__ev::after { --f: var(--fb, 1); top: calc(var(--dy) + 10px); bottom: 0; }
.ix-timeline__ev:first-child::before, .ix-timeline__ev:last-child::after { content: none; }
.ix-timeline__dot { position: absolute; left: calc(var(--x) - 4.5px); top: calc(var(--dy) - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--tl-fill);
  transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d-mid) var(--slow); }
.ix-timeline__ev:last-child .ix-timeline__dot { background: var(--red); transform: scale(1.35); }

.ix-timeline__when { grid-area: when; font: 500 12px/18px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tl-dim); margin-bottom: var(--s-2); transition: color var(--d-fast) var(--ease); }
.ix-timeline__body { grid-area: body; }
.ix-timeline__h { font: 400 var(--hs)/1.3 var(--f-display); letter-spacing: -.025em; color: var(--tl-h); }
.ix-timeline__p { font: 300 16.5px/1.6 var(--f-text); color: var(--tl-txt); margin-top: var(--s-2); max-width: 54ch; }
.ix-timeline__val { grid-area: val; display: grid; justify-items: end; gap: var(--s-3); text-align: right; }
.ix-timeline .ix-timeline__num { font: 200 clamp(44px, 8.4cqi, 92px)/.8 var(--f-display); letter-spacing: -.06em; color: var(--tl-h); white-space: nowrap; transition: color var(--d-mid) var(--ease); }
.ix-timeline__unit { font: 500 11px/1.45 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tl-dim); max-width: 22ch; }

/* с JS: пройденные точки светлые, будущие — кольцо; цифра светится, когда до неё дочитали */
.ix-timeline.is-live .ix-timeline__dot { background: var(--tl-bg); box-shadow: inset 0 0 0 1px var(--tl-line); transform: none; }
.ix-timeline.is-live .is-past .ix-timeline__dot { background: var(--tl-fill); box-shadow: none; }
.ix-timeline.is-live .is-now .ix-timeline__dot { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); transform: scale(1.35); }
.ix-timeline.is-live .ix-timeline__ev:not(.is-past) .ix-timeline__num { color: var(--tl-dim); }
.ix-timeline.is-live .is-now .ix-timeline__when { color: var(--tl-h); }
@media (prefers-reduced-motion: no-preference) {
  .ix-timeline__body, .ix-timeline__val { transition: opacity var(--d-mid) var(--ease), transform var(--d-slow) var(--slow); }
  .ix-timeline__when { transition: color var(--d-fast) var(--ease), opacity var(--d-mid) var(--ease); }
  .ix-timeline__val { transition-delay: .12s; }
  .ix-timeline.is-live .ix-timeline__ev:not(.is-on) :is(.ix-timeline__body, .ix-timeline__val) { opacity: 0; transform: translateY(16px); }
  .ix-timeline.is-live .ix-timeline__ev:not(.is-on) .ix-timeline__when { opacity: 0; }
}

/* до правого поля: «когда» — отдельной колонкой слева от нити */
@container (min-width: 760px) {
  .ix-timeline__ev, .ix-timeline__ev.has-when { --x: 152px; --dy: calc(var(--hs) * .65); padding-left: 188px; grid-template-areas: "body val"; grid-template-rows: auto; }
  .ix-timeline__when { position: absolute; grid-area: auto; left: 0; top: calc(var(--dy) - 9px); width: 128px; margin: 0; text-align: right; }
}
/* телефон: цифра под текстом */
@container (max-width: 559px) {
  .ix-timeline__ev { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "body" "val"; grid-template-rows: auto; padding-left: 32px; }
  .ix-timeline__val { justify-items: start; text-align: left; margin-top: var(--s-4); }
  .ix-timeline .ix-timeline__num { font-size: clamp(44px, 15cqi, 64px); }
  .ix-timeline__p { font-size: 16px; }
}
@media print {
  .ix-timeline__ev > * { opacity: 1 !important; transform: none !important; }
}

/* ===== tool.css ===== */
/* tool — инструмент по месту: одна строка-ссылка в колонке текста между линиями. Предмет · метка и строка · кнопка.
   Предметы оживают под курсором строки: 3D-иконка (icons3d.js), «кружок» экскурсии (site.js), книга и снимок — наклон (data-tilt). Своего JS нет. */
.ix-tool { margin-block: 2.4em !important; }
.ix-tool__in { --pic: 72px; display: grid; grid-template-columns: var(--pic) minmax(0, 1fr) auto; grid-template-areas: "pic k go" "pic t go"; column-gap: clamp(18px, 2vw, 28px); row-gap: 6px; align-items: center;
  padding: 20px 0; border-block: 1px solid var(--rule-2); color: var(--ivory); background: none !important; }
.ix-tool__in > .ico3d, .ix-tool__pic { grid-area: pic; justify-self: center; }
.ix-tool__in > .ico3d { --ico: 60px; }
.ix-tool__k { grid-area: k; align-self: end; font: 400 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: color var(--d-fast) var(--ease); }
/* b внутри статьи: правило .prose b (вес 500, цвет ivory) перебиваем двумя классами */
.ix-tool .ix-tool__k b { font-weight: 500; color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.ix-tool__t { grid-area: t; align-self: start; font: 300 17px/1.45 var(--f-text); color: var(--ivory); max-width: 48ch; text-wrap: pretty; }
.ix-tool__go { grid-area: go; }
.ix-tool__in:hover .ix-tool__go, .ix-tool__in:focus-visible .ix-tool__go { border-color: var(--ivory); }
.ix-tool__in:hover .ix-tool__go svg { transform: translateX(4px); }
.ix-tool__in:hover .ix-tool__k b { color: var(--ivory); }
.ix-tool__in:focus-visible { outline-offset: 6px; }

/* предметы */
.ix-tool__pic img { display: block; width: 100%; height: auto; }
.ix-tool__pic--face .face { display: block; width: 56px; height: 56px; box-shadow: 0 0 0 1.5px var(--red); }
.ix-tool__pic--shot, .ix-tool__pic--book { --rx: 0; --ry: 0; transition: transform 1s var(--slow); }
.ix-tool--ai .ix-tool__in { --pic: clamp(104px, 9vw, 128px); }
.ix-tool__pic--shot { width: 100%; transform: perspective(700px) rotateX(calc(var(--rx) * .5deg)) rotateY(calc(-14deg + var(--ry) * .6deg)); }
.ix-tool__pic--shot img { border: 1px solid var(--rule-2); box-shadow: 0 22px 30px -16px rgba(0, 0, 0, .9); }
.ix-tool__pic--book { width: 74px; transform: perspective(600px) rotateX(calc(var(--rx) * .5deg)) rotateY(calc(var(--ry) * .8deg)); }
.ix-tool__pic--book img { filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55)); }
/* автор курса и будильник календаря стоят на нижней линии строки */
.ix-tool__pic--bust { width: 92px; align-self: end; margin-bottom: -20px; filter: grayscale(1); }
.ix-tool__pic--clock { width: 50px; transform: rotate(-4deg); transition: transform .9s var(--slow); }
.ix-tool__in:hover .ix-tool__pic--clock { transform: rotate(3deg) translateY(-3px); }

@media (prefers-reduced-motion: reduce) { .ix-tool__pic--shot, .ix-tool__pic--book, .ix-tool__pic--clock { transition: none; } }
@media (max-width: 640px) {
  .ix-tool__in { --pic: 56px; grid-template-columns: var(--pic) minmax(0, 1fr); grid-template-areas: "pic k" "pic t" ". go"; column-gap: 16px; padding: 18px 0; }
  .ix-tool--ai .ix-tool__in { --pic: 84px; }
  .ix-tool__go { justify-self: start; margin-top: 10px; }
  .ix-tool__in > .ico3d { --ico: 48px; }
  .ix-tool__pic--book { width: 58px; }
  .ix-tool__pic--bust { width: 56px; margin-bottom: 0; align-self: start; }
  .ix-tool__pic--face .face { width: 48px; height: 48px; }
  .ix-tool__t { font-size: 16px; }
}