/* «Восемь Тактов» — стили.
 * Editorial Grid / Magazine + broadsheet-типографика + брутальные линейки.
 * Ни одного цвета и ни одного font-family вне assets/tokens.css.
 * Ноль border-radius, ноль теней-подъёмов, ноль backdrop-filter — условие стиля.
 * box-shadow встречается только как inset: им рисуются линейки и подчёркивания,
 * которые нельзя задать через border, — это набор, а не «объём».
 */

/* ═══════════════ 1. База ═══════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  padding-bottom: 6.5rem;
  font-kerning: normal;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 {
  font-size: var(--t-2xl);
}

h2 {
  font-size: var(--t-xl);
}

h3 {
  font-size: var(--t-md);
  letter-spacing: 0.005em;
}

h4,
h5 {
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
}

p,
ul,
ol,
dl,
figure,
table,
blockquote {
  margin: 0 0 var(--s-md);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hair);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out);
}

a:hover {
  background: var(--accent-wash);
  text-decoration-thickness: var(--rule-bold);
}

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: var(--rule-bold) solid var(--focus);
  outline-offset: 2px;
  transition: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: var(--rule-hair) solid var(--rule);
  margin: var(--s-xl) 0;
}

code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -4rem;
  z-index: var(--z-top);
  padding: var(--s-xs) var(--s-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══════════════ 2. Сетка страницы ═══════════════ */

.sheet {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-lg);
}

@media (max-width: 30rem) {
  .sheet {
    padding-inline: var(--s-md);
  }
}

.band {
  padding-block: var(--s-2xl);
  border-top: var(--rule-hair) solid var(--rule);
}

.band--first {
  border-top: 0;
}

.band--tight {
  padding-block: var(--s-xl);
}

/* ═══════════════ 3. Мастхед (газетная шапка) ═══════════════ */

.masthead {
  border-bottom: var(--rule-heavy) solid var(--rule-strong);
}

.masthead__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-md);
  padding-block: var(--s-xs);
  border-bottom: var(--rule-hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.masthead__strip b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.masthead__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-md);
  padding-block: var(--s-md) var(--s-sm);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-mast);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.wordmark:hover {
  background: transparent;
  color: var(--accent);
}

.wordmark__mark {
  width: 0.8em;
  height: 0.8em;
  flex: none;
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}

.slab {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 var(--s-xs);
  border: var(--rule-bold) solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out);
}

.slab:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.slab svg {
  width: 1.05rem;
  height: 1.05rem;
}

.masthead__nav {
  border-top: var(--rule-hair) solid var(--rule);
}

.masthead__nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead__nav a {
  display: block;
  padding: var(--s-xs) 0;
  margin-right: var(--s-lg);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
}

.masthead__nav a:hover {
  background: transparent;
  color: var(--accent);
}

.masthead__nav a[aria-current='page'] {
  color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--accent);
}

.masthead__burger {
  display: none;
}

@media (max-width: 60rem) {
  .masthead__nav {
    display: none;
  }

  .masthead__burger {
    display: inline-grid;
  }
}

.sheet-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: none;
  padding: var(--s-2xl) var(--s-lg);
  background: var(--paper);
  overflow-y: auto;
}

.sheet-nav[data-open='true'] {
  display: block;
}

.sheet-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-heavy) solid var(--rule-strong);
}

.sheet-nav li {
  border-bottom: var(--rule-hair) solid var(--rule);
}

.sheet-nav a {
  display: block;
  padding: var(--s-sm) 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
}

.sheet-nav__close {
  position: absolute;
  top: var(--s-md);
  right: var(--s-lg);
}

/* ═══════════════ 4. Тикер ═══════════════ */

.ticker {
  border-bottom: var(--rule-hair) solid var(--rule);
  background: var(--paper-sunk);
  overflow: hidden;
}

.ticker__track {
  display: flex;
  width: max-content;
  padding-block: var(--s-2xs);
  animation: ticker var(--marquee) linear infinite;
}

.ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-lg);
  padding-right: var(--s-lg);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.ticker__group b {
  color: var(--accent);
  font-weight: 500;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

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

/* ═══════════════ 5. Первая полоса ═══════════════ */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--s-lg) var(--col-gap);
  align-items: start;
  padding-block: var(--s-xl) var(--s-2xl);
}

