/* Par Finansēm — приёмы издания.
 *
 * Базовая разлиновка лежит в application.css, здесь — то, что делает
 * страницу изданием, а не документом: буквица, нумерация разделов,
 * вынос цитаты, полоса чтения, карточка автора, тёмный подвал.
 *
 * Правило одно: каждый приём должен что-то сообщать читателю. Полоса
 * показывает, сколько осталось; номер раздела — где он в статье; цвет
 * метки — к какому разделу материал. Украшений без работы здесь нет.
 */

/* --- полоса чтения --------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  width: 0;
  background: var(--accent);
  transition: width .1s linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .progress { transition: none; }
}

/* --- буквица --------------------------------------------------------------- */

/* Первая буква статьи крупно: глаз сразу находит, откуда читать.
   Только в статье: на служебных страницах первый абзац — подзаголовок,
   и буквица в нём выглядит опечаткой. */
.article-body .prose > p:first-of-type::first-letter {
  float: inline-start;
  margin: .06em .1em 0 0;
  font-family: var(--sans);
  font-size: 3.5em;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.04em;
  color: var(--accent);
}

/* --- нумерация разделов ---------------------------------------------------- */

.prose { counter-reset: section; }

.prose h2 {
  counter-increment: section;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}

/* Номер живёт над заголовком: в узкой колонке выносить его на поля
   некуда, а сверху он работает как маркер новой части. */
.prose h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--accent);
}

.prose h2:first-child { padding-top: 0; border-top: 0; }

/* --- вынос цитаты ---------------------------------------------------------- */

.prose blockquote {
  position: relative;
  margin: 1.9em 0;
  padding: 0 0 0 48px;
  border: 0;
  font-family: var(--sans);
  font-size: 1.22em;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--ink);
}

.prose blockquote::before {
  content: "”";
  position: absolute;
  inset-inline-start: 0;
  top: -.28em;
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: 1;
  color: var(--accent);
}

.prose blockquote p { margin: 0; }

/* --- таблицы --------------------------------------------------------------- */

.prose tbody tr:nth-child(even) { background: var(--surface); }
.prose thead th { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.prose td:first-child, .prose th:first-child { padding-inline-start: 12px; }

/* --- карточка автора ------------------------------------------------------- */

.author-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 2.4em;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}

.author-card__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
}

