/* Инфографика setkadv.ru — общая основа. Тёмная тема сайта, Oswald/Inter самохостом.
   Числа и кривые — из реверса эталонов (02-revers-recepty.md): Apple, Reuters, OWID, Pudding, Zekelman, Terminal.
   Всё видно без JS: скрытые состояния включаются только под html.ig-js. */
.ig {
  --ig-page: #111214;
  --ig-card: #161819;
  --ig-deep: #0a0a0a;
  --ig-line: #2a2d30;
  --ig-line-2: #3a3e42;
  --ig-head: #f5f2ee;
  --ig-text: #d4d0cb;
  --ig-muted: #8a8a8a;
  --ig-accent: #F5C518;
  --ig-accent-2: #FFD740;
  --ig-accent-dim: rgba(245, 197, 24, .14);
  --ig-neutral: #6b7076;
  --ig-neutral-2: #4a4e53;
  --ig-steel: #b9c0c7;
  --ig-concrete: #2c2f33;
  --ig-r-s: 4px;
  --ig-r-m: 8px;
  --ig-r-l: 16px;
  --ig-ease-out: cubic-bezier(.2, 0, 0, 1);
  --ig-ease-bar: cubic-bezier(.33, 1, .68, 1);
  --ig-ease-io: cubic-bezier(.65, 0, .35, 1);
  --ig-ease-pulse: cubic-bezier(.215, .61, .355, 1);
  --ig-t-hover: 200ms;
  --ig-t-in: 800ms;
  --ig-t-bar: 1200ms;
  --ig-t-draw: 1600ms;
  --ig-fs-num-xl: clamp(44px, 6.4vw, 88px);
  --ig-fs-num-l: clamp(34px, 4.2vw, 56px);
  --ig-fs-num-m: clamp(26px, 3vw, 40px);
  --ig-fs-title: clamp(26px, 3.4vw, 42px);
  --ig-pad: clamp(18px, 3.2vw, 40px);

  box-sizing: border-box;
  position: relative;
  max-width: 1200px;
  margin: 0 auto clamp(28px, 5vw, 64px);
  padding: var(--ig-pad);
  background: var(--ig-card);
  border: 1px solid var(--ig-line);
  border-radius: var(--ig-r-l);
  color: var(--ig-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.ig *, .ig *::before, .ig *::after { box-sizing: border-box; }

/* Анатомия блока: метка → заголовок-вопрос → лид → фигура → крупные числа → действие → источник */
.ig__kicker {
  display: flex; gap: 10px; align-items: baseline;
  margin: 0 0 12px;
  font: 500 11px/1.2 'Inter', sans-serif;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ig-accent);
}
.ig__kicker b { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.ig__title {
  margin: 0 0 12px;
  font: 700 var(--ig-fs-title)/1.06 'Oswald', sans-serif;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--ig-head);
  max-width: 22ch;
}
.ig__lead { margin: 0 0 clamp(20px, 3vw, 32px); max-width: 62ch; font-size: clamp(15px, 1.4vw, 18px); color: var(--ig-text); }
.ig__lead mark, .ig mark.ig-hl { background: none; color: var(--ig-accent); font-weight: 500; }
.ig__lead mark.ig-hl--n, .ig mark.ig-hl--n { color: var(--ig-steel); }
.ig__fig { position: relative; margin: 0; }
.ig__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.ig__source {
  margin: clamp(18px, 2.4vw, 28px) 0 0; padding-top: 14px;
  border-top: 1px solid var(--ig-line);
  font-size: 13px; line-height: 1.45; color: var(--ig-muted);
}
.ig__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(18px, 2.4vw, 26px); padding: 13px 22px;
  background: var(--ig-accent); color: #111214; text-decoration: none;
  font: 600 14px/1 'Oswald', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--ig-r-s);
  transition: background-color var(--ig-t-hover) ease, transform var(--ig-t-hover) ease;
}
.ig__cta:hover { background: var(--ig-accent-2); }
.ig__cta:active { transform: translateY(1px); }
.ig__cta--ghost { background: transparent; color: var(--ig-accent); box-shadow: inset 0 0 0 1px var(--ig-accent); }
.ig__cta--ghost:hover { background: var(--ig-accent-dim); }

/* Крупные числа (Apple): одна базовая линия, отрицательный трекинг, подпись 13–14px */
.ig-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(14px, 2.4vw, 28px); margin-top: clamp(20px, 3vw, 32px); }
.ig-num { border-top: 1px solid var(--ig-line); padding-top: 14px; }
.ig-num__v {
  display: block;
  font: 600 var(--ig-fs-num-l)/1 'Oswald', sans-serif;
  letter-spacing: -.01em; color: var(--ig-head);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.ig-num__v small { font-size: .42em; font-weight: 400; letter-spacing: 0; margin-left: .15em; color: var(--ig-muted); }
.ig-num--accent .ig-num__v { color: var(--ig-accent); }
.ig-num__l { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ig-muted); }

/* Полоса сравнения (Apple): 10px, радиус 5px, выезжает маской */
.ig-bar { position: relative; height: 10px; border-radius: 5px; background: var(--ig-line); overflow: hidden; }
.ig-bar > i { position: absolute; inset: 0; border-radius: 5px; background: var(--ig-accent); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }
.ig-bar--n > i { background: var(--ig-neutral); }