.lead__kicker {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead__title {
  font-size: var(--t-huge);
  letter-spacing: -0.025em;
  line-height: 0.9;
}

.lead__aside {
  border-left: var(--rule-bold) solid var(--rule-strong);
  padding-left: var(--s-md);
}

.lead__standfirst {
  margin: 0 0 var(--s-md);
  font-size: var(--t-md);
  line-height: 1.42;
}

.lead__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-block: var(--s-2xs);
  border-bottom: var(--rule-hair) solid var(--rule);
  color: var(--ink-faint);
}

.lead__facts b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 52rem) {
  .lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead__aside {
    border-left: 0;
    border-top: var(--rule-bold) solid var(--rule-strong);
    padding-left: 0;
    padding-top: var(--s-md);
  }
}

/* ═══════════════ 6. Заголовки разделов ═══════════════ */

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-md);
  margin-bottom: var(--s-md);
  padding-top: var(--s-xs);
  border-top: var(--rule-heavy) solid var(--rule-strong);
}

.head h1,
.head h2 {
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
}

.head__more {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent);
  border-bottom: var(--rule-bold) solid var(--accent);
}

.head__more:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.standfirst {
  max-width: 54ch;
  margin: 0 0 var(--s-lg);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* ═══════════════ 7. Эфирный журнал — станции ═══════════════ */

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 0 var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-hair) solid var(--rule);
}

.slots > li {
  min-width: 0;
}

.slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--s-sm);
  width: 100%;
  padding: var(--s-sm) 0;
  border: 0;
  border-bottom: var(--rule-hair) solid var(--rule);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out);
}

.slot:hover {
  background: var(--accent-wash);
}

.slot[aria-current='true'] {
  background: var(--accent-wash);
  box-shadow: inset var(--rule-heavy) 0 0 var(--accent);
  padding-left: var(--s-sm);
}

.slot__no {
  grid-row: 1 / span 2;
  align-self: start;
  min-width: 2.1rem;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--rule);
}

.slot[aria-current='true'] .slot__no {
  color: var(--accent);
}

.slot__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.slot__meta {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.slot__meta em {
  font-style: normal;
  color: var(--accent);
}

/* каталог: настоящая таблица-журнал */
.log {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.log th {
  padding: var(--s-2xs) var(--s-sm) var(--s-2xs) 0;
  border-bottom: var(--rule-bold) solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
  white-space: nowrap;
}

.log td {
  padding: var(--s-xs) var(--s-sm) var(--s-xs) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
  vertical-align: baseline;
}

.log tr[aria-current='true'] td {
  background: var(--accent-wash);
}

.log__no,
.log__fmt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
}

.log__name {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.log__cc {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
}

.log__genres {
  color: var(--ink-soft);
  font-size: var(--t-xs);
}

.log__act {
  text-align: right;
  white-space: nowrap;
}

.play-cell {
  padding: 0.15rem var(--s-sm);
  border: var(--rule-hair) solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out);
}

.play-cell:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* На телефоне журнал сжимается до №, станции, страны и действия: иначе кнопка
   «в эфир» уезжает за пределы прокручиваемой области и её просто не находят.
   Формат и направление остаются в таблице прямых адресов ниже. */
@media (max-width: 46rem) {
  .log {
    min-width: 0;
  }

  .log th:nth-child(4),
  .log td:nth-child(4),
  .log th:nth-child(5),
  .log td:nth-child(5) {
    display: none;
  }
}

/* ═══════════════ 8. Фильтры ═══════════════ */

.filters {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--s-md);
  border-top: var(--rule-hair) solid var(--rule);
  border-bottom: var(--rule-hair) solid var(--rule);
}

.chip {
  padding: var(--s-xs) var(--s-sm);
  border: 0;
  border-right: var(--rule-hair) solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out);
}

.chip:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.chip[aria-pressed='true'] {
  background: var(--rule-strong);
  color: var(--paper);
}