.author-card__name { font-family: var(--sans); font-size: 1.02rem; font-weight: 800; }
.author-card__role { font-family: var(--sans); font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.author-card__bio { margin: 9px 0 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* --- пропорция обложек ------------------------------------------------------ */

/* Обложка рисуется 1200×630 и несёт заголовок внутри. Кадрирование
   в другую пропорцию срезает ему края — показываем как есть. */
.entry img, .tile img { aspect-ratio: 1200 / 630; }

/* --- живые состояния ------------------------------------------------------- */

/* Картинка чуть приближается, заголовок подчёркивается: полоска растёт
   от начала строки, а не появляется целиком. */
.entry__media, .tile a:has(img), .lead-story__media { overflow: hidden; }

.entry__media img, .tile img, .lead-story__media img {
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

.entry:hover .entry__media img,
.tile:hover img,
.lead-story:hover .lead-story__media img { transform: scale(1.04); }

.entry__title a, .tile__title a, .lead-story__title a, .rail__title {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .28s cubic-bezier(.2, .6, .2, 1);
}

.entry__title a:hover, .tile__title a:hover,
.lead-story__title a:hover, .rail__title:hover { background-size: 100% 2px; }

.sections a { position: relative; }

.sections a::after {
  content: "";
  position: absolute;
  inset-inline: 11px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.sections a:hover::after { transform: scaleX(1); }

.btn { position: relative; overflow: hidden; }
.btn::after { content: "→"; font-size: 1.05em; transition: transform .25s ease; }
.btn:hover::after { transform: translateX(3px); }
.btn--noarrow::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .entry__media img, .tile img, .lead-story__media img,
  .entry__title a, .tile__title a, .lead-story__title a, .rail__title,
  .sections a::after, .btn::after { transition: none; }
  .entry:hover .entry__media img, .tile:hover img,
  .lead-story:hover .lead-story__media img { transform: none; }
}

/* --- бегущая строка с данными ---------------------------------------------- */

/* Показатели рынка строкой под шапкой — приём финансовых изданий.
   Появляется только когда значения заполнены. */
.ticker {
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}

.ticker__label {
  flex: none;
  padding: 9px 14px;
  background: var(--accent);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__track {
  display: flex;
  gap: 34px;
  padding: 9px 20px;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticker__item span { color: rgba(255, 255, 255, .6); }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* --- заголовок раздела с цветом -------------------------------------------- */

.section-hero {
  padding-block: 34px 26px;
  border-bottom: 2px solid var(--ink);
}

.section-hero__rule { width: 84px; height: 6px; background: var(--tag, var(--accent)); margin-bottom: 18px; }
.section-hero h1 { max-width: 16ch; }
.section-hero .standfirst { margin-top: 12px; }

/* Полоса цвета у подборки: раздел узнаётся до чтения заголовка. */
.band--tinted .band__head { border-bottom-color: var(--tag, var(--ink)); }
.band--tinted .band__head h2 { display: flex; align-items: center; gap: 12px; }
.band--tinted .band__head h2::before { content: ""; width: 14px; height: 14px; background: var(--tag, var(--accent)); flex: none; }

/* --- тёмный подвал --------------------------------------------------------- */

.site-foot { background: var(--ink); color: #b9bcc2; border-top: 0; }
.site-foot a { color: #b9bcc2; }
.site-foot a:hover { color: #fff; }
.site-foot .logo { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
.site-foot .logo__par { color: #8c9098; }

/* Подвал тёмный: плитка выворачивается в золото, и подпись в ней
   наконец читается — знак здесь вдвое крупнее, чем в шапке. */
.site-foot .logo__mark { background: var(--gold); color: var(--ink); justify-content: space-between; padding-block: .34em .26em; }
.site-foot .logo__num { color: var(--accent); }
.site-foot .logo__sym { margin-block: auto; }

.site-foot .logo__cap {
  display: block;
  font-family: var(--sans);
  font-size: .2em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  opacity: .66;
}

.site-foot .logo:hover .logo__mark { background: #fff; }
.foot-grid h4 { color: #71757d; }
.foot-about p { color: #8c9098; }
.foot-legal { border-top-color: rgba(255, 255, 255, .1); color: #71757d; }
.foot-legal strong { color: #b9bcc2; }

/* --- главная: верхний блок ------------------------------------------------- */

/* Ведущий материал и два спутника рядом: страница сразу выглядит как
   выпуск, а не как один текст с продолжением. */
.top-block { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); padding-block: clamp(26px, 3.5vw, 44px); border-bottom: 2px solid var(--ink); }
.top-block__side { display: flex; flex-direction: column; gap: 20px; border-inline-start: 1px solid var(--rule); padding-inline-start: clamp(20px, 2.5vw, 34px); }
.top-block__side .entry { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 0; border-top: 0; }
.top-block__side .entry + .entry { padding-top: 20px; border-top: 1px solid var(--rule); }
.top-block__side .entry__title { font-size: 1.06rem; margin-block: 6px 0; }


@media (max-width: 900px) {
  .top-block { grid-template-columns: minmax(0, 1fr); }
  .top-block__side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
}

@media (max-width: 680px) {
  .article-body .prose > p:first-of-type::first-letter { font-size: 3em; }
  .prose blockquote { padding-inline-start: 36px; font-size: 1.14em; }
  .prose blockquote::before { font-size: 2.8em; }
  .author-card { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; }
  .author-card__avatar { width: 46px; height: 46px; font-size: 15px; }
  .ticker__label { padding: 8px 11px; }
}

/* --- заголовок раздела: цифра и призрачная литера ---------------------------- */

.section-hero { position: relative; overflow: hidden; }
.section-hero > * { position: relative; z-index: 1; }

/* Литера раздела на полях: на развороте это работает как колонцифра —
   глаз ловит, где он оказался, раньше, чем читает заголовок.
   Отступ сверху положительный: при отрицательном литера поднималась
   до строки хлебных крошек, и её макушку срезал `overflow: hidden` —
   получалась не литера, а обрубок. Теперь она стоит внутри блока. */
.section-hero::after {
  content: attr(data-ghost);
  position: absolute;
  z-index: 0;
  inset-block-start: .1em;
  inset-inline-end: 0;
  font-family: var(--sans);
  font-size: clamp(9rem, 4rem + 16vw, 17rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.06em;
  color: var(--tag, var(--accent));
  opacity: .11;
  pointer-events: none;
  user-select: none;
}

.section-hero__count {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.section-hero + .chips { margin-block: 20px 10px; }

/* Фильтр разделов несёт те же цвета, что метки в потоке. */
.chip { transition: border-color .2s ease, color .2s ease; }
.chip:hover { border-color: var(--tag, var(--ink)); color: var(--tag, var(--ink)); }
.chip[aria-current] { background: var(--tag, var(--ink)); border-color: var(--tag, var(--ink)); color: #fff; }

/* --- шапка, которая едет с читателем ---------------------------------------- */

/* Верхняя строка с датой уезжает за край, навигация остаётся: со второго
   экрана от шапки нужен только переход в раздел. Липкой делается вся
   шапка — sticky работает в пределах родителя, и на одной лишь
   .masthead__main прилипать было бы некуда. */
:root { --nav-h: 68px; --top-row-h: 41px; }

.masthead {
  position: sticky;
  top: calc(-1 * var(--top-row-h));
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}

@supports not (backdrop-filter: blur(12px)) {
  .masthead { background: var(--paper); }
}

/* Всё, что само прилипает к верху, обязано пропустить шапку вперёд. */
.toc { top: calc(var(--nav-h) + 18px); }
.prose h2, .prose h3 { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* Открытое меню на узком экране не должно уезжать под край. */
.masthead[data-open="true"] { top: 0; }

/* --- нумерация ленты на главной --------------------------------------------- */

/* Лента свежего читается как выпуск: у каждого материала свой номер. */
.river .stream { counter-reset: entries; }

.river .stream .entry__title { counter-increment: entries; }

.river .stream .entry__title::before {
  content: counter(entries, decimal-leading-zero);
  float: inline-start;
  margin-inline-end: 10px;
  font-family: var(--sans);
  font-size: .62em;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

/* --- подбор мелочей --------------------------------------------------------- */

/* Метка раздела: подложка вместо обводки при наведении — заметно,
   но строку не дёргает. */
.tag { transition: background-color .2s ease, color .2s ease; }

.entry__excerpt, .lead-story__excerpt { text-wrap: pretty; }
h1, h2, h3, .lead-story__title, .entry__title, .tile__title { text-wrap: balance; }

/* Первая линейка подвала — золотом: подвал почти чёрный, и петролевая
   линия на нём не видна, а переход без линии читается как обрыв. */
.site-foot { border-top: 4px solid var(--gold); }

/* --- верхний блок: ведущий материал в один столбец ---------------------------- */

/* В левой колонке развёрстка в два столбца не помещается: картинка идёт
   сверху, текст под ней — как на первой полосе. */
.top-block .lead-story {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding-block: 0;
  border-bottom: 0;
}

.top-block .lead-story__media { order: -1; }
.top-block .lead-story__title { max-width: none; }
.top-block .lead-story__excerpt { max-width: 56ch; }

/* --- подзаголовок ленты ------------------------------------------------------ */

.stream__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Точка у подзаголовка: издание живое, лента обновляется. */
.stream__head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.78); }
}

@media (prefers-reduced-motion: reduce) {
  .stream__head::before { animation: none; }
}

/* Линейка «Свежие статьи» — граница блока, а не строка таблицы: вплотную
   к ней первая статья читалась как её продолжение. */
.river > div:first-child > .stream { padding-top: 22px; }

/* --- таблица шире колонки ---------------------------------------------------- */

/* Колонка текста узкая ради чтения, а таблице узость мешает: цифры
   в ней читаются построчно. На широком экране она занимает поле,
   которое иначе простаивает. */
@media (min-width: 1100px) {
  .prose .table-wrap {
    width: calc(100% + 40px);
    max-width: calc(100vw - 2 * var(--gutter));
  }
}

/* --- пустой раздел ---------------------------------------------------------- */

.empty {
  padding: 46px 24px;
  border: 1px dashed var(--rule);
  text-align: center;
  font-family: var(--sans);
  color: var(--ink-faint);
}

/* --- шапка статьи ------------------------------------------------------------ */

/* Цвет раздела над заголовком: читатель приходит из поиска сразу сюда,
   и раздел должен читаться до того, как он дойдёт до метки. */
.article-head { position: relative; margin-top: 22px; padding-top: 28px; }

.article-head::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 84px;
  height: 6px;
  background: var(--tag, var(--accent));
}

/* Хвост статьи занимает колонку целиком — как и текст над ним. Раньше
   каждый блок обрезался по 66 знакам своего шрифта, а шрифты разные:
   три блока подряд кончались в трёх разных местах, и низ статьи
   выглядел обрывками. */
.author-card,
.article-body .note--legal,
.article-body .inline-cta { max-width: none; }

/* --- страница статьи: та же полоса, что у всего портала ---------------------- */

/* Статья шла в суженной полосе и отходила от шапки на ладонь с каждой
   стороны — страница выглядела вставкой из другого макета. Теперь полоса
   общая: шапка статьи идёт во всю ширину, как первая полоса газеты, а
   ниже — колонка текста и оглавление справа. Ширину колонки задаёт не
   счёт знаков, а само оглавление: --rail-take вычитается из полосы, и
   обложка, текст и хвост встают по одной правой границе.
   Где оглавления нет (калькуляторы, показатель, автор), вычитать
   нечего — страница идёт во всю ширину. */
.wrap--article { --rail: 300px; --rail-gap: clamp(28px, 3.5vw, 64px); --rail-take: 0px; }

.wrap--story { --rail-take: calc(var(--rail) + var(--rail-gap)); }

/* Обложка — по колонке текста. Во всю полосу она забирает весь экран,
   и до первой строки статьи приходится прокручивать. */
.wrap--story > .figure-photo { max-width: calc(100% - var(--rail-take)); }

.article-body { grid-template-columns: minmax(0, 1fr) var(--rail, 300px); gap: var(--rail-gap, 64px); }

/* Ширину текста держит колонка, а не счёт знаков: иначе рядом с ней
   оставалась пустая четверть, а хвост статьи кончался дальше текста.
   Строка стала длиннее — кегль на полшага крупнее. */
.article-body .prose { max-width: none; }

@media (min-width: 1041px) {
  .article-body .prose { font-size: 20px; }
}

/* На узком экране оглавление уходит наверх: вычитать из колонки нечего,
   и второй колонки в сетке больше нет. Правило лежит здесь, а не в
   application.css: там оно стоит выше по файлу, и правило выше проигрывает
   при равном весе — сетка осталась бы двухколоночной на телефоне. */
@media (max-width: 1040px) {
  .wrap--story { --rail-take: 0px; }
  .article-body { grid-template-columns: minmax(0, 1fr); }
}

/* --- линейка издания вверху страницы ----------------------------------------- */

/* Полоса чтения не висит сама по себе, а заполняет фирменную линейку —
   ту, что у печатного издания идёт над колонтитулом. */
.masthead { border-top: 4px solid var(--accent-soft); }
.progress { height: 4px; }

/* --- обложки на бумаге -------------------------------------------------------- */

/* Бумага тёплая, обложки светлые: без тонкой границы они растворяются
   в фоне и полоса материалов теряет ритм. */
.entry img, .tile img, .lead-story img, .figure-photo img, .top-block__side img {
  border: 1px solid rgba(20, 23, 28, .08);
}

/* --- лента: строка как объект ------------------------------------------------- */

.stream .entry {
  padding-inline: 12px;
  margin-inline: -12px;
  transition: background-color .2s ease;
}

.stream .entry:hover { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .stream .entry { transition: none; }
}

/* --- подборка ----------------------------------------------------------------- */

.band__more { display: inline-flex; align-items: center; gap: 6px; }
.band__more::after { content: "→"; transition: transform .25s ease; }
.band__more:hover::after { transform: translateX(4px); }

.tile { display: flex; flex-direction: column; }
.tile > a:has(img) { display: block; overflow: hidden; }

.tiles .tile img { margin-bottom: 12px; }

.rail__sections a { display: flex; align-items: center; justify-content: space-between; }
.rail__sections a::after { content: "→"; color: var(--ink-faint); transition: transform .22s ease; }
.rail__sections a:hover::after { transform: translateX(4px); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .band__more::after, .rail__sections a::after { transition: none; }
}

/* --- блок про заявку ----------------------------------------------------------- */

/* Единственное коммерческое место на главной. Раз оно всё равно
   выделяется, пусть выделяется фирменным цветом, а не рекламной
   рамкой: так оно читается как блок издания, а не как баннер. */
.aside-note {
  padding: 22px 20px;
  background: var(--accent);
  color: #eef4f2;
  border-top: 4px solid var(--gold);
}

.aside-note b { font-size: 1.05rem; color: #fff; letter-spacing: -.02em; }
.aside-note p { color: rgba(238, 244, 242, .78); }
.aside-note .btn { background: var(--gold); color: var(--ink); }
.aside-note .btn:hover { background: #fff; color: var(--ink); }

/* --- данные рынка --------------------------------------------------------------- */

.figures { border-top-width: 3px; }
.figure { padding-inline: 20px 20px; border-inline-start: 1px solid var(--rule); }
.figure:first-child { border-inline-start: 0; padding-inline-start: 0; }
.figure__n { color: var(--accent); }
.figure__l { font-weight: 600; color: var(--ink); }

/* --- врезка под статьёй ---------------------------------------------------------- */

.inline-cta {
  padding: 22px;
  border-block: 0;
  border-top: 4px solid var(--accent);
  background: var(--surface);
}

/* --- кнопки ---------------------------------------------------------------------- */

.btn {
  letter-spacing: -.01em;
  transition: background-color .2s ease, transform .2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn--ghost:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* --- лента короче колонки ------------------------------------------------------- */

/* На молодом сайте материалов меньше, чем пунктов в правой колонке,
   и слева зияет пустое поле. Тогда колонка встаёт под ленту в ряд. */
.river--short { grid-template-columns: minmax(0, 1fr); gap: 34px; }

.river--short .rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  align-items: start;
  padding-top: 30px;
  border-top: 2px solid var(--ink);
}

@media (max-width: 640px) {
  .river--short .rail { grid-template-columns: minmax(0, 1fr); }
}

/* --- бумага с фактурой ---------------------------------------------------------- */

/* Обложки собираются с зерном (feTurbulence в SVG). Ровный белый фон рядом
   с ними выглядит мёртвым, поэтому то же зерно лежит и на бумаге —
   еле заметное, но страница перестаёт быть плоской заливкой. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- служебные страницы --------------------------------------------------------- */

/* Заголовок и текст стояли вплотную: у .section не было отступа до прозы. */
.section > .prose { margin-top: 20px; }

/* --- лента раздела плашками ---------------------------------------------------- */

/* Список в строку занимал экран на пять материалов. Плашки ставят
   в ряд столько, сколько влезает, и раздел виден целиком. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
  padding-block: 24px 54px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--tag, var(--accent));
  transition: border-color .2s ease, transform .2s ease;
}

.card:hover { transform: translateY(-2px); }
.card:hover { border-inline-color: var(--rule); border-bottom-color: var(--rule); }

.card__media { display: block; overflow: hidden; }
.card__media img { border: 0; border-bottom: 1px solid var(--rule); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 15px 17px 16px;
}

.card__title { font-size: 1.06rem; line-height: 1.26; }
.card__title a:hover { color: var(--accent); }

.card__excerpt {
  margin: 0;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Подпись прижата к низу: у плашек разной высоты строки дат иначе
   гуляют по ряду и сетка перестаёт читаться как сетка. */
.card .meta {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  gap: 8px;
  font-size: 12.5px;
}

.cards .empty { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

@media (max-width: 620px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* --- переключатель вида ---------------------------------------------------------- */

.views { display: inline-flex; margin-top: 18px; border: 1px solid var(--rule); }

.view {
  padding: 8px 15px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.view + .view { border-inline-start: 1px solid var(--rule); }
.view:hover { color: var(--ink); background: var(--surface); }
.view[aria-current] { background: var(--ink); color: #fff; }
.view[aria-current]:hover { color: #fff; }

/* --- таблица элементов ------------------------------------------------------------ */

/* Раздел как таблица Менделеева: символ — первые буквы названия,
   номер — место в списке, цвет — раздел. Сотня материалов помещается
   на один экран, и видно, чего в разделе много, а чего нет. */
.table-hint {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-faint);
}

.elements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  padding-block: 18px 54px;
}

.element {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 9px 10px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--tag, var(--accent));
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.element__n {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--tag, var(--accent));
}

.element__min {
  position: absolute;
  top: 9px;
  inset-inline-end: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.element__sym {
  margin-block: auto;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
}

.element__name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.26;
}

.element:hover { background: var(--tag, var(--accent)); color: #fff; transform: translateY(-2px); }
.element:hover .element__n, .element:hover .element__min { color: rgba(255, 255, 255, .72); }

.elements .empty { grid-column: 1 / -1; aspect-ratio: auto; }

@media (prefers-reduced-motion: reduce) {
  .element { transition: none; }
  .element:hover { transform: none; }
}

@media (max-width: 480px) {
  .elements { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
}

/* --- бегущая строка: живые данные ------------------------------------------------ */

/* Метка стоит над лентой: строка едет влево и уходит под метку,
   а не сквозь неё. Без z-index бегущие цифры налезали на слово. */
.ticker__label { position: relative; z-index: 1; color: #fff; }
.ticker__label:hover { color: #fff; text-decoration: underline; }
.ticker__item a { color: rgba(255, 255, 255, .6); }
.ticker__item a:hover { color: #fff; }
.ticker__delta { font-style: normal; font-size: 11.5px; font-weight: 700; }
.ticker__delta--up { color: #62c39c; }
.ticker__delta--down { color: #e4a07a; }
.ticker__delta--flat { color: rgba(255, 255, 255, .45); }

/* --- рост и падение ----------------------------------------------------------------- */

/* Цвета движения живут здесь, а не в markets.css: главная его не грузит,
   а стрелки и искры нужны и ей. */
:root { --up: #0e6b4f; --down: #b4552a; }

.delta { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.delta--up { color: var(--up); }
.delta--down { color: var(--down); }
.delta--flat { color: var(--ink-faint); }

.spark { display: inline-block; vertical-align: middle; }
.spark--up polyline { stroke: var(--up); }
.spark--down polyline { stroke: var(--down); }
.spark--flat polyline { stroke: var(--ink-faint); }

/* --- заметки ------------------------------------------------------------------ */

.notes { display: flex; flex-direction: column; }
.note-item { padding-block: 14px; border-top: 1px solid var(--rule); }
.note-item:first-child { border-top: 0; padding-top: 0; }

.note-item__head { font-family: var(--sans); font-size: 15px; font-weight: 800; line-height: 1.25; }
.note-item__body { margin: 6px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

.note-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

.note-item__meta a { text-decoration: underline; text-underline-offset: 2px; }
.note-item__meta a:hover { color: var(--accent); }

.notes--page { padding-block: 22px 40px; }
.notes--page .note-item { padding-block: 20px; }
.notes--page .note-item__head { font-size: 1.15rem; }

/* --- рынок на первой полосе -------------------------------------------------------- */

/* Цифры первой полосы — плитками в ряд: их читают глазами по одной,
   а не сравнивают построчно, как в таблице раздела. */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.quote {
  display: grid;
  gap: 2px;
  padding: 14px 16px 12px;
  background: var(--paper);
  transition: background-color .18s ease;
}

.quote:hover { background: var(--surface); color: inherit; }

.quote__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.quote__value {
  font-family: var(--sans);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.quote__delta { font-size: 12.5px; }
.quote__spark { margin-top: 4px; }

.market-feed { margin-top: 26px; }

.market-feed__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Заметки стоят в ряд, а не в столбик, и линейка над соседом по ряду
   висела сама по себе: у первой её не было, у второй и третьей была.
   Ряд разделяет пустое поле, столбик на узком экране — отступ. */
.market-feed__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px 30px;
  padding-top: 16px;
}

.market-feed .note-item { padding-block: 0; border-top: 0; }

/* В ленте первой полосы заметка короткая: полный текст живёт в разделе. */
.market-feed .note-item__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .quote { transition: none; }
}

/* Лента рынка в фильтре разделов: точка показывает, что она обновляется
   сама, а не выходит статьями. */
.chip--live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
  animation: pulse 2.4s ease-in-out infinite;
}

.chip--live[aria-current]::before { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .chip--live::before { animation: none; }
}

/* Лента рынка шире колонки статьи: у заметок нет обложек, и держать их
   в узкой мере незачем. */
.notes--page { max-width: 72ch; }

/* Специализация автора — между должностью и биографией: должность
   говорит, кто он в редакции, специализация — о чём он пишет. */
.author-card__field {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
}

/* --- живая цифра в тексте --------------------------------------------------------- */

/* Метка {{код}} в статье превращается в текущее значение со ссылкой
   на показатель. Период рядом обязателен: цифра без него в тексте
   про деньги — половина правды. */
.live {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: 0 .18em;
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.live:hover { background: var(--accent); color: #fff; }
.live:hover .live__period { color: rgba(255, 255, 255, .75); }
.live__period { font-size: .72em; font-weight: 600; color: var(--ink-soft); }
.live--empty { background: none; box-shadow: none; color: var(--ink-faint); }