/* Переключатели (вкладки-пилюли) */
.ig-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(16px, 2.4vw, 24px); padding: 0; list-style: none; }
.ig-tab {
  appearance: none; cursor: pointer;
  padding: 9px 14px; min-height: 40px;
  background: transparent; color: var(--ig-text);
  border: 1px solid var(--ig-line-2); border-radius: 999px;
  font: 400 14px/1.2 'Inter', sans-serif;
  transition: background-color var(--ig-t-hover) ease, color var(--ig-t-hover) ease, border-color var(--ig-t-hover) ease;
}
.ig-tab:hover { border-color: var(--ig-muted); color: var(--ig-head); }
.ig-tab[aria-selected="true"], .ig-tab[aria-pressed="true"] { background: var(--ig-accent); border-color: var(--ig-accent); color: #111214; font-weight: 500; }
.ig-tab:focus-visible, .ig__cta:focus-visible, .ig input:focus-visible { outline: 2px solid var(--ig-accent-2); outline-offset: 2px; }

/* Поле ввода для мини-калькуляторов */
.ig-field { display: inline-flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ig-muted); }
.ig-field input {
  width: 9ch; padding: 10px 12px; min-height: 44px;
  background: var(--ig-page); color: var(--ig-head);
  border: 1px solid var(--ig-line-2); border-radius: var(--ig-r-s);
  font: 600 20px/1 'Oswald', sans-serif; font-variant-numeric: tabular-nums;
}
.ig input[type="range"] { width: 100%; accent-color: var(--ig-accent); }

/* SVG: подписи прямо на графике с ореолом цвета фона (Reuters), сетка пунктиром (OWID) */
.ig .t { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; fill: var(--ig-text); }
.ig .t-m { fill: var(--ig-muted); }
.ig .t-h { fill: var(--ig-head); }
.ig .t-a { fill: var(--ig-accent); }
.ig .t-num { font-family: 'Oswald', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.ig .t-halo { paint-order: stroke fill; stroke: var(--ig-card); stroke-width: 3px; stroke-linejoin: round; }
.ig .grid { stroke: var(--ig-line); stroke-width: 1; stroke-dasharray: 3 2; fill: none; }
.ig .dim { stroke: var(--ig-muted); stroke-width: 1; fill: none; }
.ig .rod { stroke: var(--ig-steel); stroke-linecap: round; fill: none; }
.ig .rod-a { stroke: var(--ig-accent); }
.ig .rod-n { stroke: var(--ig-neutral); }

/* Пульс-метка (Zekelman) и волна на карте (Reuters) */
.ig-pulse { transform-box: fill-box; transform-origin: center; animation: ig-pulse 1.25s var(--ig-ease-pulse) infinite; }
.ig-ripple { transform-box: fill-box; transform-origin: center; animation: ig-ripple 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.ig-ripple--2 { animation-delay: 1.3s; }
@keyframes ig-pulse { 0% { transform: scale(.33); opacity: 1; } 80%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ig-ripple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.ig:not(.is-live) .ig-pulse, .ig:not(.is-live) .ig-ripple { animation-play-state: paused; }

/* Появление при скролле — только при включённом JS (html.ig-js) */
.ig-js .ig [data-ig-in] { opacity: 0; transform: translateY(24px); transition: opacity var(--ig-t-in) var(--ig-ease-out), transform var(--ig-t-in) var(--ig-ease-out); transition-delay: calc(var(--i, 0) * 100ms); }
.ig-js .ig.is-in [data-ig-in] { opacity: 1; transform: none; }
.ig-js .ig .ig-bar > i { transform: scaleX(0); transition: transform var(--ig-t-bar) var(--ig-ease-bar); transition-delay: calc(300ms + var(--i, 0) * 100ms); }
.ig-js .ig.is-in .ig-bar > i { transform: scaleX(var(--v, 1)); }
.ig-js .ig [data-ig-draw] { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset var(--ig-t-draw) var(--ig-ease-io); transition-delay: calc(200ms + var(--i, 0) * 60ms); }
.ig-js .ig.is-in [data-ig-draw] { stroke-dashoffset: 0; }

/* Две колонки фигура/текст на широком, одна на телефоне */
.ig-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3.6vw, 48px); align-items: start; }
@media (max-width: 760px) { .ig-split { grid-template-columns: 1fr; } .ig .t { font-size: 12px; } }

/* 3D-сцена (IG.view3d): тёмная сцена, кнопки — как вкладки. Без JS и без WebGL фигуры нет. */
.ig-3d { margin: clamp(18px, 2.6vw, 28px) 0 0; }
.ig-3d__stage { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--ig-line); border-radius: var(--ig-r-m); overflow: hidden;
  background: radial-gradient(120% 90% at 62% 28%, #2a2d30 0%, var(--ig-deep) 72%); }
.ig-3d__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.ig-3d__cv:active { cursor: grabbing; }
.ig-3d.is-wait .ig-3d__stage::after { content: '3D-модель загружается…'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--ig-muted); }
.ig-3d__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ig-3d__hint { margin-left: auto; font-size: 12px; color: var(--ig-muted); }
.ig-3d__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ig-muted); }
.ig-3d__facts b { color: var(--ig-head); font-weight: 500; font-variant-numeric: tabular-nums; }
.ig-3d:not(.is-ready) .ig-3d__bar .ig-tab { opacity: .45; pointer-events: none; }
html:not(.ig-js) .ig-3d { display: none; }
@media (max-width: 640px) { .ig-3d__stage { aspect-ratio: 4 / 3; } .ig-3d__hint { margin-left: 0; width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .ig *, .ig *::before, .ig *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .ig-js .ig [data-ig-in] { opacity: 1; transform: none; }
  .ig-js .ig [data-ig-draw] { stroke-dashoffset: 0; }
  .ig-js .ig .ig-bar > i { transform: scaleX(var(--v, 1)); }
}