.tally {
  margin: 0 0 var(--s-md);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ═══════════════ 9. Дайджест материалов ═══════════════ */

.digest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 0 var(--col-gap);
  border-top: var(--rule-hair) solid var(--rule);
}

.piece {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
  min-width: 0;
  padding: var(--s-md) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
}

.piece__rubric {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.piece h3 {
  font-size: var(--t-md);
}

.piece h3 a {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--rule);
}

.piece h3 a:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.piece p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

/* ═══════════════ 10. Текстовые страницы ═══════════════ */

.folio {
  padding-block: var(--s-xl) var(--s-md);
}

.folio h1 {
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.folio__standfirst {
  max-width: 56ch;
  margin: var(--s-md) 0 0;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink-soft);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin: 0 0 var(--s-sm);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.crumbs a {
  text-decoration: none;
  color: var(--ink-faint);
}

.crumbs a:hover {
  background: transparent;
  color: var(--accent);
}

/* Текст держит газетную меру 62–68 знаков, а таблицы, хронологии и сетки
   выходят на всю ширину полосы — как врезки в печатном развороте. */
.prose {
  max-width: none;
}

.prose > p,
.prose > h2,
.prose > h3,
.prose > ul:not(.timeline),
.prose > ol,
.prose > dl,
.prose > blockquote,
.prose > .callout {
  max-width: var(--w-text);
}

.prose > * + * {
  margin-top: var(--s-md);
}

.prose h2 {
  margin-top: var(--s-xl);
  padding-top: var(--s-xs);
  border-top: var(--rule-bold) solid var(--rule-strong);
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
}

.prose h3 {
  margin-top: var(--s-lg);
}

.prose p {
  hyphens: auto;
}

/* Буквица на первом абзаце — примета печатной вёрстки. */
.prose--drop > p:first-of-type::first-letter {
  float: left;
  margin: 0.05em 0.08em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  font-weight: 700;
  line-height: 0.78;
  color: var(--accent);
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose li + li {
  margin-top: var(--s-2xs);
}

.prose dt {
  margin-top: var(--s-md);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.prose dd {
  margin: var(--s-2xs) 0 0;
  color: var(--ink-soft);
}

blockquote {
  padding: var(--s-sm) 0;
  border-top: var(--rule-bold) solid var(--rule-strong);
  border-bottom: var(--rule-bold) solid var(--rule-strong);
  font-size: var(--t-lg);
  line-height: 1.28;
}

blockquote p {
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: var(--s-xs);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.toc {
  padding: var(--s-sm) 0;
  margin-bottom: var(--s-xl);
  border-top: var(--rule-heavy) solid var(--rule-strong);
  border-bottom: var(--rule-hair) solid var(--rule);
}

.toc h2 {
  margin: 0 0 var(--s-xs);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.toc ol {
  columns: 2;
  column-gap: var(--col-gap);
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--t-sm);
}

@media (max-width: 36rem) {
  .toc ol {
    columns: 1;
  }
}

/* Оглавление уходит в боковую колонку и залипает при прокрутке:
   пустое поле справа от текстовой колонки перестаёт быть пустым. */
@media (min-width: 68rem) {
  .band:has(> .toc) {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0 var(--col-gap);
    align-items: start;
  }

  .band:has(> .toc) > .toc {
    position: sticky;
    top: var(--s-md);
    margin-bottom: 0;
  }

  .band:has(> .toc) > .toc ol {
    columns: 1;
  }

  .band:has(> .toc) > .prose {
    grid-column: 2;
  }
}

.callout {
  padding: var(--s-md);
  border-left: var(--rule-heavy) solid var(--accent);
  background: var(--paper-sunk);
}

.callout > :last-child {
  margin-bottom: 0;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-hair) solid var(--rule);
}

.timeline li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 var(--s-md);
  padding: var(--s-sm) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
}

.timeline b {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

@media (max-width: 34rem) {
  .timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2xs);
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 0 var(--col-gap);
  border-top: var(--rule-hair) solid var(--rule);
}

.panel {
  min-width: 0;
  padding: var(--s-md) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel h3 {
  margin-bottom: var(--s-xs);
}

.profile {
  display: grid;
  gap: var(--s-2xs);
  padding-block: var(--s-md);
  border-bottom: var(--rule-hair) solid var(--rule);
}

.profile:first-of-type {
  border-top: var(--rule-hair) solid var(--rule);
}

.profile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-xs) var(--s-sm);
}

.profile__years {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.profile p {
  margin: 0;
}

.profile__note {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--s-md);
  border-bottom: var(--rule-hair) solid var(--rule);
}

table:not(.log) {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: var(--t-sm);
}

table:not(.log) th,
table:not(.log) td {
  padding: var(--s-xs) var(--s-sm) var(--s-xs) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}

table:not(.log) th {
  border-bottom: var(--rule-bold) solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

td.num,
td .num {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════ 11. Колофон ═══════════════ */

.colophon {
  padding-block: var(--s-xl) var(--s-lg);
  border-top: var(--rule-heavy) solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.colophon p {
  max-width: 84ch;
}

.colophon a {
  color: var(--ink-soft);
  text-decoration-color: var(--rule);
}

.colophon a:hover {
  color: var(--accent);
}

.colophon__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-md);
  margin: var(--s-md) 0 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 40rem) {
  .colophon__legal {
    flex-direction: column;
    gap: var(--s-2xs);
  }
}

/* ═══════════════ 12. Эфирная строка (плеер) ═══════════════ */

.air {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-bar);
  border-top: var(--rule-heavy) solid var(--rule-strong);
  background: var(--paper);
}

.air__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-md);
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--s-xs) var(--s-lg);
}

.air__play {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  padding: 0;
  border: var(--rule-bold) solid var(--rule-strong);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out);
}

.air__play:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.air__play:disabled {
  background: var(--paper-deep);
  border-color: var(--rule);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.air__play svg {
  width: 1.1rem;
  height: 1.1rem;
}

.air__now {
  min-width: 0;
}

.air__label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.air__title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.air__side {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}

.air__select {
  max-width: 15rem;
  padding: 0.35rem var(--s-xs);
  border: var(--rule-hair) solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}

.air__vol {
  width: 6rem;
  accent-color: var(--accent);
}

@media (max-width: 48rem) {
  .air__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'play now' 'side side';
    row-gap: var(--s-xs);
    padding-inline: var(--s-md);
  }

  .air__play {
    grid-area: play;
  }

  .air__now {
    grid-area: now;
  }

  .air__side {
    grid-area: side;
    justify-content: space-between;
  }

  .air__select {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  .air__vol {
    width: 4.5rem;
    flex: none;
  }
}

.notice {
  padding: var(--s-xs) var(--s-lg);
  border-top: var(--rule-hair) solid var(--rule);
  background: var(--accent-wash);
  font-size: var(--t-xs);
  color: var(--ink);
}

.notice[hidden] {
  display: none;
}

/* ═══════════════ 13. Согласие ═══════════════ */

.consent {
  position: fixed;
  inset: auto auto calc(5rem + var(--s-md)) var(--s-lg);
  z-index: var(--z-top);
  max-width: 27rem;
  padding: var(--s-md);
  border: var(--rule-heavy) solid var(--rule-strong);
  background: var(--paper);
  font-size: var(--t-sm);
}

.consent[hidden] {
  display: none;
}

.consent h2 {
  margin-bottom: var(--s-xs);
  font-size: var(--t-md);
}

.consent p {
  margin-bottom: var(--s-md);
  color: var(--ink-soft);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.consent__row {
  display: flex;
  gap: var(--s-xs);
}

.btn {
  flex: 1 1 0;
  padding: var(--s-xs) var(--s-md);
  border: var(--rule-bold) solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out);
}

.btn:hover {
  background: var(--rule-strong);
  color: var(--paper);
}

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

@media (max-width: 40rem) {
  .consent {
    inset: auto var(--s-sm) calc(6.5rem + var(--s-xs)) var(--s-sm);
    max-width: none;
  }
}

/* ═══════════════ 14. Служебное ═══════════════ */

.err-no {
  font-family: var(--font-display);
  font-size: var(--t-huge);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.86;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .ticker__track {
    animation: none;
    transform: none;
  }
}