@charset "utf-8";

/* =============================================================================
   AVAVA Radio Online — HTML template
   Стили собраны по хендоффу design_handoff_avavaradio_home.

   Содержание
     1. Токены тем
     2. База и типографика
     3. Утилиты (метки, точки, заглушки изображений)
     4. Первый экран: шапка, тикеры, заголовок
     5. Кольцевой плеер
     6. Тюнер и лента жанров
     9. Анимации

   Правила проекта: ни одного литерального цвета вне блока токенов,
   ни одного размера шрифта мельче 12px, никакого inline CSS в разметке.
   ============================================================================= */

/* --------------------------------------------------------------------------
   1. Токены тем
   -------------------------------------------------------------------------- */
:root {
  /* фирменные цвета — не зависят от поверхности */
  --c-yellow:        #ffd400;   /* кольцо плеера, стрелка тюнера, LIVE */
  --c-magenta:       #e1006b;   /* пульсирующая точка ON AIR, штамп открытки */
  --c-cyan:          #22c1e0;   /* вертикальный RADIO */
  --c-white:         #ffffff;
  --c-black:         #000000;
  --c-cap:           #26262a;   /* площадка ручки эквалайзера */
  --c-paper:         #f4f1ec;   /* бумага открытки: не переворачивается */
  --c-ink-fixed:     #141110;   /* чернила на бумаге */

  /* поверхности: каждая несёт зернистую плитку 512×512 */
  --tile:    url("../img/bg-texture.png") repeat 0 0 / 512px 512px;
  --hero-bg: var(--tile) #0d0d0d;
  --panel:   var(--tile) #0a0a0b;
  --paper:   var(--tile) #141416;
  --card:    var(--tile) #1b1b1e;
  --sheet:   var(--tile) #141416;
  --shell:   #0a0a0b;           /* всегда тёмные плашки: кнопки, шелл */

  --ink:       #f5f4f1;
  --accent:    #ffc20e;         /* надзаголовки, ссылки, живые метки */
  --on-accent: #141110;         /* текст поверх акцентной заливки */

  /* каналы для полупрозрачных оттенков */
  --ink-rgb: 245, 244, 241;
  --on-dark: 255, 255, 255;
  --on:      255, 255, 255;

  /* выпадающее меню */
  --dd-bg:    #141110;
  --dd-rule:  rgba(255, 255, 255, .12);
  --dd-ink:   #ffffff;
  --dd-hover: #ffd400;

  /* шрифты */
  --f-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --f-body:    "Archivo", Helvetica, Arial, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-num:     "Orbitron", "DM Mono", ui-monospace, monospace;

  /* сетка */
  --gutter: 40px;

  /* состояние плеера, значения обновляет скрипт */
  --hour: 64%;
  --vol: 72%;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. База и типографика
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--tile) #0a0a0b fixed;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img,
picture,
svg { display: block; max-width: 100%; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input { font: inherit; }

:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--gutter);
  z-index: 100;
  padding: 10px 18px;
  background: var(--c-yellow);
  color: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: top .2s var(--ease);
}

.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   3. Утилиты
   -------------------------------------------------------------------------- */

/* мелкая подпись моноширинным — минимум 12px по требованиям Envato */
.meta {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.meta--live { color: var(--c-yellow); }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.dot--live {
  background: var(--c-yellow);
  animation: avpulse 1.6s ease-in-out infinite;
}

.dot--eq { background: var(--c-yellow); }

/* Фотографии кадрируются по рамке. height:auto обязателен: иначе
   атрибут height у <img> перебивает aspect-ratio и картинка вытягивается. */
img.thumb {
  height: auto;
  object-fit: cover;
}

/* полосатая подложка — видна, пока фото не загрузилось */
.thumb {
  display: grid;
  place-items: center;
  margin: 0;
  background-color: rgba(var(--on), .06);
  background-image: repeating-linear-gradient(135deg,
      rgba(var(--on), .09) 0 8px,
      rgba(var(--on), 0) 8px 16px);
  border-radius: 2px;
}

.thumb span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on), .35);
}

.thumb--16x9 { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   4. Первый экран
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  background: var(--hero-bg);
  overflow: hidden;
}

.hero__poster {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-width: 0;          /* иначе тикеры растягивают колонку шире экрана */
  flex-direction: column;
  /* верх — 30px: владелец просил поднять логотип с меню на 10px выше макета */
  padding: 30px var(--gutter) 28px;
}

/* Колонка контента занимает левую половину экрана — правую держит постер.
   Тикеры, заголовок и плеер обрываются на середине, как в макете. */
.hero__col {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 52%;
  flex-direction: column;
  /* содержимое прижато к низу — свободное место копится под логотипом */
  justify-content: flex-end;
}

/* --------------------------- верхняя строка --------------------------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 1.6vw, 30px);
}

.logo img {
  width: auto;
  height: clamp(36px, 2.34vw, 60px);
}

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 1.25vw, 34px);
}

/* пункты меню: Archivo 16px, подчёркивание — рамкой снизу */
.nav__link {
  position: relative;
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}



/* в тёмной теме активный и наведённый жёлтые, в светлой — чёрные */
.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--c-yellow);
  border-bottom-color: var(--c-yellow);
}

/* ------- выпадающее меню PAGES ------- */
.nav__item--menu {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.nav__caret {
  font-size: 11px;
  transform: translateY(1px);
}

/* прозрачный мостик: зазор до панели принадлежит обёртке, иначе курсор
   «выходит» из неё по дороге вниз и меню закрывается */
.nav__bridge {
  position: absolute;
  left: -24px;
  top: 100%;
  z-index: 40;
  padding-top: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s var(--ease), visibility .15s var(--ease);
}

/* раскрытие по наведению — только там, где есть настоящая мышь:
   на сенсорном экране :hover и :focus-within залипают после касания,
   и меню больше ничем не закрыть */
@media (hover: hover) and (pointer: fine) {
  .nav__item--menu:hover .nav__bridge,
  .nav__item--menu:focus-within .nav__bridge { visibility: visible; opacity: 1; }
}

.nav__bridge.is-open { visibility: visible; opacity: 1; }

.nav__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 268px;
  padding: 22px 26px;
  border: 1px solid var(--dd-rule);
  border-radius: 14px;
  background: var(--dd-bg);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .35);
}

.nav__panel a {
  display: block;
  font-family: var(--f-body);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dd-ink);
  transition: color .15s var(--ease);
}

.nav__panel a:hover,
.nav__panel a:focus-visible { color: var(--dd-hover); }



.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}

/* заливка при наведении — без !important на базовом цвете, иначе она не победит */
.pill-cta:hover,
.pill-cta:focus-visible {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--on-accent);
}

.pill-cta__glyph { font-size: 10px; }

/* --- выбор языка --- */
.lang {
  position: relative;
  display: flex;
  align-items: center;
}

.lang__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .15s var(--ease);
}

.lang__btn:hover,
.lang__btn:focus-visible { color: var(--c-yellow); }

.lang__flag {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--on-dark), .1);
  font-size: 15px;
  line-height: 1;
}

.lang__caret { font-size: 11px; transform: translateY(1px); }

/* тот же приём с мостиком, что и у выпадающего меню */
.lang__bridge {
  position: absolute;
  right: -12px;
  top: 100%;
  z-index: 40;
  padding-top: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s var(--ease), visibility .15s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .lang:hover .lang__bridge,
  .lang:focus-within .lang__bridge { visibility: visible; opacity: 1; }
}

.lang__bridge.is-open { visibility: visible; opacity: 1; }

.lang__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 14px 16px;
  border: 1px solid var(--dd-rule);
  border-radius: 14px;
  background: var(--dd-bg);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .35);
}

.lang__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 4px;
  font-family: var(--f-body);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dd-ink);
  transition: color .15s var(--ease);
}

.lang__menu button:hover,
.lang__menu button:focus-visible { color: var(--dd-hover); }

.lang__menu button.is-current { color: var(--dd-hover); }

/* ------------------------------- тикеры -------------------------------- */
.ticker {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  overflow: hidden;
}

/* свободное место уходит наверх, под логотип: тикер идёт вместе с заголовком */
.ticker--top { margin-top: auto; }

.ticker--bottom {
  padding: 10px 0;
  border-top: 1px solid rgba(var(--on-dark), .18);
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.ticker__label {
  flex: none;
  margin: 0;
  color: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ticker__window {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, var(--c-black) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, var(--c-black) 82%, transparent 100%);
}

.ticker__list {
  display: flex;
  flex: none;
  gap: 46px;
  padding-right: 46px;
  animation: avmarq 24s linear infinite;
}

.ticker__list li {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .82);
  white-space: nowrap;
}

.ticker--bottom .ticker__list li { color: rgba(var(--on-dark), .7); }

/* ------------------------------ заголовок ------------------------------- */
.headline {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.35vw, 26px);
  /* снизу тот же отступ, что у плеера сверху — зазоры вокруг тикера равные */
  padding: clamp(14px, 2.2vh, 24px) 0 clamp(18px, 2.4vh, 34px);
}

.headline__side {
  flex: none;
  margin: 0;
  /* в тёмной теме — циан, в светлой владелец просил чёрный */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(44px, 4.41vw, 113px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.headline__side { color: var(--c-cyan); }

.headline__text {
  margin: 0;
  font-weight: 400;
}

.headline__made,
.headline__big,
.headline__still {
  display: block;
  letter-spacing: -.04em;
}

.headline__made {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(28px, min(4.3vw, 7.6vh), 110px);
  line-height: .98;
  color: var(--c-white);
}

.headline__big {
  margin-top: clamp(4px, .47vw, 9px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(32px, min(6.4vw, 11.4vh), 164px);
  line-height: .92;
  text-transform: uppercase;
  color: var(--c-white);
}

.headline__still {
  margin-top: clamp(10px, 1.25vw, 24px);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, min(5.5vw, 9.2vh), 110px);
  line-height: .98;
  color: var(--c-white);
}

.headline__still em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}

.headline__caret {
  display: inline-block;
  width: clamp(12px, 1.2vw, 30px);
  height: clamp(18px, min(2.9vw, 5.1vh), 74px);
  margin-left: .18em;
  background: var(--c-yellow);
  vertical-align: baseline;
  animation: avblink 1.1s steps(1, end) infinite;
}

/* --------------------------------------------------------------------------
   5. Кольцевой плеер
   -------------------------------------------------------------------------- */
.player {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 44px);
  padding: clamp(18px, 2.4vh, 34px) 0 clamp(16px, 2vh, 26px);
}

.player__ring {
  flex: none;
  text-align: center;
}

.ring {
  position: relative;
  width: clamp(96px, 6.56vw, 168px);
  height: clamp(96px, 6.56vw, 168px);
  border-radius: 50%;
}

.ring__hour,
.ring__gap,
.ring__vol,
.ring__core {
  position: absolute;
  border-radius: 50%;
}

.ring__hour {
  inset: 0;
  background: conic-gradient(var(--c-yellow) 0 var(--hour),
              rgba(var(--on-dark), .26) var(--hour) 100%);
}

.ring__gap {
  inset: 8%;
  background: var(--hero-bg);
}

.ring__vol {
  inset: 10%;
  background: conic-gradient(var(--c-white) 0 var(--vol),
              rgba(var(--on-dark), .22) var(--vol) 100%);
}

.ring__core {
  inset: 14%;
  background: var(--hero-bg);
}

/* Кольца крутятся, пока идёт эфир. Ходы неравномерные и длительности разные,
   поэтому жёлтое и белое постоянно расходятся по фазе — рисунок не повторяется
   и не выглядит заводным. Каждый цикл ровно 360°, поэтому стыка не видно. */
@keyframes ring-drift-a {
  0%   { transform: rotate(0deg); }
  28%  { transform: rotate(84deg); }
  52%  { transform: rotate(150deg); }
  76%  { transform: rotate(276deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ring-drift-b {
  0%   { transform: rotate(0deg); }
  32%  { transform: rotate(-118deg); }
  58%  { transform: rotate(-172deg); }
  81%  { transform: rotate(-289deg); }
  100% { transform: rotate(-360deg); }
}

.ring__hour { animation: ring-drift-a 19s linear infinite; }
.ring__vol  { animation: ring-drift-b 11s linear infinite; }

/* эфир остановлен — кольца замирают там, где их застали */
/* кольцо крутится, только пока играет станция владельца в шапке */
.is-paused .ring__hour,
.is-paused .ring__vol { animation-play-state: paused; }

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

.ring__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--on-dark), .4);
  border-radius: 50%;
  background: rgba(20, 17, 16, .9);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.ring__btn:hover,
.ring__btn:focus-visible { border-color: var(--c-yellow); }

/* значок «пауза» из двух полосок, при паузе превращается в треугольник */
.ring__glyph {
  display: block;
  width: 14px;
  height: 16px;
  background:
    linear-gradient(var(--c-yellow) 0 0) 0 0 / 4px 100% no-repeat,
    linear-gradient(var(--c-yellow) 0 0) 100% 0 / 4px 100% no-repeat;
}

[aria-pressed="false"] .ring__glyph {
  width: 0;
  height: 0;
  background: none;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--c-yellow);
}

.player__caption {
  margin: 10px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
}

.player__body {
  flex: 1;
  min-width: 0;
}

.player__live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-yellow);
}

.player__live-sep { color: rgba(var(--on-dark), .45); }

.player__listeners {
  margin-left: auto;
  color: rgba(var(--on-dark), .7);
}

.player__track {
  margin: 6px 0 0;
  font-family: var(--f-body);
  font-size: clamp(17px, 1.33vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-white);
}

.wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
  margin-top: 10px;
}

.wave i {
  display: block;
  width: 3px;
  background: rgba(var(--on-dark), .55);
  animation: aveq 1s ease-in-out infinite alternate;
}

/* полоски волны — тоже от станции в шапке */
.is-paused .wave i { animation-play-state: paused; }

/* а осциллограмма и значки эквалайзера показывают эфир тюнера,
   поэтому замирают вместе с ним, а не со станцией в шапке */
.is-tuner-quiet .bars,
.is-tuner-quiet .scope__col.is-live .scope__up,
.is-tuner-quiet .scope__col.is-live .scope__down { animation-play-state: paused; }

.player__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, .85vw, 16px);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--on-dark), .18);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
}

.player__row b {
  font-weight: 400;
  color: var(--c-white);
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
  transition: color .15s var(--ease);
}

.link-btn:hover,
.link-btn:focus-visible { color: var(--c-yellow); }

.link-btn--accent { color: var(--c-yellow); }

.link-btn--boxed {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--on-dark), .5);
  color: var(--c-white);
}

.link-btn[aria-pressed="true"] { color: var(--c-yellow); }

/* --------------------------------------------------------------------------
   6. Тюнер
   -------------------------------------------------------------------------- */
/* оболочка тюнера: карточку рисует плагинный tuner.css, секция только держит
   её в потоке страницы */
.tuner {
  background: none;
  border: 0;
}

/* колонки ровно как в макете: 30% — станция, остальное — шкала, 30% — эквалайзер */
.tuner__grid {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr) 30%;
  align-items: stretch;    /* колонки одной высоты — заглушка тянется до полей */
}

.tuner__dial,
/* содержимое считается от верха: пустое место забирают авто-поля внутри,
   иначе остаток делился пополам и под приборами висела дыра */
.tuner__eq {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* внутренние поля тюнера: 20px по краям блока, 23px между колонками */
.tuner__station { padding: 20px 23px 20px 20px; }
.tuner__dial    { padding: 20px 23px; }
.tuner__eq      { padding: 20px 20px 20px 23px; }

.tuner__dial,
.tuner__eq { border-left: 1px solid rgba(var(--on-dark), .1); }

/* --- станция --- */
.tuner__station {
  display: flex;
  align-items: stretch;      /* заглушка тянется по высоте блока */
  gap: 16px;
  min-width: 0;
}

/* логотип станции: 16:9, отступ 20px сверху, снизу и слева от края блока */
/* высота задана явно: с height:100% картинка сама начинала задавать
   высоту колонки и тюнер раздувался вдвое */
.tuner__art {
  position: relative;
  flex: none;
  display: block;
  height: clamp(96px, calc(36px + 5.625vw), 180px);
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  overflow: hidden;
  /* штриховка видна, только когда стрелка не поймала станцию */
  background-color: rgba(var(--on-dark), .06);
  background-image: repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .09) 0 8px,
      rgba(var(--on-dark), 0) 8px 16px);
}

.tuner__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* поиск: обложки нет, значка «в эфире» нет, инструменты приглушены */
.tuner__station.is-searching .tuner__logo { visibility: hidden; }
.tuner__station.is-searching .meta--live { visibility: hidden; }
.tuner__station.is-searching .tuner__tools { opacity: .35; pointer-events: none; }

/* что играет прямо сейчас — приходит с сервера, из потока станции;
   пока данных нет, строка пустая и места не занимает */
.tuner__now:empty { display: none; }

.tuner__now {
  margin: 10px 0 0;
  font-family: var(--f-body);
  font-size: clamp(14px, .83vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.tuner__station-body {
  min-width: 0;
  align-self: center;
}

.tuner__name {
  margin: 4px 0 2px;
  font-family: var(--f-body);
  font-size: clamp(14px, .94vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tuner__station-body .meta { color: rgba(var(--on-dark), .55); }
.tuner__station-body .meta--live { color: var(--c-yellow); }

.tuner__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
}

.tool {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(var(--on-dark), .55);
  transition: color .15s var(--ease);
}

.tool:hover,
.tool:focus-visible { color: var(--c-white); }

.tool[aria-pressed="true"] { color: var(--c-yellow); }

/* --- шкала --- */
.tuner__dial { min-width: 0; }

.dial__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 40px);
}

/* стрелки настройки: 44px — минимальная зона нажатия по WCAG */
.dial__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(var(--on-dark), .7);
  font-size: 22px;
  line-height: 1;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}

.dial__arrow svg { width: 13px; height: 15px; }

.dial__arrow:hover,
.dial__arrow:focus-visible { background: rgba(var(--on-dark), .08); }

.dial__arrow:hover,
.dial__arrow:focus-visible { color: var(--c-yellow); }

.dial__read {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}

.dial__unit {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.dial__value {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(26px, 2.19vw, 56px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
}

.dial__scale {
  position: relative;
  height: clamp(22px, 1.56vw, 30px);
  margin-top: clamp(6px, .52vw, 10px);
}

.dial__ticks {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
}

.dial__tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  background: rgba(var(--on-dark), .35);
}

.dial__tick--minor { height: 8px; }
.dial__tick--major { height: 14px; background: rgba(var(--on-dark), .55); }

.dial__needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -.5px;
  background: var(--c-yellow);
  box-shadow: 0 0 10px rgba(255, 212, 0, .8);
  transition: left .3s var(--ease);
}

.dial__needle::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-yellow);
}

.dial__range {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

.dial__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 30px;
}

.dial__range::-moz-range-thumb {
  width: 18px;
  height: 30px;
  border: 0;
}

.dial__labels {
  position: relative;
  height: 18px;
  margin-top: 6px;
}

.dial__label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(var(--on-dark), .45);
  font-variant-numeric: tabular-nums;
}

/* --- эквалайзер --- */
.tuner__eq { min-width: 0; }

.eq__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.eq__switch {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
  transition: color .15s var(--ease);
}

.eq__switch[aria-pressed="true"] { color: var(--c-yellow); }

.eq__switch[aria-pressed="false"] .dot--eq { background: rgba(var(--on-dark), .35); }

.tuner__eq {
  --eq-gap: clamp(6px, .6vw, 14px);
  /* 0.4375 от зазора — половина свободного места в восьмой колонке;
     считаем отдельной переменной, умножение внутри calc валидатор W3C не принимает */
  --eq-gap-part: clamp(2.625px, .2625vw, 6.125px);
}

.eq__bands {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--eq-gap);
  /* свободное место уходит наверх: приборы стоят прямо над строкой громкости */
  margin-top: auto;
}

.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, .31vw, 6px);
}

.band__gain {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--c-yellow);
  font-variant-numeric: tabular-nums;
}

.band__gain.is-zero { color: rgba(var(--on-dark), .5); }

/* ствол фейдера: серая направляющая, жёлтая заливка от нуля до ручки */
.band__rail {
  position: relative;
  display: block;
  width: 18px;
  height: clamp(34px, calc(-26px + 3.125vw), 54px);
  --p: 50%;
}

.band__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to top,
      rgba(var(--on-dark), .22) 0 min(var(--p), 50%),
      var(--c-yellow)           min(var(--p), 50%) max(var(--p), 50%),
      rgba(var(--on-dark), .22) max(var(--p), 50%) 100%);
}

.band__slider {
  position: relative;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px;
  height: clamp(34px, calc(-26px + 3.125vw), 54px);
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  cursor: ns-resize;
}

.band__slider::-webkit-slider-runnable-track {
  width: 2px;
  background: none;
}

.band__slider::-moz-range-track {
  width: 2px;
  background: none;
}

/* ручка: тёмная площадка с жёлтой чертой посередине */
.band__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 14px;
  margin-left: -7px;
  border-radius: 2px;
  background: var(--c-cap) linear-gradient(var(--c-yellow) 0 0) center / 10px 2px no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.band__slider::-moz-range-thumb {
  width: 16px;
  height: 14px;
  border: 0;
  border-radius: 2px;
  background: var(--c-cap) linear-gradient(var(--c-yellow) 0 0) center / 10px 2px no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.band__label {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .06em;
  color: rgba(var(--on-dark), .45);
}

/* Нижняя строка: полоса громкости тянется от подписи до кнопки, а кнопка
   отступом справа встаёт ровно по центру восьмой колонки — под ручкой 15K. */
/* строка громкости прижата к низу колонки: свободное место уходит над
   ней, поэтому индикаторы не тянут тюнер в высоту */
/* строка громкости прижата к низу колонки: остаток высоты забирает блок над
   ней (.eq__bands / .vu), поэтому и полосы, и приборы стоят вплотную к VOL */
.eq__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-top: clamp(8px, .62vw, 12px);
}

.eq__foot .meta { flex: none; }

.eq__play {
  margin-right: calc(6.25% - var(--eq-gap-part) - 17px);
}

.eq__foot .meta { color: rgba(var(--on-dark), .55); }

.eq__vol {
  flex: 1;
  min-width: 0;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  cursor: pointer;
}

.eq__vol::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(var(--on-dark), .3);
}

.eq__vol::-moz-range-track {
  height: 1px;
  background: rgba(var(--on-dark), .3);
}

.eq__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--c-white);
}

.eq__vol::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
}

/* без кольца: круг съедал место в строке, остаётся только знак */
.eq__play {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(22px, calc(14px + .5vw), 26px);
  height: clamp(22px, calc(14px + .5vw), 26px);
  border: 0;
  transition: opacity .15s var(--ease);
}

.eq__play:hover,
.eq__play:focus-visible { opacity: .75; }

.eq__play .ring__glyph { width: 12px; height: 14px; background-size: 4px 100%; }

/* --------------------------------------------------------------------------
   7. Общие детали секций
   -------------------------------------------------------------------------- */
/* ритм страницы: у секций нет вертикальных полей, между ними — разделитель */
.section {
  padding: 0 var(--gutter);
}

/* первая секция после шапки: разделителя нет, поэтому свой отступ сверху */
.hero + .section,
.hero + main > .section:first-child,
main > .section:first-child { padding-top: 60px; }

.divider {
  height: 1px;
  margin: 60px var(--gutter);
  background: rgba(var(--on-dark), .08);
}

/* каждая поверхность объявляет свой канал цвета текста --on,
   поэтому полупрозрачные оттенки внутри неё считаются сами */
.section--panel { background: var(--panel); }

.section--paper { background: var(--paper); }

.section--card { background: var(--card); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3.4vw, 56px);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.section--panel .eyebrow { color: var(--c-yellow); }

.section__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(34px, 4.2vw, 76px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.section__aside {
  text-align: right;
}

.section__aside .meta { color: rgba(var(--on), .5); }
.section__aside p { margin: 0 0 6px; }
.section__aside p:last-child { margin-bottom: 0; }

.meta--accent { color: var(--accent); }
.section--panel .meta--accent { color: var(--c-yellow); }

.link-arrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on), .6);
  transition: color .15s var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible { color: var(--accent); }

/* акцентная ссылка: на светлых поверхностях — магента, на тёмных — жёлтая */
.link-arrow--accent { color: var(--accent); }
.section--panel .link-arrow--accent,
.section--shell .link-arrow--accent,
.footer .link-arrow--accent { color: var(--c-yellow); }

/* значок-эквалайзер: полосы живут, пока идёт эфир */
.bars {
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-right: 8px;
  animation: avbars 1.1s ease-in-out infinite alternate;
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 2px 40% no-repeat,
    linear-gradient(currentColor, currentColor) 4px  100% / 2px 75% no-repeat,
    linear-gradient(currentColor, currentColor) 8px  100% / 2px 55% no-repeat,
    linear-gradient(currentColor, currentColor) 12px 100% / 2px 90% no-repeat;
  vertical-align: middle;
}

.round-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--shell);
  color: var(--c-yellow);
  transition: transform .18s var(--ease);
}

.round-btn:hover,
.round-btn:focus-visible { transform: scale(1.06); }

.round-btn--ghost {
  background: none;
  border: 1px solid rgba(var(--on), .3);
  color: rgba(var(--on), .7);
  font-size: 16px;
}

.round-btn--ghost[aria-pressed="true"] { color: var(--c-yellow); border-color: var(--c-yellow); }

/* --------------------------------------------------------------------------
   8. Секция 01 — каналы
   -------------------------------------------------------------------------- */
.channels {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1vw, 16px);
}

.channels li { display: flex; flex: 1; min-width: 0; }

.channel {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(var(--on), .14);
  background: rgba(var(--on), .03);
  text-align: left;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              transform .25s var(--ease);
}

.channel:hover,
.channel:focus-visible { border-color: rgba(var(--on), .4); }

.channels li:has(.is-active) { flex: 1.7; }

.channel.is-active {
  border-color: rgba(255, 212, 0, .6);
  background: rgba(255, 212, 0, .07);
  transform: translateY(-22px);
}

.channel__freq {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--f-num);
  font-size: clamp(16px, 1.3vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-white);
}

.channel.is-active .channel__freq { color: var(--c-yellow); }

.channel__freq i {
  font-family: var(--f-mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .2em;
  color: rgba(var(--on), .45);
}

.channel .thumb { width: 100%; }

.channel__name {
  font-family: var(--f-display);
  font-size: clamp(14px, 1.15vw, 20px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-white);
}

.channel__genre {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on), .5);
}

/* полоса «сейчас играет» видна только у активного канала */
.channel__now { display: none; }

.channel.is-active .channel__now {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 212, 0, .4);
  background: rgba(255, 212, 0, .08);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-yellow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.channel__host {
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(var(--on), .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel__play {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--on), .3);
  border-radius: 50%;
}

.channel__play::before {
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.channel.is-active .channel__play {
  width: 42px;
  height: 42px;
  border: 0;
  background: var(--c-yellow);
  color: var(--shell);
}

/* общая шкала под карточками */
.band-scale {
  position: relative;
  margin-top: clamp(20px, 2.4vw, 38px);
  padding-top: 18px;
  border-top: 1px solid rgba(var(--on), .16);
}

/* выноски от карточек к их частоте: у активной — жёлтая с точкой */
.band-scale__leaders {
  position: relative;
  /* низ блока совпадает с линией шкалы, поэтому выноски упираются в неё
     (19px — это верхний паддинг самой шкалы) */
  height: 36px;
  margin-top: -55px;
}

.band-scale__leaders i {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 55%;
  margin-left: -.5px;
  background: rgba(var(--on), .25);
  transition: height .25s var(--ease), background-color .25s var(--ease);
}

/* активная выноска пересекает шкалу: середина линии приходится на неё */
.band-scale__leaders i.is-current {
  bottom: -36px;
  height: calc(100% + 36px);
  background: var(--c-yellow);
}

.band-scale__leaders i.is-current::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--c-yellow);
}

.band-scale__ticks { position: relative; height: 10px; }

.band-scale__ticks i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: rgba(var(--on), .3);
}

.band-scale__ticks i.is-major { height: 10px; background: rgba(var(--on), .5); }

.band-scale__labels { position: relative; height: 18px; margin-top: 6px; }

.band-scale__labels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(var(--on), .45);
}

.next-up {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.8vw, 34px);
  margin: clamp(18px, 2.2vw, 32px) 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--on), .16);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on), .6);
}

.next-up__item b {
  margin-right: 8px;
  font-weight: 400;
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   9. Секция 02 — расписание
   -------------------------------------------------------------------------- */
.schedule {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

/* часы и блок эфира лежат в одной ячейке: контур цифр уходит под текст */
.schedule__live {
  position: relative;
  display: grid;
  padding-bottom: clamp(20px, 2.4vw, 34px);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}

.schedule__live .live { position: relative; z-index: 1; }

/* Контур цифр берёт цвет от акцента: обводка «по чернилам» из светлой темы
   на тёмной поверхности была не видна и часы пропадали целиком. */
.clock {
  position: absolute;
  left: -8px;
  top: 14px;
  margin: 0;
  pointer-events: none;
  font-family: var(--f-num);
  font-size: clamp(120px, 15vw, 232px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 194, 14, .4);
  pointer-events: none;
}

.clock { -webkit-text-stroke-color: rgba(255, 194, 14, .32); }



.live__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.live__top .meta { color: rgba(var(--on), .6); }
.live__span { margin-left: auto; }

.chip-live {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.chip-live { color: var(--shell); }

.chip-live .dot { background: var(--c-magenta); animation: avpulse 1.6s ease-in-out infinite; }

.live__name {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: clamp(40px, 5.4vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.live__host {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin: 10px 0 0;
}

.live__host em {
  font-family: var(--f-serif);
  font-size: clamp(20px, 1.8vw, 30px);
  font-style: italic;
}

.live__host .meta { color: rgba(var(--on), .45); }

.live__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(18px, 2vw, 30px) 0 0;
}

.live__bar .meta { color: rgba(var(--on), .55); }

.live__track {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(var(--on), .12);
}

.live__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  background: var(--accent);
}

.live__track i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  width: 2px;
  height: 12px;
  background: var(--ink);
}

.live__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(16px, 2vw, 26px) 0 0;
}

.live__nowplaying { display: block; }
.live__nowplaying .meta { display: block; color: rgba(var(--on), .5); }

.live__track-name {
  display: block;
  margin-top: 2px;
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 500;
  color: var(--accent);
}

.live__left { margin-left: auto; color: rgba(var(--on), .5); }

/* сетка дня */
.schedule__day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.schedule__day-head .meta { color: rgba(var(--on), .6); }

.day {
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 1px solid rgba(var(--on), .18);
  list-style: none;
  counter-reset: none;
}

.day__row {
  position: relative;
  display: grid;
  grid-template-columns: 64px auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--on), .1);
}

.day__row:last-child { border-bottom: 0; }

.day__time {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(var(--on), .55);
}

.day__name {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
}

.day__host {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--on), .45);
}

.day__len {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(var(--on), .4);
}

.day__row.is-past .day__name {
  text-decoration: line-through;
  color: rgba(var(--on), .35);
}

.day__row.is-past .day__host { color: rgba(var(--on), .28); }

.day__row.is-live .day__time { color: var(--accent); }

.day__row.is-live::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -27px;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
}

/* карточки «дальше» */
.next-cards {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(28px, 3vw, 48px);
}

.next-cards__label { flex: none; }

.next-cards__list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}

.next-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(var(--on), .12);
  background: var(--card);
  transition: border-color .18s var(--ease);
}

.next-card:hover { border-color: var(--accent); }

.next-card__img { flex: none; width: 86px; }

.next-card__time {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--accent);
}

.next-card__name {
  display: block;
  margin-top: 2px;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.next-card__host {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on), .45);
}

/* --------------------------------------------------------------------------
   10. Секция 03 — ведущие
   -------------------------------------------------------------------------- */
.hosts {
  display: flex;
  align-items: stretch;      /* линия слева идёт во всю высоту ряда */
  gap: clamp(16px, 2vw, 34px);
}

.hosts__spine {
  flex: none;
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(var(--on), .2);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(var(--on), .45);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hosts__list {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 22px);
}

.host {
  flex: 1;
  min-width: 0;
}

/* смещения сняты с макета: не лесенка, а зигзаг */
.host:nth-child(1) { margin-top: 25px; }
.host:nth-child(2) { margin-top: 0; }
.host:nth-child(3) { margin-top: 41px; }
.host:nth-child(4) { margin-top: 9px; }
.host:nth-child(5) { margin-top: 50px; }
.host:nth-child(6) { margin-top: 21px; }

.host__frame {
  position: relative;
  display: block;
  padding: 9px 9px 16px;
  background: var(--c-white);
  border: 1px solid rgba(var(--on), .14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
  transform: rotate(-2.2deg);
  transition: transform .18s var(--ease);
}

.host:nth-child(2) .host__frame { transform: rotate(1.4deg); }
.host:nth-child(3) .host__frame { transform: rotate(-1.2deg); }
.host:nth-child(4) .host__frame { transform: rotate(2deg); }
.host:nth-child(5) .host__frame { transform: rotate(-1.8deg); }
.host:nth-child(6) .host__frame { transform: rotate(1.1deg); }

.host:hover .host__frame,
.host:focus-within .host__frame { transform: rotate(0) translateY(-6px); }

.host.is-live .host__frame { border-color: var(--accent); }

.host__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 52px;
  height: 16px;
  margin-left: -26px;
  background: rgba(20, 17, 16, .07);
  transform: rotate(-4deg);
}

.host__num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 3px 7px;
  background: var(--shell);
  color: var(--c-white);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

/* на жёлтой заливке номер всегда тёмный */
.host.is-live .host__num {
  background: var(--accent);
  color: var(--on-accent);
}

.host__photo {
  aspect-ratio: 4 / 5;
  background-color: rgba(20, 17, 16, .06);
  background-image: repeating-linear-gradient(135deg,
      rgba(20, 17, 16, .07) 0 8px, rgba(20, 17, 16, 0) 8px 16px);
}

.host__photo span { color: rgba(20, 17, 16, .3); }

.host__name {
  display: block;
  margin-top: 10px;
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.2vw, 20px);
  font-style: italic;
  color: var(--shell);
}

.host__live {
  position: absolute;
  right: 12px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.host__show {
  display: block;
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.host__slot {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on), .45);
}

.hosts__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  margin: clamp(14px, 1.5vw, 24px) 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.hosts__foot-name {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.hosts__foot-host {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.4vw, 22px);
  font-style: italic;
  color: rgba(var(--on), .7);
}

.hosts__foot-link { margin-left: auto; color: var(--accent); }

/* --------------------------------------------------------------------------
   11. Секция 04 — лог треков
   -------------------------------------------------------------------------- */
.brackets {
  display: flex;
  gap: 0;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}

.bracket {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 12;
  min-width: 0;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--on), .2);
}

.bracket--live {
  flex: 10;
  border-bottom-color: var(--c-yellow);
}

.bracket .meta { color: rgba(var(--on), .5); }
.bracket--live .meta { color: var(--c-yellow); }

.bracket__name {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 600;
}

.bracket__host { margin-left: auto; }

/* осциллограмма */
.scope { position: relative; padding-top: 62px; }

.scope__flag {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.scope__flag span {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  background: var(--c-yellow);
  color: var(--shell);
}

/* короткая чёрточка от плашки к столбцу — в макете они не слипаются */
.scope__flag span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 22px;
  margin-left: -.5px;
  background: var(--c-yellow);
}

.scope__graph {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(4px, .6vw, 12px);
  height: 170px;
}

.scope__graph::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgba(var(--on), .16);
}

.scope__col {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.scope__up,
.scope__down {
  display: block;
  width: 100%;
  background: rgba(var(--on), .24);
}

.scope__down { opacity: .5; background: rgba(var(--on), .12); }

/* живой столбец пульсирует как единый блок: обе половины растут от средней
   линии, поэтому между ними не появляется разрыв */
.scope__col.is-live .scope__up,
.scope__col.is-live .scope__down {
  background: var(--c-yellow);
  box-shadow: 0 0 18px rgba(255, 212, 0, .55);
  animation: aveq 1.1s ease-in-out infinite alternate;
}

.scope__col.is-live .scope__up   { transform-origin: bottom; }
.scope__col.is-live .scope__down { transform-origin: top; opacity: .75; }

.scope__times {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(var(--on), .45);
}

/* выбор треков */
/* над рядом выбранных треков — тонкая линия, как в макете */
.picks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: clamp(16px, 1.8vw, 26px);
  padding-top: clamp(16px, 1.8vw, 26px);
  border-top: 1px solid rgba(var(--on), .1);
}

.pick {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(var(--on), .14);
}

.pick.is-live {
  border-color: rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.pick__art { flex: none; width: 44px; aspect-ratio: 1; }
.pick__body { min-width: 0; }

.pick__time {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(var(--on), .5);
}

.pick.is-live .pick__time { color: var(--c-yellow); }

.pick__name {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* строка «сейчас играет» */
.nowbar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(16px, 1.8vw, 26px);
  padding-top: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid rgba(var(--on), .1);
}

.nowbar__cover { flex: none; width: 118px; aspect-ratio: 1; }
.nowbar__body { flex: 1; min-width: 0; }

.nowbar__artist {
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.nowbar__title {
  margin: 4px 0 0;
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.6vw, 26px);
  font-style: italic;
  color: rgba(var(--on), .8);
}

.nowbar__label { margin-top: 8px; color: rgba(var(--on), .45); }

.nowbar__time {
  margin: 0;
  text-align: right;
}

.nowbar__time b {
  display: block;
  font-family: var(--f-num);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: var(--c-yellow);
}

.nowbar__time .meta { color: rgba(var(--on), .45); }

/* --------------------------------------------------------------------------
   12. Секция 05 — архив подкастов
   -------------------------------------------------------------------------- */
.archive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  margin: 0 0 clamp(24px, 3vw, 44px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--on), .16);
}

.archive__bar .eyebrow { margin: 0; }
.archive__bar .meta { color: rgba(var(--on), .5); }
.archive__links { margin-left: auto; color: var(--accent); }
.archive__links a:hover { text-decoration: underline; }

.archive {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
}

.archive__rail {
  display: flex;
  align-items: stretch;      /* ось лет растянута на всю высоту секции */
  gap: 14px;
  padding-right: 14px;
  border-right: 1px solid rgba(var(--on), .16);
}

.archive__word {
  margin: 0;
  color: var(--accent);
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;   /* в эталоне слово набрано заглавными */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ось лет: 2026 сверху, 2019 внизу — как в макете */
.years {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(14px, 2.4vh, 34px);
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(var(--on), .45);
}

.years li { position: relative; }

/* у текущего года — засечка к линии */
.years .is-now {
  color: var(--accent);
}

.years .is-now::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  width: 18px;
  height: 1px;
  background: var(--accent);
}

/* --- свежий выпуск --- */
.sheet {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  padding-bottom: clamp(20px, 2.6vw, 36px);
  border-bottom: 2px solid var(--ink);
}

/* Обложка тянется по высоте текстового блока — её низ совпадает с низом
   строки «play episode», как в макете. Ширина следует из пропорции 4:5. */
.sheet__cover {
  flex: none;
  align-self: stretch;                    /* низ совпадает с низом текста */
  width: clamp(130px, 15vw, 202px);       /* ширина как в макете */
  height: auto;                           /* высоту задаёт строка, не картинка */
}

.sheet__text { min-width: 0; }

.sheet__top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}

.sheet__top .meta { color: rgba(var(--on), .5); }

.sheet__num {
  font-family: var(--f-num);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}

.sheet__len { margin-left: auto; }

.sheet__title {
  margin: 10px 0 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.sheet__host {
  margin: 6px 0 0;
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.5vw, 22px);
  font-style: italic;
  color: rgba(var(--on), .75);
}

.sheet__blurb {
  max-width: 52ch;
  margin: 12px 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  color: rgba(var(--on), .68);
}

.sheet__play {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(14px, 1.8vw, 24px) 0 0;
}

.sheet__play .meta { color: rgba(var(--on), .6); }

.round-btn--lg { width: 48px; height: 48px; }

/* --- список выпусков --- */
.month {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(18px, 2.2vw, 30px) 0 0;
}

.month__count { margin-left: auto; color: rgba(var(--on), .45); }

.episodes { margin: 6px 0 0; }

.episode {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--on), .12);
}

.episode__num {
  flex: none;
  width: 46px;
  font-family: var(--f-num);
  font-size: 15px;
  font-weight: 700;
  color: rgba(var(--on), .55);
}

.episode__title {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.episode__host {
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.2vw, 19px);
  font-style: italic;
  color: rgba(var(--on), .6);
  white-space: nowrap;
}

/* микроволна: длина полос пропорциональна длительности выпуска */
.episode__wave {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 1px;
  min-width: 0;
  max-width: clamp(60px, 26%, 320px);
  height: 18px;
  overflow: hidden;
}

.episode__wave i {
  flex: none;
  width: 2px;
  background: rgba(var(--on), .35);
}

.episode__len {
  flex: none;
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(var(--on), .6);
}

.episode__play {
  flex: none;
  color: rgba(var(--on), .5);
  font-size: 12px;
  transition: color .15s var(--ease);
}

.episode__play:hover,
.episode__play:focus-visible { color: var(--accent); }

/* точечный заполнитель между волной и длительностью */
.episode::after {
  content: "";
  order: 5;
  flex: 1 1 auto;
  min-width: 20px;
  height: 1px;
  background-image: radial-gradient(circle, rgba(var(--on), .35) 1px, transparent 1px);
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

.episode__len { order: 6; }
.episode__play { order: 7; }

.archive__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(18px, 2.2vw, 30px) 0 0;
}

.archive__foot .meta { color: rgba(var(--on), .5); }

/* --------------------------------------------------------------------------
   13. Секция 06 — заявки и чат. Две раскладки: светлая «бланк студии»
       и тёмная «открытка». Видна та, что соответствует теме.
   -------------------------------------------------------------------------- */
.req--light { display: none; }
.req--dark  { display: block; }

/* общее для обеих раскладок */
.req__eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.req__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(34px, 4.2vw, 76px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.req__rules { white-space: nowrap; }

/* ======================= СВЕТЛАЯ: бланк студии ======================= */
.req--light {
  /* поверхность всегда бумажная, поэтому цвета фиксированные, не токены темы */
  padding: 0;
  background: var(--c-paper);
  color: var(--c-ink-fixed);
}

.req--light .req__eyebrow { color: rgba(0, 0, 0, .5); }

.req__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  margin: 0;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .6);
}

.req__onair { color: var(--c-magenta); }
.req__onair .dot { background: var(--c-magenta); animation: avpulse 1.6s ease-in-out infinite; }
.req__count { margin-left: auto; }

.req__title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 50px);
  padding: 34px var(--gutter) 26px;
}

.req__lede {
  max-width: 26ch;
  margin: 0 0 0 auto;
}

.req__lede em {
  font-family: var(--f-serif);
  font-size: clamp(18px, 2vw, 28px);
  font-style: italic;
  line-height: 1.25;
}

.stamp {
  flex: none;
  margin: 6px 0 0;
  padding: 8px 14px;
  border: 2px solid var(--c-magenta);
  color: var(--c-magenta);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* три колонки бланка */
.sheet-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr);
  border-top: 2px solid var(--c-ink-fixed);
}

.sheet-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sheet-col--form  { padding: 28px 30px 34px var(--gutter); }
.sheet-col--queue { padding: 28px 26px 34px; border-left: 1px solid rgba(0, 0, 0, .16); }
.sheet-col--chat  { padding: 28px var(--gutter) 34px 30px; border-left: 1px solid rgba(0, 0, 0, .16); }

.sheet-col__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 clamp(16px, 2vw, 26px);
}

.sheet-col__title {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.sheet-col__meta,
.sheet-col__foot {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.sheet-col__foot {
  display: flex;
  align-items: center;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.ghost-no {
  font-family: var(--f-num);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: rgba(0, 0, 0, .16);
}

.dot--accent { background: var(--c-magenta); animation: avpulse 1.6s ease-in-out infinite; }

/* поля бланка */
.ffield { margin: 0 0 16px; }

.ffield label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.ffield__count { float: right; letter-spacing: .12em; }

.ffield input {
  width: 100%;
  padding: 4px 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  background: none;
  color: var(--c-ink-fixed);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
}

.ffield input::placeholder { color: rgba(0, 0, 0, .45); }
.ffield input:focus { outline: none; border-bottom-color: var(--c-magenta); }

.sheet-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 15px 18px;
  background: var(--c-ink-fixed);
  color: var(--c-white);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background-color .18s var(--ease);
}

.sheet-submit:hover,
.sheet-submit:focus-visible { background: var(--c-magenta); }

/* очередь */
.qbar {
  position: relative;
  height: 4px;
  margin: 0;
  background: rgba(0, 0, 0, .14);
}

.qbar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--c-ink-fixed);
}

.qnext {
  margin: 10px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-magenta);
}

.qlist { margin: 12px 0 0; }

.qrow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.qrow__no {
  grid-row: span 2;
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 800;
  color: rgba(0, 0, 0, .5);
}

.qrow__track {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qrow__from {
  grid-column: 2;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.qrow__eta {
  grid-row: 1;
  grid-column: 3;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.qrow.is-next .qrow__no,
.qrow.is-next .qrow__eta { color: var(--c-magenta); }

/* чат бланка */
.lchat { display: flex; flex-direction: column; }

.lchat__row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.lchat__ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  color: rgba(0, 0, 0, .7);
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.lchat__row.is-host .lchat__ava { background: var(--c-magenta); color: var(--c-white); }

.lchat__body {
  min-width: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, .82);
}

.lchat__meta {
  display: flex;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .5);
}

.lchat__meta b { font-weight: 400; }
.lchat__row.is-host .lchat__meta b { color: var(--c-magenta); }

.lchat__typing {
  display: flex;
  align-items: center;
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .45);
}

.lchat__send {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
}

.lchat__send input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  background: none;
  color: var(--c-ink-fixed);
  font-size: 15px;
}

.lchat__send input::placeholder { color: rgba(0, 0, 0, .45); }
.lchat__send input:focus { outline: none; border-bottom-color: var(--c-magenta); }

.lchat__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-ink-fixed);
  color: var(--c-white);
  transition: background-color .18s var(--ease);
}

.lchat__btn:hover,
.lchat__btn:focus-visible { background: var(--c-magenta); }

/* контакты бланка */
.req__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  margin: 0;
  padding: 18px var(--gutter);
  border-top: 1px solid rgba(0, 0, 0, .18);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .7);
}

.req__contacts a { transition: color .15s var(--ease); }
.req__contacts a:hover { color: var(--c-magenta); }
.req__contacts .req__rules { margin-left: auto; color: var(--c-magenta); }

/* ========================= ТЁМНАЯ: открытка ========================= */
.req--dark {
  padding: 0 var(--gutter) 60px;
  background: var(--hero-bg);
  color: var(--ink);
}

.req__eyebrow--dark { margin: 0 0 14px; color: var(--c-yellow); }

.pc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(26px, 3vw, 44px);
}

.pc__meta {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.pc__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 58px);
  align-items: start;
}

/* сама открытка — бумага, цвета фиксированные и не переворачиваются темой */
.postcard {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--c-paper);
  color: var(--c-ink-fixed);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
  transform: rotate(-1.2deg);
}

.postcard__stamp {
  position: absolute;
  top: 26px;
  right: 26px;
  margin: 0;
  padding: 7px 12px;
  border: 2px solid var(--c-magenta);
  color: var(--c-magenta);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(6deg);
}

.postcard__slip {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .5);
}

.postcard__title {
  margin: 10px 0 clamp(18px, 2vw, 28px);
  font-family: var(--f-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.postcard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 30px);
}

.pfield { margin: 0 0 16px; }

.pfield label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.pfield input {
  width: 100%;
  padding: 4px 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  background: none;
  color: var(--c-ink-fixed);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
}

.pfield input::placeholder { color: rgba(0, 0, 0, .45); }
.pfield input:focus { outline: none; border-bottom-color: var(--c-magenta); }

/* кнопка и подпись стоят в одну строку, как в макете */
.postcard__send {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  margin: 6px 0 0;
}

.postcard__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 169px;
  padding: 15px 18px;
  background: var(--c-magenta);
  color: var(--c-white);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background-color .18s var(--ease);
}

.postcard__submit:hover,
.postcard__submit:focus-visible { background: var(--c-ink-fixed); }

.postcard__helper {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .5);
}

/* лента чата: без панели, только линии */
.ribbon__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ribbon__title { color: var(--c-yellow); }
.ribbon__count { color: rgba(255, 255, 255, .6); }

.ribbon__list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.ribbon__list b {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

.ribbon__list .is-host b { color: var(--c-yellow); }

.ribbon__list span {
  min-width: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(255, 255, 255, .92);
}

.ribbon__list time {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
}

.ribbon__send {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
}

.ribbon__send input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  background: none;
  color: var(--c-white);
  font-size: 15px;
}

.ribbon__send input::placeholder { color: rgba(255, 255, 255, .62); }
.ribbon__send input:focus { outline: none; border-bottom-color: var(--c-poster-yellow); }

.ribbon__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--shell);
  transition: transform .18s var(--ease);
}

.ribbon__btn:hover,
.ribbon__btn:focus-visible { transform: scale(1.06); }

.ribbon__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.ribbon__contacts a { transition: color .15s var(--ease); }
.ribbon__contacts a:hover { color: var(--c-yellow); }
.ribbon__contacts .req__rules { margin-left: auto; color: var(--c-yellow); }

/* --------------------------------------------------------------------------
   14. Подвал — распечатка эфирного журнала
   -------------------------------------------------------------------------- */
.footer {
  padding: 44px var(--gutter);
  background: var(--panel);
  color: var(--c-white);
  --on: var(--on-dark);
}

.log {
  position: relative;
  padding: 0 clamp(20px, 2.6vw, 42px) clamp(24px, 3vw, 44px);
  background: var(--sheet);
  border: 1px solid rgba(var(--on), .12);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .6);
}

/* перфорация по краям листа */
.log__perf {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  height: 26px;
  margin: 0 calc(clamp(20px, 2.6vw, 42px) * -1);
  padding: 0 10px;
  border-bottom: 1px dashed rgba(var(--on), .18);
}

.log__perf--bottom {
  margin-top: clamp(20px, 2.6vw, 40px);
  border-top: 1px dashed rgba(var(--on), .18);
  border-bottom: 0;
}

.log__perf::before,
.log__perf::after { content: none; }

.log__perf i,
.log__perf span { display: none; }

.log__perf {
  background-image: radial-gradient(circle, var(--panel) 4.5px, transparent 5px);
  background-size: calc(100% / 30) 26px;
  background-position: center;
  background-repeat: repeat-x;
}

.log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  padding: clamp(18px, 2.2vw, 30px) 0 clamp(14px, 1.8vw, 22px);
}

.log__logo {
  width: auto;
  height: clamp(30px, 2.2vw, 52px);
}

.log__head .meta { color: rgba(var(--on), .5); }
.log__date { margin-left: auto; }

.log__onair {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 212, 0, .5);
  color: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- таблица журнала --- */
.log__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.log__table th {
  padding: 8px 10px 8px 0;
  border-bottom: 1px dashed rgba(var(--on), .2);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(var(--on), .45);
}

.log__table td {
  padding: 12px 10px 12px 0;
  border-bottom: 1px dashed rgba(var(--on), .14);
  vertical-align: middle;
}

.log__table th:first-child,
.log__table td:first-child { width: 74px; }

.log__table th:nth-child(3),
.log__table td:nth-child(3) { width: 175px; }

/* колонки шире макетных: у меня подписи 12px по требованию Envato,
   в 96px «7 REQUESTS» переносилось на вторую строку */
.log__table th:nth-child(4),
.log__table td:nth-child(4) { width: 130px; }

.log__table th:last-child,
.log__table td:last-child { width: 92px; }

.log__table td:first-child,
.log__table td:nth-child(3),
.log__table td:nth-child(4),
.log__table td:last-child { white-space: nowrap; }

.log__table td:first-child,
.log__table td:nth-child(3),
.log__table td:nth-child(4),
.log__table td:last-child {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on), .5);
}

.log__table tr.is-live { background: rgba(255, 212, 0, .07); }

.log__table tr.is-live td:first-child,
.log__table tr.is-live td:nth-child(4),
.log__table tr.is-live td:last-child { color: var(--c-yellow); }

.log__table .bars { color: var(--c-yellow); margin-left: 8px; }

/* --- полоса часа --- */
.log__hour {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(16px, 2vw, 26px) 0 0;
}

.log__hour .meta { color: rgba(var(--on), .5); }

.log__hour-bar {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(var(--on), .16);
}

.log__hour-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  background: var(--c-yellow);
}

.log__hour-bar i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  width: 2px;
  height: 12px;
  background: var(--c-white);
}

/* --- цифры вечера --- */
/* колонки по содержимому: подписи вроде «REQUESTS PLAYED» не переносятся */
.tally {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: clamp(14px, 2vw, 30px);
  margin: clamp(20px, 2.6vw, 36px) 0 0;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: 1px dashed rgba(var(--on), .18);
  border-bottom: 1px dashed rgba(var(--on), .18);
}

.tally b {
  display: block;
  font-family: var(--f-num);
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.tally .is-accent { color: var(--c-yellow); }
.tally .meta { display: block; margin-top: 8px; white-space: nowrap; color: rgba(var(--on), .45); }

/* --- колонки ссылок --- */
.log__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(20px, 2.6vw, 36px);
}

.log__col .meta--accent { color: var(--c-yellow); }

.log__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
}

.log__links a { color: rgba(var(--on), .8); transition: color .15s var(--ease); }
.log__links a:hover,
.log__links a:focus-visible { color: var(--c-yellow); }

.log__addr {
  margin: 12px 0 0;
  font-size: 15px;
  color: rgba(var(--on), .8);
}

.log__addr a:hover { color: var(--c-yellow); }

.news {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(16px, 2vw, 24px);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--on), .25);
}

.news input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  font-size: 15px;
}

.news input::placeholder { color: rgba(var(--on), .45); }
.news input:focus { outline: none; }

.news__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--shell);
}

.log__social {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on), .55);
}

.log__social a:hover { color: var(--c-yellow); }

/* --- подпись --- */
.signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 30px);
  margin: clamp(22px, 2.8vw, 40px) 0 0;
}

.signoff__text em {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.4vw, 32px);
  font-style: italic;
}

.signoff__text .meta { display: block; margin-top: 8px; color: rgba(var(--on), .45); }

.signoff__stamp {
  flex: none;
  padding: 10px 18px;
  border: 2px solid var(--c-yellow);
  color: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* зубчатый нижний край листа */
.log__teeth {
  height: 14px;
  margin: 0 calc(clamp(20px, 2.6vw, 42px) * -1) calc(clamp(24px, 3vw, 44px) * -1);
  background: var(--sheet);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 97.5% 100%, 95% 40%, 92.5% 100%, 90% 40%,
    87.5% 100%, 85% 40%, 82.5% 100%, 80% 40%, 77.5% 100%, 75% 40%, 72.5% 100%, 70% 40%,
    67.5% 100%, 65% 40%, 62.5% 100%, 60% 40%, 57.5% 100%, 55% 40%, 52.5% 100%, 50% 40%,
    47.5% 100%, 45% 40%, 42.5% 100%, 40% 40%, 37.5% 100%, 35% 40%, 32.5% 100%, 30% 40%,
    27.5% 100%, 25% 40%, 22.5% 100%, 20% 40%, 17.5% 100%, 15% 40%, 12.5% 100%, 10% 40%,
    7.5% 100%, 5% 40%, 2.5% 100%, 0 40%);
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on), .5);
}

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

/* --------------------------------------------------------------------------
   15. Анимации
   -------------------------------------------------------------------------- */
@keyframes aveq {
  from { transform: scaleY(.28); }
  to   { transform: scaleY(1); }
}

/* четыре полосы значка меняют высоту вразнобой */
@keyframes avbars {
  0%   { background-size: 2px 40%, 2px 75%, 2px 55%, 2px 90%; }
  35%  { background-size: 2px 85%, 2px 35%, 2px 95%, 2px 45%; }
  70%  { background-size: 2px 55%, 2px 90%, 2px 40%, 2px 80%; }
  100% { background-size: 2px 95%, 2px 50%, 2px 75%, 2px 35%; }
}

@keyframes avmarq {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes avblink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes avpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

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

/* =============================================================================
   16. Адаптив

   Макет нарисован под 1440–2560. Ниже — раскладки для ноутбуков, планшетов
   и телефонов. Меню-шторка работает на чекбоксе, то есть и без JavaScript.
   Точки перелома: 1400 / 1100 / 820 / 560.
   ============================================================================= */

/* бургер виден только на узких экранах */
.burger { display: none; }

/* затемнение и крестик живут только в мобильной шторке */
.nav-veil,
.nav__close { display: none; }
.menu-toggle { position: absolute; }

/* ------------------------------ ≤1400px ------------------------------ */
@media (max-width: 1400px) {
  .hero__col { max-width: 62%; }

  .channels { flex-wrap: wrap; }
  .channels li { flex: 1 1 calc(25% - 12px); }
  .channels li:has(.is-active) { flex: 1 1 calc(33% - 12px); }

  .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .log__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .log__col--studio { grid-column: span 2; }
}

/* ------------------------------ ≤1100px ------------------------------ */
@media (max-width: 1100px) {
  /* --- шапка: пункты уезжают в шторку --- */
  .burger {
    display: grid;
    place-items: center;
    order: 3;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
  }

  .burger__box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
  }

  .burger__box i {
    display: block;
    height: 2px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }

  .menu-toggle:checked ~ .burger .burger__box i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle:checked ~ .burger .burger__box i:nth-child(2) { opacity: 0; }
  .menu-toggle:checked ~ .burger .burger__box i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(22rem, 86vw);
    margin: 0;
    padding: 96px 28px 32px;
    background: var(--dd-bg);
    border-left: 1px solid var(--dd-rule);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    overflow-y: auto;
  }

  .menu-toggle:checked ~ .nav { transform: none; }

  /* пока шторка открыта, страница под ней не прокручивается */
  body:has(.menu-toggle:checked) { overflow: hidden; }

  /* затемнение: касание мимо шторки закрывает её */
  .menu-toggle:checked ~ .nav-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
  }

  /* крестик внутри шторки: сам бургер оказывается под ней и недоступен */
  .nav__close {
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-family: var(--f-body);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: var(--c-white);
    cursor: pointer;
  }

  .nav__close:hover { color: var(--c-yellow); }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .nav__link { font-size: 16px; }

  /* выпадающее меню внутри шторки раскрыто списком */
  .nav__item--menu { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav__caret { display: none; }

  .nav__bridge {
    position: static;
    padding: 0;
    visibility: visible;
    opacity: 1;
  }

  .nav__panel {
    min-width: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid var(--dd-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 12px;
  }

  .lang { order: 2; }
  .pill-cta { order: 1; }

  /* --- первый экран --- */
  .hero__col { max-width: 100%; }

  .hero__poster-img { object-position: 76% 50%; }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
                rgba(13, 13, 13, .94) 0%,
                rgba(13, 13, 13, .86) 46%,
                rgba(13, 13, 13, .2) 82%,
                rgba(13, 13, 13, 0) 100%);
  }

  .hero__inner { z-index: 2; }
  .hero__side { display: none; }

  /* тюнер: станция и шкала сверху, эквалайзер под ними */
  .tuner__grid { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }

  .tuner__eq {
    grid-column: span 2;
    border-left: 0;
    border-top: 1px solid rgba(var(--on-dark), .1);
  }

  /* --- секции --- */
  .schedule { grid-template-columns: minmax(0, 1fr); }
  .schedule__day { margin-top: 34px; }

  .hosts__list { flex-wrap: wrap; }
  .host { flex: 1 1 calc(33% - 16px); }

  .next-cards { flex-direction: column; align-items: flex-start; gap: 16px; }
  .next-cards__list { width: 100%; }

  .archive { grid-template-columns: minmax(0, 1fr); }
  .archive__rail { display: none; }

  .pc__cols { grid-template-columns: minmax(0, 1fr); }
  .postcard { transform: none; }

  .log__table thead { display: none; }

  .log__table tr {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(var(--on), .14);
  }

  .log__table td { padding: 0; border: 0; }
  .log__table td:nth-child(2) { grid-column: 2 / 4; }
  .log__table td:nth-child(3),
  .log__table td:nth-child(4) { grid-column: 2; }
  .log__table td:last-child { grid-row: 1; grid-column: 3; text-align: right; }
  .log__table th:first-child,
  .log__table td:first-child,
  .log__table th:nth-child(3),
  .log__table td:nth-child(3),
  .log__table th:nth-child(4),
  .log__table td:nth-child(4),
  .log__table th:last-child,
  .log__table td:last-child { width: auto; }
}

/* ------------------------------- ≤820px ------------------------------- */
@media (max-width: 820px) {
  :root { --gutter: 24px; }

  /* постер отдельным блоком сверху, текст под ним */
  .hero { display: block; min-height: 0; }
  .hero::after { content: none; }

  .hero__poster { position: relative; display: block; }

  .hero__poster-img {
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: 72% 50%;
  }

  .hero__inner { padding: 24px var(--gutter) 28px; }
  .hero__col { justify-content: flex-start; }
  .ticker--top { margin-top: 0; }

  /* Первый экран строится как на большом экране: снимок — фон, а строка
     шапки, бегущие строки, заголовок и плеер лежат поверх него. Раньше
     фото занимало целый экран отдельным блоком, и до плеера надо было
     доскроллить. */
  .hero { position: relative; display: block; }

  .hero__poster {
    position: absolute;
    inset: 0;
    display: block;
  }

  .hero__poster-img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* лицо держим в верхней трети — там его не закрывает текст */
    object-position: 68% 16%;
  }

  /* штора: сверху под строку шапки, снизу под заголовок и плеер */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(13, 13, 13, .86) 0,
        rgba(13, 13, 13, .62) 26%,
        rgba(13, 13, 13, .8) 54%,
        rgba(13, 13, 13, .96) 78%,
        rgb(13, 13, 13) 100%);
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    padding: 0;
  }

  .hero .topbar {
    position: static;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 14px var(--gutter);
  }

  /* на внутренних страницах строка складывалась в два ряда: бургер
     переносился под логотип. Держим одной строкой, как на главной */
  .page-head .topbar {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .page-head .logo { margin-right: auto; }

  /* контент начинается сразу под строкой шапки — пустоты между ними нет */
  .hero__col { padding: 18px var(--gutter) 26px; }

  /* на телефоне 6.4vw даёт всего 27px, и заголовок упирался в нижнюю
     границу clamp. Здесь он живёт своей мерой, десктоп не затронут */
  .headline__made { font-size: clamp(26px, 7vw, 40px); }
  .headline__big { font-size: clamp(40px, 12vw, 64px); }
  .headline__still { font-size: clamp(26px, 7.4vw, 42px); }

  /* в строке остаются логотип слева и управление справа */
  .topbar .logo { margin-right: auto; }
  .topbar .nav { margin-left: 0; }
  .burger { margin-left: 0; }

  .player { flex-direction: column; align-items: flex-start; }
  .player__row { gap: 10px 16px; }

  /* тюнер в одну колонку */
  .tuner__grid { grid-template-columns: minmax(0, 1fr); }

  .tuner__station,
  .tuner__dial,
  .tuner__eq { padding: 18px 20px; }

  .tuner__dial,
  .tuner__eq {
    border-left: 0;
    border-top: 1px solid rgba(var(--on-dark), .1);
  }

  .tuner__logo { height: 96px; }

  .channels li,
  .channels li:has(.is-active) { flex: 1 1 calc(50% - 8px); }

  .channel.is-active { transform: none; }

  .host { flex: 1 1 calc(50% - 12px); margin-top: 0 !important; }
  .host__frame { transform: none; }

  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nowbar { flex-wrap: wrap; }
  .nowbar__time { margin-left: auto; }

  .sheet { flex-direction: column; }
  .sheet__cover { align-self: flex-start; width: clamp(140px, 40vw, 220px); }

  .episode__wave,
  .episode__host { display: none; }

  .postcard__grid { grid-template-columns: minmax(0, 1fr); }

  .ribbon__list li { grid-template-columns: minmax(0, 1fr) auto; }
  .ribbon__list b { grid-column: 1 / -1; }

  .tally { grid-template-columns: repeat(2, max-content); gap: 22px 40px; }
  .log__cols { grid-template-columns: minmax(0, 1fr); }
  .log__col--studio { grid-column: auto; }

  .signoff { flex-direction: column; align-items: flex-start; }
  .colophon { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ------------------------------- ≤560px ------------------------------- */
@media (max-width: 560px) {
  :root { --gutter: 18px; }

  /* крупные цифры за названием передачи на телефоне обрезаются и мешают */
  .clock { display: none; }

  .logo img { height: 34px; }
  .pill-cta { height: 34px; padding: 0 16px; }
  .lang__code, .lang__caret { display: none; }
  .lang__btn { padding: 0; }

  .hero__poster-img { aspect-ratio: 4 / 5; }

  .headline { gap: 12px; }
  .headline__side { display: none; }

  .ring { width: 96px; height: 96px; }

  .player__live { gap: 6px; }
  .player__listeners { margin-left: 0; }

  .dial__read { min-width: 0; gap: 8px; }
  .eq__bands { gap: 4px; }
  .band__label, .band__gain { font-size: 12px; }

  .channels li,
  .channels li:has(.is-active) { flex: 1 1 100%; }

  .host { flex: 1 1 100%; }

  .brackets { flex-direction: column; }
  .bracket { flex: none; }

  .scope__graph { height: 120px; }
  .picks { grid-template-columns: minmax(0, 1fr); }

  .month { flex-wrap: wrap; }
  .episode { flex-wrap: wrap; gap: 6px 12px; }
  .episode::after { display: none; }

  .ribbon__send { gap: 10px; }
  .tally { grid-template-columns: minmax(0, 1fr); }
}

/* ------------- тач-устройства: показываем то, что на десктопе по наведению ------------- */
@media (hover: none) {
  .nav__bridge,
  .lang__bridge { transition: none; }

  .host__frame { transform: none; }
}

/* =============================================================================
   17. СТРАНИЦА ABOUT
   Шапка здесь не первый экран, а обычная полоса: логотип с меню, хлебные
   крошки, интро с плеером и шкала FM. Плеер и подвал взяты с главной без
   изменений — на всех страницах он должен быть одинаковым.
   ============================================================================= */
.page {
  background: var(--hero-bg);
}

.page-head {
  position: relative;
  background: var(--hero-bg);
}

.page-head__inner {
  position: relative;
  /* 30px сверху — как на главной, чтобы логотип не прыгал при переходе;
     в эталоне здесь 40px, владелец выровнял по главной */
  padding: 30px var(--gutter) 22px;
}

/* линия под меню не растягивается на всю ширину, а живёт на отступах */
.page-head__inner::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  height: 1px;
  background: rgba(var(--on-dark), .12);
}

/* --- хлебные крошки --- */
.crumbs {
  padding: 16px var(--gutter);
}

.crumbs__list {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.crumbs__list li + li::before {
  content: "/";
  margin-right: 12px;
  color: rgba(var(--on-dark), .28);
}

.crumbs__list a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.crumbs__list a:hover,
.crumbs__list a:focus-visible { color: var(--accent); }

.crumbs__list [aria-current="page"] { color: var(--ink); }

/* --- интро --- */
/* Первый экран: сверху 60px, снизу ничего — интервал держит разделитель,
   как во всех эталонах страниц. */
.intro {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) 0;
}

.intro__row {
  display: flex;
  gap: 56px;
  align-items: center;
}

/* обе колонки растут одинаково, у плеера основа на 80px шире —
   так соотношение 852/932 держится и на 1920, и на 2560 */
.intro__text   { flex: 1 1 0; min-width: 0; }
.intro__player { flex: 1 1 80px; min-width: 0; }

.intro__h1 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 96px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.intro__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  align-items: baseline;
  margin: 4px 0 0;
}

.intro__serif {
  font-family: var(--f-serif);
  font-size: clamp(40px, 5vw, 96px);
  font-style: italic;
  font-weight: 400;
  line-height: .96;
  color: var(--accent);
}

.intro__lede {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.08vw, 40px);
  font-weight: 300;
  line-height: 1;
  color: rgba(var(--on-dark), .6);
}

/* на первом экране у плеера свои вертикальные поля — здесь полоса короче,
   поэтому их снимаем, сам плеер остаётся таким же, как на главной */
.intro__player .player { margin: 0; padding: 0; }

/* --- шкала FM под интро --- */
/* Сверху шкалы линия во всю ширину контента, риски свисают прямо от неё,
   подписи под ними, метка сегодняшнего часа стоит выше линии. */
.fmscale {
  position: relative;
  margin-top: 45px;
  border-top: 1px solid rgba(var(--on-dark), .28);
}

.fmscale__ticks {
  position: relative;
  height: 14px;
}

.fmscale__ticks i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 8px;
  background: rgba(var(--on-dark), .28);
}

.fmscale__ticks i.is-major {
  height: 14px;
  background: rgba(var(--on-dark), .55);
}

.fmscale__labels {
  position: relative;
  height: 12px;
  margin-top: 10px;
}

.fmscale__labels span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  /* кегль и трекинг как в прототипе: 9px без разрядки */
  font-size: 9px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  color: rgba(var(--on-dark), .5);
}

/* метка часа: подпись, под ней точка, от точки ножка вниз сквозь риски */
.fmscale__today {
  position: absolute;
  top: -30px;
  left: 64%;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

.fmscale__today::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.fmscale__today::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: var(--accent);
}

/* =============================================================================
   18. ABOUT — ПОЛОСА «ВЕДУЩИЕ»
   Стена приколотых фотографий: рамки со скотчем наверху, лёгкий разворот,
   у эфирной карточки рамка пурпурная. Наведение выпрямляет и приподнимает.
   ============================================================================= */
.crew {
  padding: 60px var(--gutter) 0;
  background: var(--card);
}

.crew__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}

.crew__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(30px, 3.96vw, 76px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.crew__eyebrow {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

/* --- стена --- */
.crew__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.crewcard {
  margin-top: var(--lift, 0);
  transform: rotate(var(--rot, 0deg));
  transition: transform .28s ease;
}

.crewcard:hover,
.crewcard:focus-within { transform: rotate(0) translateY(-6px); }

.crewcard__frame {
  position: relative;
  margin: 0;
  padding: 9px 9px 16px;
  border: 1px solid rgba(var(--on-dark), .14);
  background: var(--card);
}

.crewcard.is-live .crewcard__frame { border-color: var(--c-magenta); }

/* полоска скотча на верхнем крае рамки */
.crewcard__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 52px;
  height: 16px;
  background: rgba(var(--on-dark), .14);
  transform: translateX(-50%);
}

.crewcard__num,
.crewcard__live {
  position: absolute;
  top: 20px;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.crewcard__num {
  left: 20px;
  color: rgba(var(--on-dark), .7);
}

.crewcard__live {
  right: 20px;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--c-magenta);
}

.crewcard__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.crewcard__name {
  margin: 14px 0 0;
  font-family: var(--f-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: rgba(var(--on-dark), .75);
}

.crewcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin: 12px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.crewcard__show { color: rgba(var(--on-dark), .75); }

/* четыре полоски живого эквалайзера у эфирной карточки */
.aveq {
  display: inline-flex;
  gap: 2px;
  align-items: flex-end;
  height: 11px;
}

.aveq i {
  width: 2px;
  height: 100%;
  background: currentcolor;
  animation: aveq .9s ease-in-out infinite alternate;
}

.aveq i:nth-child(2) { animation-delay: .18s; }
.aveq i:nth-child(3) { animation-delay: .36s; }
.aveq i:nth-child(4) { animation-delay: .54s; }

@keyframes aveq {
  from { transform: scaleY(.28); }
  to   { transform: scaleY(1); }
}

.is-tuner-quiet .aveq i { animation-play-state: paused; }

/* --- нижняя строка полосы --- */
.crew__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin: 40px 0 0;
  padding: 20px 0 0;
  border-top: 2px solid var(--ink);
}

.crew__label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}

.crew__show {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.56vw, 30px);
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}

.crew__name {
  font-family: var(--f-serif);
  font-size: 24px;
  font-style: italic;
  color: rgba(var(--on-dark), .75);
}

.crew__play {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .3);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  place-items: center;
  transition: border-color .2s ease, background .2s ease;
}

.crew__play:hover { border-color: var(--accent); background: rgba(var(--on-dark), .06); }

.crew__all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.crew__all:hover { text-decoration: underline; }

/* =============================================================================
   19. ABOUT — ПОЛОСА «КАК СТРОИТСЯ НОЧЬ»
   Четыре шага на суточной рейке: номер, название, пояснение, полоска доли
   суток и время. Ночной шаг переваливает за полночь и рисуется двумя кусками.
   ============================================================================= */
.night {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.night__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}

.night__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 2.92vw, 56px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.night__eyebrow {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.night__steps {
  margin: 43px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  /* колонки сняты с эталона: рейка идёт от 406 до 2394 при 2480 контента */
  grid-template-columns: 32px 286px minmax(0, 1fr) 102px;
  column-gap: 24px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.step__num,
.step__when {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .12em;
  color: rgba(var(--on-dark), .45);
}

.step__when { text-align: right; }

.step__body { display: block; }

.step__title {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.09vw, 21px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.step__blurb {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

/* рейка суток: полоска стоит там, где шаг попадает в 24 часа */
.step__rail {
  position: relative;
  display: block;
  align-self: center;
  height: 7px;
}

/* дорожка суток: тонкая линия во всю рейку, полоска шага лежит на ней */
.step__rail::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(var(--on-dark), .16);
}

.step__rail i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) / 24 * 100%);
  width: calc(var(--span) / 24 * 100%);
  background: rgba(var(--on-dark), .35);
}

/* шаг, который сейчас в эфире */
.step.is-live .step__num,
.step.is-live .step__title,
.step.is-live .step__blurb,
.step.is-live .step__when { color: var(--accent); }

.step.is-live .step__rail i { background: var(--accent); }

.night__hours {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 0;
  padding-bottom: 30px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .1em;
  color: rgba(var(--on-dark), .45);
}

/* =============================================================================
   20. ABOUT — ПОЛОСА «СТУДИЯ»
   Три кадра разной ширины и пропорции стоят в ряд от одной верхней линии,
   под ними опись оборудования в шесть колонок.
   ============================================================================= */
.studio {
  padding: 0 var(--gutter);
  background: var(--hero-bg);
}

.studio__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}

.studio__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 2.92vw, 56px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.studio__eyebrow {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- кадры --- */
.studio__stills {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 34px;
}

.still {
  margin: 0;
  min-width: 0;
}

/* ширины взяты с эталона: 1057 / 661 / 727 при 2480 контента */
.still--room  { flex: 1057 1 0; }
.still--desk  { flex: 661 1 0; }
.still--decks { flex: 727 1 0; }

.still__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.still--room  .still__img { aspect-ratio: 4 / 3; }
.still--desk  .still__img { aspect-ratio: 4 / 5; }
.still--decks .still__img { aspect-ratio: 1 / 1; }

.still__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.still__cap b { color: rgba(var(--on-dark), .4); }
.still__cap span { color: rgba(var(--on-dark), .5); }

/* --- опись оборудования --- */
.studio__gear {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  margin-top: 25px;
  padding: 29px 0 30px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.gear__name {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(15px, .89vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.gear__note {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: rgba(var(--on-dark), .55);
}

/* =============================================================================
   21. ABOUT — ПОЛОСА «КТО ПЛАТИТ ЗА НОЧЬ»
   Шесть плашек партнёров вплотную друг к другу, под ними строка сборов
   с суммой, полосой прогресса, тремя суммами взноса и кнопкой.
   ============================================================================= */
.keep {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.keep__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.keep__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.33vw, 64px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.keep__lede {
  max-width: 354px;
  margin: 23px 0 0;
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(var(--on-dark), .7);
}

/* --- плашки партнёров --- */
.keep__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.plate {
  padding: 27px;
  border: 1px solid rgba(var(--on-dark), .12);
}

/* соседние плашки делят одну линию */
.plate + .plate { border-left: 0; }

/* место под логотип: пока фотографий нет, стоит тот же штриховой
   плейсхолдер, что и на главной — имя партнёра читается внутри него */
.plate__logo {
  display: block;
  width: 100%;
  /* высота считается от заданной пропорции, а не от размеров файла —
     иначе атрибуты width/height у картинки перебьют aspect-ratio */
  height: auto;
  aspect-ratio: 378 / 173;
  object-fit: cover;
  transition: opacity .2s ease;
}

.plate:hover .plate__logo { opacity: .85; }

.plate__note {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

/* --- строка сборов --- */
.keep__support {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 36px;
  padding-bottom: 30px;
}

.keep__sum {
  margin: 0;
  font-family: var(--f-num);
  font-size: clamp(36px, 3.75vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.keep__what {
  flex: 1 1 294px;
  min-width: 0;
}

.keep__raised {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(16px, .99vw, 19px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.keep__covers {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.keep__bar {
  display: block;
  height: 4px;
  margin-top: 14px;
  background: rgba(var(--on-dark), .14);
}

.keep__bar i {
  display: block;
  width: 61%;
  height: 100%;
  background: var(--accent);
}

.keep__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.keep__tiers button {
  padding: 11px 16px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.keep__tiers button:hover { border-color: var(--accent); color: var(--accent); }

.keep__donate {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 13px 24px;
  border: 1px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.keep__donate:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* =============================================================================
   22. ABOUT — ПОЛОСА «СВЯЗЬ И НАБОР»
   Две колонки, разделённые вертикальной линией. Контрастные плашки здесь
   чисто чёрные (#000), а не цвета фона — так просил макет.
   ============================================================================= */
.join {
  padding: 0 var(--gutter) 60px;
  background: var(--hero-bg);
}

.join__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.join__label { color: var(--accent); }
.join__visits { margin-left: auto; }

/* --- две колонки --- */
.join__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.067fr) minmax(0, 1fr);
  gap: 60px;
  margin-top: 44px;
}

.join__right {
  padding-left: 60px;
  border-left: 1px solid rgba(var(--on-dark), .14);
}

.join__with {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(24px, 1.87vw, 36px);
  font-style: italic;
  color: rgba(var(--on-dark), .7);
}

/* чисто чёрная плашка под крупным словом */
.join__us {
  display: inline-block;
  margin: 6px 0 0;
  padding: 6px 22px 12px;
  background: #000;
  font-family: var(--f-display);
  font-size: clamp(48px, 6.25vw, 120px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.join__lede {
  max-width: 720px;
  margin: 28px 0 0;
  font-family: var(--f-body);
  font-size: clamp(15px, .94vw, 18px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--on-dark), .68);
}

/* --- открытые роли --- */
.join__roles {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.role {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 22px;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(var(--on-dark), .12);
  transition: color .2s ease;
}

.role:last-child { border-bottom: 1px solid rgba(var(--on-dark), .12); }

.role:hover .role__title,
.role:hover .role__arrow { color: var(--accent); }

.role__num,
.role__terms,
.role__tag {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.role__title {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.15vw, 22px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .2s ease;
}

.role__terms { display: block; margin-top: 7px; }

.role__tag {
  padding: 5px 10px;
  border: 1px solid rgba(var(--on-dark), .22);
  color: var(--accent);
}

.role__arrow {
  font-size: 14px;
  color: rgba(var(--on-dark), .45);
  transition: color .2s ease;
}

/* --- контакты --- */
.join__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-top: 34px;
}

.contact { margin: 0; }

.contact b {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .62);
}

.contact span,
.contact a {
  display: block;
  margin-top: 9px;
  font-family: var(--f-body);
  font-size: clamp(16px, .99vw, 19px);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

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

/* --- форма заявки на чёрной плашке --- */
.apply {
  padding: 32px;
  background: #000;
}

.apply__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 15px;
}

.apply__title {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff;
}

.apply__slots {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* имя и почта стоят в одну строку, как в эталоне */
.apply__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
}

.field { margin: 0 0 15px; }

.field__input {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.field__input::placeholder {
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
}

/* два нижних поля — высокие, под несколько строк */
.field__input--tall {
  height: 115px;
  resize: vertical;
}

.field__input:focus {
  border-bottom-color: var(--accent);
  outline: none;
}

.apply__send {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
  padding: 16px 24px;
  border: 0;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
  cursor: pointer;
  transition: filter .2s ease;
}

.apply__send:hover { filter: brightness(1.12); }

.apply__note {
  margin: 15px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .45);
}

.apply__next-title {
  margin: 42px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.apply__next {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.apply__next li:first-child { margin-top: 0; }

.apply__next li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  margin-top: 15px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.2;
  color: rgba(255, 255, 255, .75);
}

.apply__next span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--accent);
}

.join__desk {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 22px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- нижняя строка --- */
.join__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin: 50px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.chip {
  padding: 8px 14px;
  border: 1px solid rgba(var(--on-dark), .22);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
}

.join__all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.join__all:hover { text-decoration: underline; }

/* =============================================================================
   23. STATIONS — МЕТКИ КАНАЛОВ НА ШКАЛЕ FM
   Метки каналов стоят в том же ряду, что и риски: у эфирного канала засечка
   толще и жёлтая. Имена каналов — третьей строкой под цифрами частот. Игла
   поднимается над шкалой, под ней частота и имя канала.
   ============================================================================= */
/* имена каналов лежат в абсолютном слое и высоты не дают — держим её сами */
.fmscale--channels { padding-bottom: 50px; }

.fmscale__marks {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
}

/* засечка канала */
.fmmark {
  position: absolute;
  top: 0;
  width: 1px;
  height: 13px;
  background: rgba(var(--on-dark), .62);
}

/* имя канала под цифрами частот */
.fmmark i {
  position: absolute;
  top: 47px;
  left: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--on-dark), .34);
  transform: translateX(-50%);
}

.fmmark.is-live {
  width: 2px;
  height: 20px;
  background: var(--c-yellow);
}

/* у эфирного канала имя опускается ниже: над ним встаёт частота */
.fmmark.is-live i {
  top: 66px;
  font-weight: 400;
  color: var(--c-yellow);
}

/* игла: ножка вверх с точкой наверху, под шкалой — частота */
.fmmark__needle {
  position: absolute;
  top: -12px;
  width: 1px;
  height: 34px;
  background: var(--accent);
}

.fmmark__needle::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.fmmark__needle i {
  position: absolute;
  top: 55px;
  left: 50%;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  transform: translateX(-50%);
}

/* =============================================================================
   24. STATIONS — ФИЛЬТР ПО НАСТРОЕНИЮ
   Вместо обычных тегов — шкала, продолжающая метафору тюнера: засечки жанров
   от «спокойного» к «плотному», у настроенной подпись TUNED.
   ============================================================================= */
.filter {
  padding: 60px var(--gutter) 0;
  background: var(--hero-bg);
}

.filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-end;
  justify-content: space-between;
}

.filter__mood {
  flex: 1 1 900px;
  min-width: 0;
}

.filter__label,
.filter__edge {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.filter__head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}

.filter__edge { color: rgba(var(--on-dark), .35); }
.filter__edge--end { margin-left: auto; }

/* засечки жанров */
.filter__marks {
  position: relative;
  height: 76px;
  margin-top: 22px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

/* засечка стоит на своей отметке, подпись и счётчик — по центру под ней */
.genre {
  position: absolute;
  top: 0;
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  gap: 6px;
  justify-items: center;
  text-align: center;
  transform: translateX(-50%);
}

/* крайние прижимаются к краям шкалы, чтобы не выходить за отступы */
/* крайние не выходят за отступы, но подпись с числом всё равно по центру */
.genre:first-child { transform: none; }
.genre:last-child  { transform: translateX(-100%); }

.genre::before {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background: rgba(var(--on-dark), .3);
}

.genre:first-child::before { margin-right: auto; }
.genre:last-child::before  { margin-left: auto; }

.genre__name {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  transition: color .2s ease;
}

.genre__count {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  color: rgba(var(--on-dark), .45);
}

.genre__tuned {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
}

.genre:hover .genre__name { color: var(--ink); }

.genre.is-tuned::before { width: 2px; height: 20px; background: var(--accent); }
.genre.is-tuned .genre__name,
.genre.is-tuned .genre__count { color: var(--accent); }
.genre.is-tuned .genre__tuned { opacity: 1; }

/* правая колонка: сортировка и состояние */
.filter__sort {
  flex: 0 0 auto;
  text-align: right;
}

.filter__sortrow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

.chip-sort {
  padding: 7px 12px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.chip-sort:hover { border-color: var(--accent); color: var(--accent); }

/* правило жёлтого: на жёлтой заливке текст всегда тёмный */
.chip-sort.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.filter__dir {
  padding: 5px 10px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color .2s ease;
}

.filter__dir:hover { border-color: var(--accent); }
.filter__dir.is-up span { display: inline-block; transform: rotate(180deg); }

.filter__status {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  margin: 16px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.filter__reset {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(var(--on-dark), .45);
  text-decoration: underline;
  cursor: pointer;
}

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

/* =============================================================================
   25. STATIONS — ВЫБРАННЫЙ КАНАЛ
   Широкий артворк 21:8, под ним частота с названием и кнопкой, описание,
   ведущие и лог последних пяти треков.
   ============================================================================= */
.cdet {
  padding: 0 var(--gutter);
  background: var(--card);
}

.cdet__art {
  position: relative;
  margin: 0;
}

.cdet__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

/* затемнение у нижнего края, чтобы подпись читалась на любой фотографии */
.cdet__scrim {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
  pointer-events: none;
}

/* под артворком две колонки: слева канал и описание, справа лог треков */
.cdet__cols {
  display: grid;
  grid-template-columns: minmax(0, 1323fr) minmax(0, 1103fr);
  gap: 54px;
  align-items: stretch;
  margin-top: 34px;
  padding-bottom: 30px;
}

/* обе колонки одной высоты: содержимое распределяется по ней, а не жмётся вверх */
.cdet__left,
.cdet__log {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* частота, название и кнопка лежат поверх артворка, у его нижнего края */
.cdet__head {
  position: absolute;
  right: 40px;
  bottom: 34px;
  left: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  align-items: center;
}

.cdet__freq {
  margin: 0;
  font-family: var(--f-num);
  font-size: clamp(30px, 2.6vw, 75px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--c-yellow);
}

.cdet__title { min-width: 0; }

.cdet__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 1.77vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff;
}

.cdet__meta {
  margin: 9px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

/* правило жёлтого: на заливке текст и значок тёмные */
.cdet__listen {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  padding: 14px 24px;
  border: 1px solid var(--accent);
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: filter .2s ease;
}

.cdet__listen:hover { filter: brightness(1.12); }

.cdet__body {
  display: grid;
  /* третья строка — список ведущих: он забирает остаток высоты, чтобы
     нижняя линия слева встала вровень с последней строкой лога справа */
  grid-template-rows: auto auto 1fr;
  flex: 1;
  gap: 22px;
  margin-top: 30px;
}

.cdet__lede {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(19px, 1.41vw, 27px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(var(--on-dark), .78);
}

.cdet__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(15px, .94vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(var(--on-dark), .68);
}

.cdet__hosts {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 24px 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.cdet__host {
  display: flex;
  flex: 1;
  gap: 18px;
  align-items: center;
  min-height: 68px;
  border-bottom: 1px solid rgba(var(--on-dark), .12);
}

/* портрет ведущего */
.cdet__face {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: cover;
  object-position: center 22%;
}

.cdet__host b {
  font-family: var(--f-display);
  font-size: clamp(16px, .99vw, 19px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.cdet__slot {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

/* --- лог последних треков --- */


.cdet__loghead {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--on-dark), .22);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cdet__loglabel { color: rgba(var(--on-dark), .55); }

.cdet__logall {
  color: var(--accent);
  text-decoration: none;
}

.cdet__logall:hover { text-decoration: underline; }

/* пять строк делят высоту колонки поровну — как в эталоне, по 72px */
.cdet__logrows {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logrow {
  display: flex;
  flex: 1;
  gap: 24px;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid rgba(var(--on-dark), .1);
}

.logrow__time {
  flex: none;
  width: 62px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  color: rgba(var(--on-dark), .45);
}

/* первый трек — тот, что играет сейчас */
.logrow:first-child .logrow__time { color: var(--accent); }

.logrow__body { min-width: 0; }

.logrow__track {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(15px, .89vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.logrow__label {
  display: block;
  margin-top: 7px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

/* =============================================================================
   26. STATIONS — НЕДЕЛЯ ПО КАНАЛАМ
   Колонки сняты с эталона: имя 240, рейка 2100, итог 92 при 2480 контента.
   Блок эфира заливается жёлтым, текст внутри чёрный, а вся эфирная строка
   подсвечена жёлтым на 5%.
   ============================================================================= */
.week {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.week__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}

.week__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 2.92vw, 56px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.week__days {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.week__date {
  margin-right: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.chip-day {
  padding: 7px 14px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.chip-day:hover { border-color: var(--accent); color: var(--accent); }

.chip-day.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* часы стоят над рейкой, а не над всей строкой */
.week__hours {
  display: flex;
  justify-content: space-between;
  margin: 32px 0 0;
  padding: 0 116px 0 264px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  color: rgba(var(--on-dark), .45);
}

.week__rows { margin: 0; padding: 0; list-style: none; }

.wrow {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 92px;
  column-gap: 24px;
  align-items: center;
  min-height: 75px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

/* строка канала, который сейчас в эфире */
.wrow.is-live { background: rgba(255, 194, 14, .05); }

.wrow__head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
}

.wrow__freq {
  font-family: var(--f-num);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}

.wrow__name {
  font-family: var(--f-display);
  font-size: clamp(15px, .89vw, 17px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.wrow__listeners {
  flex: 1 0 100%;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.wrow__listeners b { font-weight: 400; }

.wrow.is-live .wrow__freq,
.wrow.is-live .wrow__name,
.wrow.is-live .wrow__listeners { color: var(--accent); }

.wrow__total {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(var(--on-dark), .45);
}

.wrow.is-live .wrow__total { color: var(--accent); }

/* рейка суток: тонкая линия во всю ширину, поверх неё блоки передач */
.wrow__rail {
  position: relative;
  display: block;
  height: 40px;
}

/* сетка суток: тонкие вертикальные линии каждые три часа */
.wrow__rail {
  background-image: repeating-linear-gradient(90deg,
      rgba(var(--on-dark), .1) 0 1px,
      rgba(var(--on-dark), 0) 1px 12.5%);
}

/* линия суток проходит по середине блоков, а не над ними */
.wrow__rail::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(var(--on-dark), .12);
}

/* Блок передачи. Длительность стоит внутри у левого края. Название тоже
   внутри, если помещается; для узкого блока оно выезжает наружу — влево, а
   если там нет места, вправо. Куда именно — считает скрипт по факту ширины. */
.wblock {
  position: absolute;
  top: 50%;
  left: calc(var(--from) / 24 * 100%);
  transform: translateY(-50%);
  /* в эталоне блок шире своего часа на 16px — на ширину внутренних полей */
  width: calc(var(--span) / 24 * 100% + 16px);
  height: 30px;
  border: 1px solid rgba(var(--on-dark), .16);
  background: rgba(var(--on-dark), .1);
}

.wblock b,
.wblock span {
  position: absolute;
  top: 50%;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.wblock b {
  left: 8px;
  color: rgba(var(--on-dark), .45);
}

.wblock span {
  left: 8px;
  /* до расчёта подпись не показывается: иначе на первом кадре она лежит
     внутри блока и налезает на точку с длительностью */
  visibility: hidden;
  color: rgba(var(--on-dark), .7);
}

.wblock.is-inside span,
.wblock.is-outside span { visibility: visible; }

/* без скрипта подписи всё равно видны — просто внутри блоков */
.no-js .wblock span { visibility: visible; }

/* длительность видна всегда, имя встаёт после неё */

/* название снаружи — оно тусклее */
.wblock.is-outside span { color: rgba(var(--on-dark), .6); }

/* эфир сейчас: жёлтая заливка, текст внутри всегда тёмный */
.wblock.is-live {
  border-color: var(--accent);
  background: var(--accent);
}

/* пульсирующая точка. На жёлтом она малиновая: чёрная слилась бы с текстом */
.wdot {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-magenta);
  transform: translateY(-50%);
  animation: wdot-pulse 1.6s ease-in-out infinite;
}

.wblock.is-live b { left: 26px; }

@keyframes wdot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.is-tuner-quiet .wdot { animation-play-state: paused; }

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

.wblock.is-live b { color: var(--on-accent); }
.wblock.is-live.is-inside span { color: var(--on-accent); }

/* метка текущего часа: 22:36 от суток */
.wnow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(22.6 / 24 * 100%);
  width: 1px;
  background: var(--accent);
}

/* точка на верхнем конце иглы */
.wnow::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.week__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  margin: 0;
  padding: 22px 0 30px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.week__now {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--accent);
}

.week__all {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
}

.week__all:hover { text-decoration: underline; }

/* =============================================================================
   27. STATIONS — КАК ЕЩЁ СЛУШАТЬ
   Коробка делится вертикальной линией: слева список форматов, справа адрес
   потока с кнопкой и характеристики. Ниже — четыре способа в ряд.
   ============================================================================= */
.stream {
  padding: 0 var(--gutter);
  background: var(--card);
}

.stream__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}

.stream__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 2.92vw, 56px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.stream__up {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- коробка потока: две колонки 681 / 1797 при 2480 контента --- */
.stream__box {
  display: grid;
  grid-template-columns: minmax(0, 681fr) minmax(0, 1797fr);
  margin-top: 32px;
  border: 1px solid rgba(var(--on-dark), .14);
}

.stream__formats { padding: 22px 24px; }

.stream__link {
  padding: 22px 26px;
  border-left: 1px solid rgba(var(--on-dark), .14);
}

.stream__label {
  margin: 0 0 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.stream__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* формат — строка во всю ширину колонки: имя слева, значение справа */
.fmt {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(var(--on-dark), .14);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.fmt b { font-weight: 400; color: rgba(var(--on-dark), .45); }
.fmt:hover { border-color: var(--accent); color: var(--accent); }

/* выбранный формат — тёмная плашка */
.fmt.is-active {
  border-color: rgba(var(--on-dark), .3);
  background: #000;
  color: var(--ink);
}

.fmt.is-active b { color: rgba(var(--on-dark), .55); }

.stream__row {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 0;
}

.stream__row code {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: clamp(15px, 1.04vw, 20px);
  font-weight: 400;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream__copy {
  flex: none;
  padding: 12px 18px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: #000;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

/* по правилу жёлтого: на заливке текст и значок тёмные */
.stream__copy:hover,
.stream__copy.is-done {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* характеристики: подпись сверху, значение под ней */
.stream__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 62px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--on-dark), .12);
}

.fact { display: grid; gap: 8px; }

.fact b {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.fact > span {
  font-family: var(--f-mono);
  font-size: clamp(13px, .83vw, 16px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.fact--accent > span { color: var(--accent); }

/* --- четыре способа слушать --- */
.stream__ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 26px 0 0;
  padding: 0;
  /* верхняя линия блока белая и толще остальных, по бокам блок замкнут */
  border-top: 2px solid var(--ink);
  border-right: 1px solid rgba(var(--on-dark), .14);
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  border-left: 1px solid rgba(var(--on-dark), .14);
  list-style: none;
}

.way {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 26px 28px;
}

.way + .way { border-left: 1px solid rgba(var(--on-dark), .14); }

.way__num,
.way__link {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.way__num { color: rgba(var(--on-dark), .35); }

.way__name {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.way__text {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(var(--on-dark), .62);
}

.way__link {
  color: var(--accent);
  text-decoration: none;
}

.way__link:hover { text-decoration: underline; }

/* первая карточка выделена жёлтым */
.way.is-first .way__num,
.way.is-first .way__name { color: var(--accent); }

.stream__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  margin: 0;
  padding: 20px 0 30px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.stream__all {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
}

.stream__all:hover { text-decoration: underline; }

/* =============================================================================
   28. STATIONS — ЗАЯВКИ И СТУДИЙНЫЙ ЧАТ
   Слева форма с подписями над полями и чёрной кнопкой, справа живая лента
   с бейджами типа сообщения и строкой чата внизу. Колонки делит линия.
   ============================================================================= */
.rq {
  padding: 0 var(--gutter) 30px;
  background: var(--paper);
}

/* бегущая строка с эквалайзером у левого края */
.rq__ticker {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.rq__tickwindow {
  min-width: 0;
  overflow: hidden;
}

.rq__ticklist {
  display: flex;
  gap: 46px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.rq__ticklist > span:first-child { color: rgba(var(--on-dark), .35); }

.rq__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  gap: 60px;
  margin-top: 34px;
}

/* колонки делит вертикальная линия */
.rq__form { padding-right: 60px; border-right: 1px solid rgba(var(--on-dark), .16); }

.rq__feed {
  display: flex;
  flex-direction: column;
}

/* --- форма --- */
.rq__title {
  display: grid;
  margin: 0 0 34px;
}

.rq__title em {
  font-family: var(--f-serif);
  font-size: clamp(24px, 2.19vw, 42px);
  font-style: italic;
  line-height: 1;
  color: rgba(var(--on-dark), .78);
}

.rq__title b {
  margin-top: 2px;
  font-family: var(--f-display);
  font-size: clamp(38px, 3.44vw, 88px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.rqfield { margin: 0 0 26px; }

.rqfield__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.rqfield__input {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .35);
  background: none;
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.rqfield__input::placeholder { color: rgba(var(--on-dark), .55); }
.rqfield__input:focus { border-bottom-color: var(--accent); outline: none; }

.rq__pair {
  display: grid;
  grid-template-columns: 186px 186px;
  gap: 20px;
}

.rq__pair .rqfield__input { font-size: 17px; }

.rq__sendrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  margin: 12px 0 0;
}

/* кнопка тёмная, не жёлтая */
.rq__send {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border: 0;
  background: #000;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

/* по правилу жёлтого: на заливке текст и стрелка всегда тёмные */
.rq__send:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.rq__note {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

/* --- живая лента --- */
.rq__feedhead {
  display: flex;
  gap: 18px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.rq__online { color: var(--accent); }

.rq__feedrows {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feedrow {
  display: flex;
  flex: 1;
  gap: 18px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .12);
}

.feedrow__time {
  flex: none;
  width: 44px;
  padding-top: 2px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  color: rgba(var(--on-dark), .45);
}

/* бейдж типа сообщения */
.feedrow__kind {
  flex: none;
  padding: 5px 9px;
  background: rgba(var(--on-dark), .12);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
}

/* очередь — жёлтый бейдж с тёмным текстом; студия — чёрный */
.feedrow--queue .feedrow__kind { background: var(--accent); color: var(--on-accent); }
.feedrow--studio .feedrow__kind { background: #000; color: rgba(var(--on-dark), .7); }

.feedrow__body { min-width: 0; }

.feedrow__text {
  display: block;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(var(--on-dark), .85);
}

/* заявки и сыгранное набраны плотнее — это названия треков */
.feedrow--queue .feedrow__text,
.feedrow--played .feedrow__text { font-size: 15px; font-weight: 600; color: var(--ink); }

.feedrow__who {
  display: block;
  margin-top: 7px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

/* строка чата внизу ленты */
.rq__say {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 22px 0 0;
}

.rq__sayinput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .35);
  background: none;
  font-family: var(--f-body);
  font-size: clamp(15px, .94vw, 18px);
  font-weight: 400;
  color: var(--ink);
}

.rq__sayinput::placeholder { color: rgba(var(--on-dark), .5); }
.rq__sayinput:focus { border-bottom-color: var(--accent); outline: none; }

.rq__saysend {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  font-family: var(--f-mono);
  font-size: 22px;
  color: var(--ink);
  cursor: pointer;
  place-items: center;
  transition: border-color .2s ease, color .2s ease;
}

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

/* =============================================================================
   29. ПОДКАСТЫ — КАКОЙ ВЫПУСК ЗВУЧИТ
   У играющего выпуска волна оживает, а его кнопка становится жёлтой паузой:
   видно, какой именно из списка идёт.
   ============================================================================= */

/* кнопка-пауза у звучащего выпуска — жёлтая */
.episode__play[aria-pressed="true"] { color: var(--accent); }

/* волна звучащего выпуска: полоски перебирают высоту */
.episode.is-playing .episode__wave i {
  background: var(--accent);
  transform-origin: center;
  animation: episode-wave 1.1s ease-in-out infinite alternate;
}

.episode.is-playing .episode__wave i:nth-child(3n)   { animation-delay: .12s; animation-duration: .9s; }
.episode.is-playing .episode__wave i:nth-child(3n+1) { animation-delay: .26s; animation-duration: 1.3s; }
.episode.is-playing .episode__wave i:nth-child(5n)   { animation-delay: .4s;  animation-duration: 1.5s; }

@keyframes episode-wave {
  from { transform: scaleY(.35); }
  to   { transform: scaleY(1); }
}

/* название и номер звучащего выпуска тоже подсвечиваются */
.episode.is-playing .episode__num,
.episode.is-playing .episode__title { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .episode.is-playing .episode__wave i { animation: none; }
}

/* стрелки «предыдущий» и «следующий» стоят по бокам от главной кнопки */
.step-btn {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(var(--on), .22);
  border-radius: 50%;
  background: none;
  color: rgba(var(--on), .6);
  cursor: pointer;
  place-items: center;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.step-btn svg { width: 11px; height: 13px; }

.step-btn:hover,
.step-btn:focus-visible { border-color: var(--accent); color: var(--accent); }

.step-btn[disabled] { opacity: .35; cursor: default; }
.step-btn[disabled]:hover { border-color: rgba(var(--on), .22); color: rgba(var(--on), .6); }

/* карточка свежего выпуска, пока он звучит */
.sheet.is-playing .sheet__num,
.sheet.is-playing .sheet__title { color: var(--accent); }

.sheet__cta-label { min-width: 12ch; }

/* сохранённый трек: сердечко заливается жёлтым */
.round-btn--ghost[aria-pressed="true"],
.tool[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* Карточка канала, который сейчас звучит: значок становится паузой.
   Заливка у активной карточки жёлтая, поэтому значок тёмный — правило жёлтого:
   на жёлтом всё чёрное, белое на нём не читается. */
.channel.is-playing .channel__play {
  border-color: var(--accent);
  color: var(--on-accent);
}

.channel.is-playing .channel__play::before {
  width: 3px;
  height: 11px;
  border: 0;
  background: currentcolor;
  box-shadow: 6px 0 0 currentcolor;
  transform: translateX(-3px);
}

/* ===================================================================
   30. ПРЕЛОАДЕР
   Слово AVAVA стоит контуром, сплошную заливку открывает полоса
   .preloader__fill — её ширину задаёт скрипт через --pl.
   =================================================================== */

.preloader {
  --pl-w: min(320px, 48vw);
  --pl: 0%;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--hero-bg);
  transition: opacity .55s ease, visibility .55s ease;
}

.preloader[hidden] { display: none; }
.preloader.is-done { visibility: hidden; opacity: 0; }

.preloader__mark {
  position: relative;
  width: var(--pl-w);
}

.preloader__mark svg {
  display: block;
  width: var(--pl-w);
  height: auto;
}

/* контур: заливки нет, видно только линию буквы */
.preloader__word {
  fill: none;
  stroke: #FFC20E;
  stroke-width: 1.1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* подпись остаётся как в логотипе */
.preloader__sub { fill: rgba(var(--on-dark), .78); }

/* сплошное слово открывается слева направо: окошко режет рисунок,
   а не сжимает его — потому у рисунка снят общий предел max-width */
.preloader__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--pl);
  overflow: hidden;
  transition: width .5s cubic-bezier(.33, 0, .2, 1);
}

.preloader__fill svg {
  max-width: none;
  width: var(--pl-w);
}

.preloader__fill path { fill: #FFC20E; }

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

/* ===================================================================
   31. STREAMING ARCHIVE
   =================================================================== */

/* --- строка признаков под заголовком интро --- */
/* строка стоит рядом с курсивом и переносится сама, когда экран узкий */
.intro__meta {
  display: flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(var(--on-dark), .6);
}

/* пункты разделяет квадратная точка, а не запятая */
.intro__meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 14px;
  vertical-align: middle;
  background: rgba(var(--on-dark), .28);
}

.intro__meta-accent { color: var(--accent); }

/* --- 31.1 поиск по архиву --- */
.arsearch {
  padding: 60px var(--gutter) 0;
  background: var(--card);
}

/* служебная строка над поиском */
.arsearch__line {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  font-size: 12px;
  color: rgba(var(--on-dark), .5);
}

.arsearch__line .meta { font-size: 12px; line-height: normal; }
.arsearch__wide { letter-spacing: .28em; }

.arsearch__last {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-left: auto;
}

.arsearch__last .meta { color: var(--accent); }

.arsearch__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: avpulse 2.4s ease-in-out infinite;
}

/* ряд: поле, четыре фильтра, кнопка */
.arsearch__row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-end;
  padding: 26px 0 20px;
}

.arsearch__field {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.arsearch__label {
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.arsearch__box {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--ink);
}

.arsearch__glyph {
  font-family: var(--f-mono);
  font-size: 25px;
  color: rgba(var(--on-dark), .45);
}

.arsearch__input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .4);
  background: none;
  font-family: var(--f-body);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}

.arsearch__input::placeholder { color: rgba(var(--on-dark), .45); }
.arsearch__input:focus { outline: 0; border-bottom-color: var(--accent); }

.arsearch__matches {
  flex: none;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--accent);
}

/* четыре фильтра */
.arsearch__drops {
  display: flex;
  flex: 2 1 420px;
  gap: 20px;
  min-width: 0;
}

.ardrop {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.ardrop__top {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}

.ardrop__top .meta {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ardrop__top .ardrop__num {
  margin-left: auto;
  letter-spacing: .08em;
  color: rgba(var(--on-dark), .4);
}

.is-on .ardrop__top .ardrop__num { color: var(--accent); }

.ardrop__val {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .28);
  background: none;
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: .05em;
  line-height: normal;
  text-align: left;
  color: rgba(var(--on-dark), .75);
  cursor: pointer;
}

.ardrop__val span {
  font-size: 20px;
  letter-spacing: normal;
  line-height: 1;
  color: rgba(var(--on-dark), .7);
}

.ardrop__val:hover span,
.ardrop__val:focus-visible span { color: var(--accent); }

.is-on .ardrop__val {
  border-bottom-color: rgba(255, 194, 14, .55);
  color: var(--accent);
}

.ardrop__val:hover,
.ardrop__val:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* полоска заполнения под значением */
.ardrop__bar {
  display: block;
  height: 2px;
  background: rgba(var(--on-dark), .1);
}

.ardrop__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .28);
}

.is-on .ardrop__bar i { background: var(--accent); }

/* кнопка поиска */
.arsearch__go {
  display: flex;
  flex: none;
  gap: 12px;
  align-items: center;
  padding: 14px 24px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.arsearch__go:hover,
.arsearch__go:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

/* подсказки */
.arsearch__try {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding: 0 0 18px;
}

.arsearch__try .meta {
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(var(--on-dark), .45);
}

.arsearch__chip {
  padding: 5px 10px;
  line-height: normal;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.arsearch__chip:hover,
.arsearch__chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* строка действующих фильтров */
.arsearch__active {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.arsearch__active > .meta {
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(var(--on-dark), .45);
}

.arsearch__pill {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  line-height: normal;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.arsearch__x {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.arsearch__x:hover,
.arsearch__x:focus-visible { color: var(--accent); }

.arsearch__clear {
  padding: 0;
  border: 0;
  background: none;
  line-height: normal;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

.arsearch__clear:hover,
.arsearch__clear:focus-visible { color: var(--accent); }

.arsearch__found {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-left: auto;
}

.arsearch__num {
  font-family: var(--f-num);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.arsearch__found .meta {
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(var(--on-dark), .55);
}

/* переключатель вида */
.arsearch__view {
  display: flex;
  flex: none;
  border: 1px solid rgba(var(--on-dark), .28);
}

.arsearch__view button {
  padding: 8px 13px;
  line-height: normal;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.arsearch__view button.is-on {
  background: var(--shell);
  color: #fff;
}

/* --- 31.2 последняя запись --- */
.arlatest {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.arlatest__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.arlatest__line .meta { font-size: 12px; line-height: normal; }
.arlatest__added { margin-left: auto; }

.arlatest__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 44px);
  align-items: start;
  margin-top: 28px;
}

.arlatest__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* кадр записи: диагональная штриховка вместо снимка,
   покупатель кладёт свой кадр фоном через archive-latest.json */
.arshot {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 9px,
      rgba(var(--on-dark), .16) 9px 18px);
}

.arshot__tag,
.arshot__time {
  position: absolute;
  top: 14px;
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  text-transform: uppercase;
}

.arshot__tag {
  left: 14px;
  background: var(--accent);
  letter-spacing: .16em;
  color: var(--on-accent);
}

.arshot__time {
  right: 14px;
  background: var(--shell);
  letter-spacing: .14em;
  color: #fff;
}

.arshot__cam {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.arshot__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--shell);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.arshot__play:hover,
.arshot__play:focus-visible { background: var(--accent); }

/* треугольник наследует цвет, поэтому на жёлтом он тёмный */
.arshot__glyph {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid currentcolor;
  color: #fff;
}

.arshot__play:hover .arshot__glyph,
.arshot__play:focus-visible .arshot__glyph { color: var(--on-accent); }

/* значок паузы, когда запись играет */
.arshot__play[aria-pressed="true"] .arshot__glyph {
  width: 14px;
  height: 18px;
  margin-left: 0;
  border: 0;
  background:
    linear-gradient(currentcolor 0 0) 0 0 / 4px 100% no-repeat,
    linear-gradient(currentcolor 0 0) 100% 0 / 4px 100% no-repeat;
}

.arlatest__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

.arlatest__act {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

.arlatest__act:hover,
.arlatest__act:focus-visible { color: var(--accent); }

.arlatest__save { margin-left: auto; }
.arlatest__save[aria-pressed="true"] { color: var(--accent); }

.arlatest__body {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.3vw, 17px);
}

.arlatest__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.arlatest__with {
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.1vw, 28px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .75);
}

.arlatest__text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}

.arlatest__text p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--on-dark), .7);
}

/* четыре показателя между линиями */
.arfigs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  padding: 14px 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.arfig {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.arfig__num {
  font-family: var(--f-num);
  font-size: clamp(15px, 1.7vw, 24px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.arfig .meta {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.arfig.is-on .arfig__num { color: var(--accent); }

/* что играло */
.artracks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.artracks__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.artrack {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.artrack .meta {
  flex: none;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .45);
}

.artrack__name {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(var(--on-dark), .82);
}

.artracks__all {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.artracks__all:hover,
.artracks__all:focus-visible { text-decoration: underline; }

/* --- главы записи --- */
.archapters {
  margin-top: clamp(24px, 2.6vw, 36px);
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 2px solid var(--ink);
}

.archapters__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}

.archapters__head .meta { font-size: 12px; line-height: normal; }
.archapters__head .archapters__title { letter-spacing: .28em; line-height: 1; color: rgba(var(--on-dark), .5); }
.archapters__hint { letter-spacing: .14em; color: rgba(var(--on-dark), .45); }

.archapters__at {
  margin-left: auto;
  letter-spacing: .14em;
  color: var(--accent);
}

/* волна: столбики строит скрипт, метка стоит на 18% записи */
.arwave {
  position: relative;
  display: flex;
  gap: 2px;
  height: 64px;
  align-items: flex-end;
  margin-top: 12px;
}

.arwave i {
  flex: 1;
  background: rgba(var(--on-dark), .2);
}

.arwave i.is-past { background: var(--accent); }

.arwave__cursor {
  position: absolute;
  top: -6px;
  left: 18%;
  width: 2px;
  height: 70px;
  background: var(--accent);
}

.arwave__cursor::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: translateX(-50%);
}

.archapters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  margin-top: 12px;
}

.archap {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid rgba(var(--on-dark), .2);
  background: none;
  text-align: left;
  cursor: pointer;
}

.archap:hover,
.archap:focus-visible { border-top-color: var(--accent); }

.archap__at {
  flex: none;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.archap__name {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.archap__go {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .35);
}

.archap.is-on { border-top-color: var(--accent); }
.archap.is-on .archap__at,
.archap.is-on .archap__name { color: var(--accent); }

/* --- 31.3 карта архива --- */
.armap {
  padding: 0 var(--gutter);
  background: var(--card);
}

.armap__head {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
}

.armap__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 62px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.armap__legend {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 0 auto;
}

.armap__legend .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* пять ступеней плотности: та же шкала, что у клеток карты */
.armap__swatch {
  width: 22px;
  height: 10px;
  background: color-mix(in srgb, var(--accent) var(--level, 0%), transparent);
}

.armap__swatch[data-level="0"] { --level: 0%; }
.armap__swatch[data-level="1"] { --level: 18%; }
.armap__swatch[data-level="2"] { --level: 38%; }
.armap__swatch[data-level="3"] { --level: 62%; }
.armap__swatch[data-level="4"] { --level: 100%; }

/* строка = год: подпись, двенадцать клеток, часы */
.armap__months,
.armap__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 74px;
  gap: clamp(10px, 1.2vw, 18px);
  align-items: center;
}

.armap__months { margin-top: clamp(22px, 2.4vw, 32px); }

.armap__cells {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
}

.armap__months .armap__cells span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-align: center;
  color: rgba(var(--on-dark), .45);
}

.armap__hours-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-align: right;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
}

.armap__years {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

.armap__year {
  font-family: var(--f-num);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: rgba(var(--on-dark), .75);
}

.armap__hours {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .45);
}

.armap__row.is-now .armap__year,
.armap__row.is-now .armap__hours { color: var(--accent); }

/* клетка месяца: заливка тем плотнее, чем больше записей */
.armap__cell {
  display: grid;
  /* соотношение считается по внутренней части клетки, как в эталоне:
     рамка ложится сверх него, поэтому строка выходит на 1px выше */
  box-sizing: content-box;
  aspect-ratio: 1.9;
  place-items: center;
  border: 1px solid rgba(var(--on-dark), .1);
  background: color-mix(in srgb, var(--accent) var(--level, 0%), transparent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .02em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.armap__cell[data-level="4"] { border-color: var(--accent); }

/* на плотной жёлтой клетке число всегда тёмное — белое не читается */
.armap__cell[data-level="3"],
.armap__cell[data-level="4"] { color: var(--on-accent); }
.armap__cell:hover { border-color: var(--accent); }

/* --- календарь месяца --- */
.armonth {
  margin-top: clamp(24px, 2.6vw, 36px);
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid rgba(var(--on-dark), .18);
}

.armonth__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}

.armonth__head .meta { font-size: 12px; line-height: normal; }
.armonth__head .armonth__title { letter-spacing: .28em; line-height: 1; color: rgba(var(--on-dark), .5); }
.armonth__note { letter-spacing: .14em; color: rgba(var(--on-dark), .45); }

.armonth__picked {
  margin-left: auto;
  letter-spacing: .14em;
  color: var(--accent);
}

.armonth__days {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 2px;
  height: 56px;
  margin-top: 14px;
}

.armonth__day {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.armonth__bar {
  height: var(--h, 8px);
  background: color-mix(in srgb, var(--accent) var(--level, 6%), transparent);
}

.armonth__num {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  text-align: center;
  color: rgba(var(--on-dark), .4);
}

.armonth__day.is-picked .armonth__num { color: var(--accent); }

/* эфиры выбранного дня */
.armonth__list {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.arday {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 150px 88px 30px;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
  background: none;
  text-align: left;
  cursor: pointer;
}

.arday:hover,
.arday:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.arday__at {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .55);
}

.arday__name {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.arday__host {
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.3;
  color: rgba(var(--on-dark), .75);
}

.arday__len {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.arday__go {
  font-family: var(--f-mono);
  font-size: 20px;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .55);
}

/* эфир, который сейчас выбран */
.arday.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.arday.is-on .arday__at,
.arday.is-on .arday__name,
.arday.is-on .arday__go { color: var(--accent); }

/* --- 31.4 все записи --- */
.arlist {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.arlist__head {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
}

.arlist__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 58px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.arlist__totals {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 32px);
  align-items: flex-end;
  margin-left: auto;
}

.artotal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

.artotal__num {
  font-family: var(--f-num);
  font-size: clamp(17px, 1.8vw, 26px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.artotal .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.artotal.is-on .artotal__num { color: var(--accent); }

.arlist__csv {
  padding: 9px 13px;
  border: 1px solid rgba(var(--on-dark), .28);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.arlist__csv:hover,
.arlist__csv:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* шапка и строки таблицы делят одну сетку — колонки не разъезжаются */
.arhead,
.arrow {
  display: grid;
  grid-template-columns:
    3px 78px 62px minmax(0, 1.45fr) minmax(0, .95fr) 108px 92px 62px 92px 40px;
  gap: 12px;
  align-items: center;
}

.arhead {
  margin-top: 26px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}

.arhead__cell {
  display: flex;
  gap: 5px;
  align-items: center;
}

.arhead__cell--right { justify-content: flex-end; }

.arhead__cell .meta {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.arhead__cell.is-sorted .meta,
.arhead__cell.is-sorted .arhead__dir { color: var(--accent); }

.arhead__dir {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.arhead__cell:hover .meta,
.arhead__cell:hover .arhead__dir { color: var(--accent); }

.arrow {
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.arrow:hover { background: rgba(var(--on-dark), .1); }
.arrow.is-on { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* цветная полоска слева — метка канала */
.arrow__bar {
  align-self: stretch;
  background: var(--ch, rgba(var(--on-dark), .35));
}

.arrow[data-ch="night"]   { --ch: var(--accent); }
.arrow[data-ch="deep"]    { --ch: rgba(var(--on-dark), .35); }
.arrow[data-ch="jazz"]    { --ch: rgba(var(--on-dark), .55); }
.arrow[data-ch="soul"]    { --ch: rgba(var(--on-dark), .28); }
.arrow[data-ch="classic"] { --ch: rgba(var(--on-dark), .45); }
.arrow[data-ch="talk"]    { --ch: rgba(var(--on-dark), .2); }

.arrow__date,
.arrow__time,
.arrow__len {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
}

.arrow__time,
.arrow__len { text-transform: none; }

.arrow__date { color: rgba(var(--on-dark), .55); }
.arrow__time { color: rgba(var(--on-dark), .5); }

.arrow__len {
  text-align: right;
  color: rgba(var(--on-dark), .6);
}

.arrow.is-on .arrow__date { color: var(--accent); }

.arrow__show {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.arrow__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.arrow.is-on .arrow__name { color: var(--accent); }

/* значок новой записи: тёмный текст на жёлтом */
.arrow__new {
  flex: none;
  padding: 3px 6px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.arrow__host {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .78);
}

.arrow__ch {
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .6);
}

/* столбики: рисунок записи в одну строку, строит скрипт */
.arshape {
  display: flex;
  gap: 2px;
  height: 20px;
  align-items: flex-end;
}

.arshape i {
  flex: 1;
  background: rgba(var(--on-dark), .28);
}

.arrow.is-on .arshape i { background: var(--accent); }

.arrow__plays {
  display: flex;
  gap: 8px;
  align-items: center;
}

.arrow__meter {
  flex: 1;
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.arrow__meter i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.arrow.is-on .arrow__meter i { background: var(--accent); }

.arrow__num {
  flex: none;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .55);
}

/* кнопка воспроизведения строки */
.arrow__play {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.arrow__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.arrow__play:hover,
.arrow__play:focus-visible,
.arrow.is-on .arrow__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* на жёлтой кнопке значок всегда тёмный */
.arrow__play:hover .arrow__glyph,
.arrow__play:focus-visible .arrow__glyph,
.arrow.is-on .arrow__glyph { color: var(--on-accent); }

/* Пауза — знак «❚❚» того же набора, что и «▶». Подставляет скрипт. */
.arrow__play[aria-pressed="true"] .arrow__glyph { color: var(--on-accent); }

/* подвал таблицы */
.arlist__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: clamp(16px, 1.8vw, 24px);
}

.arlist__more {
  display: flex;
  flex: none;
  gap: 12px;
  align-items: center;
  padding: 14px 22px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.arlist__more:hover,
.arlist__more:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.arlist__progress {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.arlist__track {
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.arlist__track i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.arlist__count {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.arlist__pages {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  gap: 5px;
}

.arlist__page {
  min-width: 30px;
  padding: 8px 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-decoration: none;
  color: var(--ink);
}

.arlist__page:hover,
.arlist__page:focus-visible { color: var(--accent); }

/* --- 31.5 забрать с собой --- */
.ardl {
  padding: 0 var(--gutter) 60px;
  background: var(--card);
}

.ardl__slip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.ardl__slip .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.ardl__slip .ardl__what { color: var(--accent); }
.ardl__files { margin-left: auto; }

.ardl__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  margin: 0;
  padding: 36px 0 22px;
}

.ardl__h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.ardl__note {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.8vw, 26px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .7);
}

/* три колонки на общей верхней линии */
.ardl__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.ardl__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) clamp(26px, 3vw, 40px);
  border-right: 1px solid rgba(var(--on-dark), .16);
}

.ardl__col--last {
  padding-right: 0;
  border-right: 0;
}

.ardl__num {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* строка формата: имя слева, вес справа */
.arfile {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  background: none;
  text-align: left;
  cursor: pointer;
}

.arfile__name {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .75);
}

.arfile__size {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.arfile.is-on {
  border-bottom-color: var(--accent);
}

.arfile.is-on .arfile__name { color: var(--accent); }

.arfile:hover .arfile__name,
.arfile:focus-visible .arfile__name { color: var(--accent); }

/* адрес файла переносится по любому символу — он длинный */
.ardl__url {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1.5;
  word-break: break-all;
  color: rgba(var(--on-dark), .65);
}

.ardl__url--feed { color: rgba(var(--on-dark), .75); }

.ardl__go {
  display: flex;
  gap: 12px;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 14px 20px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.ardl__go:hover,
.ardl__go:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

/* строка приложения */
.arfeed {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  text-decoration: none;
}

.arfeed__name {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .75);
}

.arfeed__go {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .4);
}

.arfeed:hover .arfeed__name,
.arfeed:focus-visible .arfeed__name,
.arfeed:hover .arfeed__go { color: var(--accent); }

.ardl__when {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

/* правило: номер и текст */
.arrule {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.arrule__num {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .45);
}

.arrule.is-on .arrule__num { color: var(--accent); }

.arrule__text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .75);
}

.ardl__licence {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.ardl__licence:hover,
.ardl__licence:focus-visible { text-decoration: underline; }

/* на узком экране колонки встают друг под друга и разводить нечего */
@media (max-width: 900px) {
  .arlatest__grid { grid-template-columns: minmax(0, 1fr); }
  .ardl__cols { grid-template-columns: minmax(0, 1fr); }
  .ardl__col { border-right: 0; border-bottom: 1px solid rgba(var(--on-dark), .16); }
  .ardl__col--last { border-bottom: 0; padding-right: clamp(18px, 2vw, 30px); }
}

/* На страницах архива и подкастов кегль не опускается ниже 12px.
   Шкала FM общая с About, поэтому поднимаем её только здесь. */
.page--min12 .fmscale__labels span,
.page--min12 .fmscale__today { font-size: 12px; }

.page--min12 .fmscale__labels { height: 14px; }

/* --- 31.6 поиск: выпадающие списки и пустой ответ --- */
.ardrop { position: relative; }

.ardrop__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border: 1px solid var(--dd-rule);
  border-radius: 12px;
  background: var(--dd-bg);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .35);
}

.ardrop__panel[hidden] { display: none; }

.ardrop__panel button {
  padding: 9px 18px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .05em;
  line-height: normal;
  text-align: left;
  white-space: nowrap;
  color: var(--dd-ink);
  cursor: pointer;
}

.ardrop__panel button:hover,
.ardrop__panel button:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

/* когда ничего не нашлось */
.arlist__empty {
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.arlist__empty[hidden] { display: none; }

/* вид «календарь»: записи идут карточками по дням, а не строкой таблицы */
.arlist.is-calendar .arhead { display: none; }

.arlist.is-calendar .arlist__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.arlist.is-calendar .arrow {
  grid-template-columns: 3px minmax(0, 1fr) 34px;
  gap: 12px 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(var(--on-dark), .14);
}

.arlist.is-calendar .arrow__bar { grid-row: 1 / 4; }
.arlist.is-calendar .arrow__play { grid-row: 1 / 4; align-self: center; }
.arlist.is-calendar .arrow__date { grid-column: 2; }
.arlist.is-calendar .arrow__time,
.arlist.is-calendar .arrow__len,
.arlist.is-calendar .arrow__ch,
.arlist.is-calendar .arshape,
.arlist.is-calendar .arrow__plays { display: none; }
.arlist.is-calendar .arrow__show { grid-column: 2; }
.arlist.is-calendar .arrow__host { grid-column: 2; }

/* --- 31.7 найденное прямо под поиском --- */
.arfound {
  padding: 22px 0 26px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.arfound[hidden] { display: none; }

.arfound__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  margin: 0 0 14px;
}

.arfound__head .meta { font-size: 12px; line-height: normal; }
.arfound__title { letter-spacing: .28em; color: rgba(var(--on-dark), .5); }
.arfound__note { letter-spacing: .14em; color: var(--accent); }

.arfound__all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--on-dark), .5);
}

.arfound__all:hover,
.arfound__all:focus-visible { color: var(--accent); }

.arfound__list {
  display: flex;
  flex-direction: column;
}

/* строка найденного: та же приборная сетка, что и в таблице ниже */
.arfound__row {
  display: grid;
  grid-template-columns: 3px 150px minmax(0, 1.6fr) minmax(0, 1fr) 140px 62px 34px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid rgba(var(--on-dark), .14);
  background: none;
  text-align: left;
  cursor: pointer;
}

.arfound__row:hover { background: rgba(var(--on-dark), .06); }

.arfound__bar {
  align-self: stretch;
  background: var(--ch, rgba(var(--on-dark), .35));
}

.arfound__row[data-ch="night"]   { --ch: var(--accent); }
.arfound__row[data-ch="deep"]    { --ch: rgba(var(--on-dark), .35); }
.arfound__row[data-ch="jazz"]    { --ch: rgba(var(--on-dark), .55); }
.arfound__row[data-ch="soul"]    { --ch: rgba(var(--on-dark), .28); }
.arfound__row[data-ch="classic"] { --ch: rgba(var(--on-dark), .45); }
.arfound__row[data-ch="talk"]    { --ch: rgba(var(--on-dark), .2); }

.arfound__at,
.arfound__ch,
.arfound__len {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
}

.arfound__at { color: rgba(var(--on-dark), .55); }
.arfound__ch {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .6);
}

.arfound__len {
  text-align: right;
  color: rgba(var(--on-dark), .6);
}

.arfound__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.arfound__host {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .78);
}

.arfound__play {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

/* на жёлтом кружке значок всегда тёмный */
.arfound__row:hover .arfound__play,
.arfound__row:focus-visible .arfound__play,
.arfound__row.is-live .arfound__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.arfound__row.is-live .arfound__name,
.arfound__row.is-live .arfound__at { color: var(--accent); }



.arfound__empty {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid rgba(var(--on-dark), .14);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

@media (max-width: 1100px) {
  .arfound__row { grid-template-columns: 3px 130px minmax(0, 1fr) 34px; }
  .arfound__host,
  .arfound__ch,
  .arfound__len { display: none; }
}

/* --- 31.8 запись в кадре секции --- */
/* Видео закрывает штриховку целиком; бейджи и подпись остаются поверх. */
.arshot__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--shell);
}

/* пока запись идёт, кнопка не закрывает картинку целиком */
.arshot.is-playing .arshot__play { background: rgba(10, 10, 11, .72); }

.arshot.is-playing .arshot__play:hover,
.arshot.is-playing .arshot__play:focus-visible { background: var(--accent); }

/* подписи поверх видео читаются на любом кадре */
.arshot__cam {
  padding: 4px 8px;
  background: rgba(10, 10, 11, .6);
}

/* Играющий эфир дня: знак «▸» меняется на «❚❚» того же набора и кегля,
   сам знак подставляет скрипт. */
/* знак «❚❚» рисуется крупнее стрелки при том же кегле — уменьшаем вдвое,
   а высоту строки держим прежней, чтобы строка не дёргалась */
.arday.is-live .arday__go {
  font-size: 10px;
  line-height: 26px;
  color: var(--accent);
}

.arday.is-live .arday__at,
.arday.is-live .arday__name { color: var(--accent); }

/* --- 31.9 играющая строка таблицы --- */
/* Столбики Shape шевелятся, пока запись играет. Каждый вступает со своей
   задержкой, поэтому волна бежит слева направо, а не пульсирует разом. */
.arshape i { transform-origin: bottom; }

.arrow.is-live .arshape i {
  animation: aveq 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* полоска прослушиваний у играющей строки тоже акцентная */
.arrow.is-live .arrow__meter i { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .arrow.is-live .arshape i { animation: none; }
}

/* пока запись играет, полоска идёт плавно, без рывков между сообщениями */
.arrow.is-live .arrow__meter i { transition: width .25s linear; }


/* ===================================================================
   32. PODCASTS
   =================================================================== */

/* --- 32.1 каталог серий --- */
.podser {
  padding: 60px var(--gutter) 0;
  background: var(--card);
}

.podser__head {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  margin-bottom: 26px;
}

.podser__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.podser__totals {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 28px);
  align-items: flex-end;
  margin-left: auto;
}

.podtotal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

.podtotal__num {
  font-family: var(--f-num);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.podtotal .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podtotal.is-on .podtotal__num { color: var(--accent); }

.podser__rss {
  padding: 9px 13px;
  border: 1px solid rgba(var(--on-dark), .28);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.podser__rss:hover,
.podser__rss:focus-visible { border-color: var(--accent); color: var(--accent); }

/* строка серии */
.podrow {
  display: grid;
  grid-template-columns: clamp(150px, 15.5vw, 232px) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: stretch;
  padding: clamp(16px, 2vw, 26px) 0;
  border-top: 2px solid var(--ink);
}

.podrow:hover { background: rgba(var(--on-dark), .1); }

.podrow.is-first {
  border-top-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* обложка тянется на высоту строки — размер кадра не задаём */
.podcover {
  position: relative;
  min-height: clamp(150px, 15.5vw, 232px);
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 8px,
      rgba(var(--on-dark), .16) 8px 16px);
}

.podcover__badge {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 5px 8px;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
}

/* у первой серии бейдж жёлтый — значит текст тёмный */
.is-first .podcover__badge {
  background: var(--accent);
  color: var(--on-accent);
}

.podcover__play {
  position: absolute;
  right: 11px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: rgba(10, 10, 11, .8);
  cursor: pointer;
}

.podcover__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .7);
}

.is-first .podcover__play {
  border-color: var(--accent);
  background: var(--accent);
}

.is-first .podcover__glyph,
.podcover__play:hover .podcover__glyph,
.podcover__play:focus-visible .podcover__glyph { color: var(--on-accent); }

.podcover__play:hover,
.podcover__play:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
}

/* середина строки */
.podmid {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.podmid__top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.podmid__name {
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.032em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.is-first .podmid__name { color: var(--accent); }

/* значок новой серии: точка на жёлтом — цвета подложки, не белая */
.podmid__new {
  display: flex;
  flex: none;
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.podmid__new i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card);
  animation: avpulse 1.6s ease-in-out infinite;
}

.podmid__host {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.8vw, 23px);
  font-style: italic;
  line-height: 1.15;
  color: rgba(var(--on-dark), .75);
}

.podmid__blurb {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .68);
}

.podfigs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.podfig {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

.podfig__num {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: normal;
  color: rgba(var(--on-dark), .75);
}

.podfig.is-on .podfig__num { color: var(--accent); }

.podfig .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* спарклайн: двенадцать полос, строит скрипт */
.podspark {
  display: flex;
  gap: 2px;
  height: 20px;
  align-items: flex-end;
  padding-top: 2px;
}

.podspark i {
  flex: 1;
  background: rgba(var(--on-dark), .28);
}

.is-first .podspark i { background: var(--accent); }

/* правая колонка: последние выпуски */
.podlist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding-left: clamp(12px, 1.4vw, 22px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.podlist__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.podlist__top .meta { font-size: 12px; line-height: normal; }
.podlist__label { letter-spacing: .2em; color: rgba(var(--on-dark), .5); }

.podlist__count {
  margin-left: auto;
  letter-spacing: .12em;
  color: rgba(var(--on-dark), .45);
}

.podep {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px 26px;
  gap: 11px;
  align-items: center;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  background: none;
  text-align: left;
  cursor: pointer;
}

.podep__no,
.podep__len {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.podep.is-on .podep__no { color: var(--accent); }
.podep__len { text-align: right; }

.podep__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.podep__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.podep__meta {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .45);
}

.podep__go {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .5);
}

.podep.is-on .podep__go { color: var(--accent); }

.podep:hover .podep__name,
.podep:focus-visible .podep__name { color: var(--accent); }

.podlist__all {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.podlist__all:hover,
.podlist__all:focus-visible { text-decoration: underline; }

@media (max-width: 1100px) {
  .podrow { grid-template-columns: minmax(0, 1fr); }
  .podlist { padding-left: 0; border-left: 0; }
}

/* --- 32.2 последний выпуск --- */
.podlast {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.podlast__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.podlast__line .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podlast__new {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-left: auto;
}

.podlast__new .meta { color: var(--accent); }

.podlast__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: avpulse 1.6s ease-in-out infinite;
}

.podlast__grid {
  display: grid;
  grid-template-columns: clamp(150px, 15.5vw, 232px) minmax(0, 1fr) clamp(200px, 22vw, 296px);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: stretch;
  padding: clamp(22px, 2.6vw, 36px) 0 clamp(18px, 2vw, 28px);
}

/* левая колонка: обложка тянется, показатели и кнопки под ней */
.podside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.podside__cover {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(160px, 20vw, 300px);
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 8px,
      rgba(var(--on-dark), .16) 8px 16px);
}

.podside__badge {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 5px 10px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.podside__where {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.podside__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.podside__label {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podside__val {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  color: rgba(var(--on-dark), .75);
}

.podside__val.is-ink { color: var(--ink); }
.podside__val.is-on { color: var(--accent); }

.podside__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.podside__act {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

.podside__act:hover,
.podside__act:focus-visible { color: var(--accent); }
.podside__act[aria-pressed="true"] { color: var(--accent); }

/* середина */
.podbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}



.podbody__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 46px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.042em;
  text-transform: uppercase;
  color: var(--ink);
}

.podbody__host {
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.1vw, 28px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .75);
}

.podbody__text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
}

.podbody__text p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(var(--on-dark), .7);
}

.podbody__text p:first-child { color: rgba(var(--on-dark), .75); }

/* выдержки писем */
.podletters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  padding: 20px 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.podletter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.podletter__from {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podletter.is-on .podletter__from { color: var(--accent); }

.podletter__text {
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.5vw, 19px);
  font-style: italic;
  line-height: 1.35;
  color: rgba(var(--on-dark), .75);
}

.podletter.is-on .podletter__text { color: rgba(var(--on-dark), .78); }

/* панель управления выпуском */
.podctl {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}

/* перемотка: площадка 40×40, текст по центру — как в эталоне */
.podctl__jump {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.podctl__jump,
.podctl__rate {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: normal;
  color: var(--ink);
  cursor: pointer;
}

.podctl__rate {
  padding: 10px 12px;
  letter-spacing: .1em;
}

.podctl__jump:hover,
.podctl__rate:hover,
.podctl__jump:focus-visible,
.podctl__rate:focus-visible { color: var(--accent); }

.podctl__play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .4);
  border-radius: 50%;
  background: var(--shell);
  cursor: pointer;
}

.podctl__glyph {
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: normal;
  color: var(--accent);
}

.podctl__play:hover,
.podctl__play:focus-visible,
.podctl__play[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.podctl__play:hover .podctl__glyph,
.podctl__play:focus-visible .podctl__glyph,
.podctl__play[aria-pressed="true"] .podctl__glyph { color: var(--on-accent); }

.podctl__vol {
  display: flex;
  gap: 10px;
  align-items: center;
}

.podctl__vol .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podctl__bar {
  width: 72px;
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.podctl__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

/* волна выпуска */
.podwave {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.podwave__bars {
  position: relative;
  display: flex;
  gap: 2px;
  height: 58px;
  align-items: flex-end;
}

.podwave__bars i {
  flex: 1;
  background: rgba(var(--on-dark), .2);
  transform-origin: bottom;
}

.podwave__bars i.is-past { background: var(--accent); }

.podwave__cursor {
  position: absolute;
  top: -6px;
  left: 11%;
  width: 2px;
  height: 64px;
  background: var(--accent);
}

.podwave__cursor::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: translateX(-50%);
}

.podwave__now {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.podwave__now .meta { font-size: 12px; line-height: normal; }
.podwave__at { letter-spacing: .08em; color: var(--accent); }
.podwave__name { letter-spacing: .12em; color: rgba(var(--on-dark), .5); }
.podwave__total { margin-left: auto; letter-spacing: .08em; color: rgba(var(--on-dark), .5); }

/* правая колонка: главы */
.podchaps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.podchaps__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.podchaps__top .meta { font-size: 12px; line-height: normal; }
.podchaps__label { letter-spacing: .28em; color: rgba(var(--on-dark), .5); }

.podchaps__count {
  margin-left: auto;
  letter-spacing: .12em;
  color: rgba(var(--on-dark), .45);
}

.podchap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  background: none;
  text-align: left;
  cursor: pointer;
}

.podchap__name {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.podchap__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.podchap__at,
.podchap__len {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
}

.podchap__at { color: rgba(var(--on-dark), .5); }
.podchap__len { margin-left: auto; color: rgba(var(--on-dark), .45); }

.podchap.is-on {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.podchap.is-on .podchap__name,
.podchap.is-on .podchap__at { color: var(--accent); }

.podchap:hover .podchap__name { color: var(--accent); }

.podchaps__quote {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--on-dark), .16);
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-style: italic;
  line-height: 1.3;
  color: rgba(var(--on-dark), .78);
}

.podchaps__all {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.podchaps__all:hover,
.podchaps__all:focus-visible { text-decoration: underline; }

/* подвал секции */
.podlast__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 2px solid var(--ink);
}

.podlast__in {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podchip {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.podchip:hover,
.podchip:focus-visible { color: var(--accent); }

.podprev {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  text-decoration: none;
}

.podprev__thumb {
  width: 40px;
  height: 40px;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 6px,
      rgba(var(--on-dark), .16) 6px 12px);
}

.podprev__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.podprev__label {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podprev__name {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.podprev__go {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: var(--accent);
}

.podprev:hover .podprev__name { color: var(--accent); }

@media (max-width: 1100px) {
  .podlast__grid { grid-template-columns: minmax(0, 1fr); }
  .podchaps { padding-left: 0; border-left: 0; }
  .podletters { grid-template-columns: minmax(0, 1fr); }
  .podbody__text { grid-template-columns: minmax(0, 1fr); }
}

/* обложка серии: картинка заполняет плитку, штриховка остаётся подложкой
   на случай, если покупатель не положил свою */
.podcover__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 32.3 все выпуски --- */
.podall {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.podall__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.podall__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.podall__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  margin-top: 24px;
}

.podall__find {
  display: flex;
  flex: 1 1 320px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}

.podall__glyph {
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.podall__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.podall__input::placeholder { color: rgba(var(--on-dark), .45); }
.podall__input:focus { outline: 0; }

.podall__found {
  flex: none;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

.podall__sort {
  display: flex;
  flex: none;
  border: 1px solid rgba(var(--on-dark), .28);
}

.podall__sort button {
  padding: 8px 13px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.podall__sort button.is-on {
  background: var(--shell);
  color: #fff;
}

.podall__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 17px 0 0;
}

.podall__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.podfilter {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 6px 11px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.podfilter__n { color: rgba(var(--on-dark), .45); }

.podfilter.is-on,
.podfilter:hover,
.podfilter:focus-visible { border-color: var(--accent); color: #fff; }

.podfilter.is-on .podfilter__n { color: var(--accent); }

/* таблица выпусков: шапка и строки на одной сетке */
.podhead,
.podline {
  display: grid;
  grid-template-columns:
    3px 54px 74px minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, .75fr) 58px 88px 40px;
  gap: 11px;
  align-items: center;
}

.podhead {
  margin-top: 20px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}

.podhead__cell {
  display: flex;
  gap: 5px;
  align-items: center;
}

.podhead__cell .meta,
.podhead__dir {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
}

.podhead__cell.is-sorted .meta,
.podhead__cell.is-sorted .podhead__dir { color: var(--accent); }
.podhead__cell:hover .meta { color: var(--accent); }

.podline {
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.podline:hover { background: rgba(var(--on-dark), .1); }
.podline.is-on { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.podline__bar {
  align-self: stretch;
  background: rgba(var(--on-dark), .35);
}

.podline.is-on .podline__bar { background: var(--accent); }

/* миниатюра выпуска */
.podline__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.podline__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* у новых выпусков — жёлтая точка в углу миниатюры */
.podline__dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: avpulse 1.6s ease-in-out infinite;
}

.podline__date,
.podline__series,
.podline__len {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
}

.podline__date { color: rgba(var(--on-dark), .55); }
.podline__series {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .6);
}
.podline__len { text-align: right; color: rgba(var(--on-dark), .6); }
.podline.is-on .podline__date { color: var(--accent); }

.podline__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.podline__top {
  display: flex;
  gap: 9px;
  align-items: baseline;
  min-width: 0;
}

.podline__no {
  flex: none;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.podline.is-on .podline__no { color: var(--accent); }

.podline__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.podline.is-on .podline__name { color: var(--accent); }

/* значок нового выпуска: тёмный текст на жёлтом */
.podline__new {
  flex: none;
  padding: 3px 6px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.podline__sub {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.podline__ch,
.podline__state {
  flex: none;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.podline__prog {
  flex: 1;
  height: 3px;
  min-width: 40px;
  background: rgba(var(--on-dark), .16);
}

.podline__prog i,
.podline__meter i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.podline.is-on .podline__prog i,
.podline.is-on .podline__meter i { background: var(--accent); }

.podline__host {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .78);
}

.podline__plays {
  display: flex;
  gap: 8px;
  align-items: center;
}

.podline__meter {
  flex: 1;
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.podline__num {
  flex: none;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .55);
}

.podline__play {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.podline__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.podline__play:hover,
.podline__play:focus-visible,
.podline.is-on .podline__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.podline__play:hover .podline__glyph,
.podline__play:focus-visible .podline__glyph,
.podline.is-on .podline__glyph { color: var(--on-accent); }

/* подвал таблицы */
.podfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: clamp(16px, 1.8vw, 24px);
}

.podfoot__more {
  display: flex;
  flex: none;
  gap: 12px;
  align-items: center;
  padding: 14px 22px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.podfoot__more:hover,
.podfoot__more:focus-visible { background: var(--accent); color: var(--on-accent); }

.podfoot__progress {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.podfoot__track {
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.podfoot__track i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.podfoot__count {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podfoot__pages {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  gap: 5px;
}

.podfoot__page {
  min-width: 30px;
  padding: 8px 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}

.podfoot__page:hover,
.podfoot__page:focus-visible { color: var(--accent); }

/* снимок последнего выпуска закрывает штриховку целиком */
.podside__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 32.4 на чём остановились --- */
.podcont {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.podcont__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: flex-start;
}

.podcont__head {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
}

.podcont__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}

.podcont__count {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podcont__cards {
  display: grid;
  flex: 1 1 520px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  min-width: 0;
}

/* карточка начатого выпуска */
.podcard {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(var(--on-dark), .16);
}

.podcard.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.podcard:hover,
.podcard:focus-within { border-color: var(--accent); }

.podcard__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
}

.podcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.podcard__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.podcard__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.podcard__series {
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .55);
}

.podcard.is-on .podcard__series { color: var(--accent); }

.podcard__left {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .55);
}

.podcard__prog {
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.podcard__prog i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.podcard__play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.podcard__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--on-dark), .7);
}

.podcard.is-on .podcard__play,
.podcard__play:hover,
.podcard__play:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
}

/* на жёлтом кружке значок тёмный */
.podcard.is-on .podcard__glyph,
.podcard__play:hover .podcard__glyph,
.podcard__play:focus-visible .podcard__glyph { color: var(--on-accent); }

/* сохранённое */
.podcont__saved {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.podcont__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podsaved {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
}

.podsaved:hover,
.podsaved:focus-visible { border-color: var(--accent); color: var(--accent); }

.podsaved[aria-pressed="true"] .podsaved__heart { color: var(--accent); }

.podcont__all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.podcont__all:hover,
.podcont__all:focus-visible { text-decoration: underline; }

/* --- 32.5 как устроен выпуск --- */
.podtr {
  padding: 0 var(--gutter);
  background: var(--panel);
  color: #fff;
}

.podtr__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.podtr__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: #fff;
}

.podtr__meta {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

/* полоса глав: ширина по длительности, но не уже 68px —
   иначе таймкод обрезается */
.podtr__strip {
  display: flex;
  gap: 3px;
  margin-top: 28px;
}

.trchap {
  display: flex;
  flex: var(--flex, 1) 1 0;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-width: 68px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.trchap__bar {
  height: 10px;
  background: rgba(255, 255, 255, .22);
}

.trchap.is-on .trchap__bar { background: #ffd400; }

.trchap__at,
.trchap__len {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  white-space: nowrap;
}

.trchap__at { color: rgba(255, 255, 255, .55); }
.trchap__len { color: rgba(255, 255, 255, .45); }

.trchap__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.trchap.is-on .trchap__at,
.trchap.is-on .trchap__name { color: #ffd400; }
.trchap:hover .trchap__name { color: #ffd400; }

.podtr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 44px);
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, .5);
}

.podtr__left,
.podtr__right {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

.podtr__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.podtr__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.podtr__label--low { margin-top: auto; }

.podtr__span {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: #ffd400;
}

/* строка расшифровки */
.trline {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.trline:hover .trline__text { color: #ffd400; }

.trline__at {
  font-size: 12px;
  letter-spacing: .04em;
  line-height: normal;
  text-transform: none;
  color: rgba(255, 255, 255, .4);
}

.trline.is-voice .trline__at,
.trline.is-voice .trline__who { color: #ffd400; }

.trline__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.trline__who {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.trline__text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}

.podtr__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 6px 0 0;
}

.podtr__read,
.podtr__dl {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.podtr__read { color: #ffd400; }
.podtr__dl { margin-left: auto; color: rgba(255, 255, 255, .5); }
.podtr__dl:hover { color: #ffd400; }

/* выдержки и упоминания */
/* карточка выдержки: сама цитата и под ней кто и когда это сказал */
.trquote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
}

.trquote__text {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.8vw, 24px);
  font-style: italic;
  line-height: 1.3;
  color: rgba(255, 255, 255, .88);
}

.trquote__who {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .45);
}

/* первая выдержка — та, что звучит сейчас */
.trquote:first-of-type { border-color: rgba(255, 212, 0, .5); }
.trquote:first-of-type .trquote__text { color: #ffd400; }

.podtr__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.trchip {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
}

.trchip:hover,
.trchip:focus-visible { border-color: #ffd400; color: #ffd400; }

/* --- 32.6 о чём говорим --- */
.podg {
  padding: 0 var(--gutter);
  background: var(--card);
}

.podg__head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
}

.podg__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.podg__hint {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

/* облако тем: кегль слова растёт с числом выпусков */
.podg__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(12px, 1.6vw, 26px);
  align-items: baseline;
  margin: 26px 0 0;
  padding-bottom: 34px;
  border-bottom: 2px solid var(--ink);
}

.gword {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gword__w {
  font-family: var(--f-display);
  font-size: var(--size, 24px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.gword--a .gword__w { color: var(--accent); }
.gword--i .gword__w { color: var(--ink); }
.gword--d .gword__w { color: rgba(var(--on-dark), .55); }

.gword__n {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .4);
}

.gword:hover .gword__w,
.gword:focus-visible .gword__w { color: var(--accent); }

.podg__top {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 26px 0 0;
}

.podg__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podg__all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.podg__all:hover { text-decoration: underline; }

.podg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  margin-top: 18px;
}

.gcard {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(var(--on-dark), .16);
}

.gcard.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.gcard:hover { border-color: var(--accent); }

/* аватар гостя: фотография в кружке, штриховка остаётся подложкой */
.gcard__face {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 6px,
      rgba(var(--on-dark), .16) 6px 12px);
}

.gcard__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gcard__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.gcard__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.gcard.is-on .gcard__name { color: var(--accent); }

.gcard__role {
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.gcard__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.gcard__eps {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  color: var(--ink);
}

.gcard.is-on .gcard__eps { color: var(--accent); }

.gcard__last {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: normal;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .45);
}

/* --- 32.7 подписка --- */
.podsub {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.podsub__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.podsub__line .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podsub__next {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-left: auto;
}

.podsub__next .meta { color: var(--accent); }

.podsub__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  margin: 0;
  padding: 36px 0 20px;
}

.podsub__h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.podsub__note {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.8vw, 26px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .7);
}

.podsub__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, .8fr);
  border-top: 2px solid var(--ink);
}

.podsub__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
  padding: 28px 30px 38px;
  border-right: 1px solid rgba(var(--on-dark), .16);
}

.podsub__col--last {
  gap: 10px;
  padding-right: 0;
  border-right: 0;
}

.podsub__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podsub__url {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.4;
  word-break: break-all;
  color: var(--ink);
}

/* адрес ленты и код стоят в одной строке, код прижат вправо */
.podsub__feed {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.podsub__feed .podsub__url { flex: 1; min-width: 0; }

/* код для телефона: шесть на шесть клеток */
.podsub__qr {
  display: grid;
  flex: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  box-sizing: content-box;
  width: 64px;
  height: 64px;
  padding: 5px;
  border: 1px solid rgba(var(--on-dark), .28);
}

.podsub__qr i { background: rgba(var(--on-dark), .12); }
.podsub__qr i.is-on { background: var(--ink); }

.podsub__scan {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podsub__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.podsub__copy,
.podsub__opml,
.podsub__dl {
  padding: 13px 16px;
  border: 1px solid rgba(var(--on-dark), .28);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.podsub__copy {
  padding: 14px 20px;
  border-color: var(--shell);
  background: var(--shell);
  letter-spacing: .2em;
  color: #fff;
}

.podsub__copy:hover,
.podsub__dl:hover,
.podsub__opml:hover,
.podsub__copy:focus-visible,
.podsub__dl:focus-visible,
.podsub__opml:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.podsub__dl {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.podsub__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.podsub__since {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* строка площадки: содержимое в ряд, под ним полоса подписчиков */
.pfapp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  text-decoration: none;
}

.pfapp__row {
  display: flex;
  gap: 11px;
  align-items: baseline;
}

.pfapp__bar {
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.pfapp__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .35);
}

.pfapp.is-on .pfapp__bar i { background: var(--accent); }

.pfapp__no {
  flex: none;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .4);
}

.pfapp__name {
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.pfapp__n {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: normal;
  text-transform: none;
  color: var(--ink);
}

.pfapp__up {
  flex: none;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .45);
}

.pfapp__go {
  flex: none;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: var(--ink);
}

.pfapp.is-on .pfapp__name,
.pfapp.is-on .pfapp__n,
.pfapp.is-on .pfapp__up,
.pfapp.is-on .pfapp__go { color: var(--accent); }

.pfapp:hover .pfapp__name { color: var(--accent); }

/* строка файла */
.pffile {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.pffile__k {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pffile__v {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .75);
}

.pffile__v.is-on { color: var(--accent); }

.podsub__mail {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.podsub__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .4);
  background: none;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.podsub__input::placeholder { color: rgba(var(--on-dark), .45); }
.podsub__input:focus { outline: 0; border-bottom-color: var(--accent); }

.podsub__send {
  padding: 12px 20px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.podsub__send:hover,
.podsub__send:focus-visible { background: var(--accent); color: var(--on-accent); }

.podsub__readers {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* --- 32.8 что записать дальше --- */
.podpitch {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 2.8vw, 46px);
  padding: 0 var(--gutter) 60px;
  background: var(--paper);
}

.podpitch__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.podpitch__note {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.podpitch__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 46px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.042em;
  text-transform: uppercase;
  color: var(--ink);
}

.podpitch__form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
}

.podpitch__input,
.pchat__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .4);
  background: none;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.podpitch__input::placeholder,
.pchat__input::placeholder { color: rgba(var(--on-dark), .45); }
.podpitch__input:focus,
.pchat__input:focus { outline: 0; border-bottom-color: var(--accent); }

.podpitch__send {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.podpitch__send:hover,
.podpitch__send:focus-visible { background: var(--accent); color: var(--on-accent); }

.podpitch__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}

/* очередь производства: чипсы в рамках, блок отбит верхней линией */
.podpitch__queue {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.podpitch__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pitem {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 11px;
  border: 1px solid rgba(var(--on-dark), .22);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  color: rgba(var(--on-dark), .7);
}

.pitem.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* перенос строки в очереди: у нас имена короче эталонных, и без него
   в первую строку влезал лишний бокс */
.pitem__break {
  flex-basis: 100%;
  height: 0;
}

.pitem__state {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pitem.is-on,
.pitem.is-on .pitem__state { color: var(--accent); }

.podpitch__contacts .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .65);
}

/* чат слушателей */
.podpitch__chat {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  padding-left: 28px;
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.pchat__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.pchat__label {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pchat__online {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pchat__row {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.pchat__who {
  flex: none;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.pchat__row.is-studio .pchat__who { color: var(--accent); }

.pchat__text {
  flex: 1;
  min-width: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--on-dark), .82);
}

.pchat__at {
  flex: none;
  font-size: 12px;
  letter-spacing: normal;
  line-height: normal;
  text-align: right;
  text-transform: none;
  color: rgba(var(--on-dark), .4);
}

.pchat__form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding-top: 6px;
}

.pchat__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: #fff;
  cursor: pointer;
}

.pchat__send:hover,
.pchat__send:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.pchat__rules {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

.pchat__rules:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .podsub__cols { grid-template-columns: minmax(0, 1fr); }
  .podsub__col { border-right: 0; border-bottom: 1px solid rgba(var(--on-dark), .16); }
  .podsub__col--last { padding-right: 30px; border-bottom: 0; }
  .podpitch { grid-template-columns: minmax(0, 1fr); }
  .podpitch__chat { padding-left: 0; border-left: 0; }
  .podtr__grid { grid-template-columns: minmax(0, 1fr); }
}

/* сохранённое: снятая отметка тускнеет, сердечко гаснет */
.podsaved[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.podsaved[aria-pressed="true"] .podsaved__heart,
.podsaved[aria-pressed="true"] .podsaved__name { color: var(--accent); }
.podsaved[aria-pressed="false"] { color: rgba(var(--on-dark), .45); }

/* ===================================================================
   33. SHOWS
   =================================================================== */

/* --- 33.1 неделя целиком --- */
.wgrid {
  padding: 60px var(--gutter) 0;
  background: var(--hero-bg);
}

.wgrid__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.wgrid__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.wgrid__now {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0 0 0 auto;
}

.wgrid__now .meta { font-size: 12px; letter-spacing: .16em; line-height: normal; }
.wgrid__at { color: var(--accent); }
.wgrid__tz { color: rgba(var(--on-dark), .5); }

/* шапка с днями и сама сетка стоят на одних колонках */
.wgrid__days,
.wgrid__body {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.wgrid__days { margin-top: 28px; }
.wgrid__body { margin-top: 10px; }

.wgday {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.wgday .meta { font-size: 12px; letter-spacing: .12em; line-height: normal; }
.wgday__name { color: rgba(var(--on-dark), .65); }
.wgday__n { color: rgba(var(--on-dark), .45); }
/* сегодняшний день: подпись жёлтая и линия под ней толще и тоже жёлтая */
.wgday.is-today .wgday__name { color: #ffd400; }

.wgday.is-today {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.wgcol {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wgtime {
  height: 44px;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: none;
  color: rgba(var(--on-dark), .4);
}

.wgtime.is-now { color: var(--accent); }

/* слот: занятый — светлее и с левой чертой, пустой — просто полоса */
.wgslot {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 3px;
  height: 58px;
  padding: 7px 8px;
  border: 0;
  border-left: 2px solid rgba(var(--on-dark), .4);
  background: rgba(var(--on-dark), .22);
  text-align: left;
  cursor: pointer;
}

.wgslot--empty {
  height: 44px;
  padding: 0;
  border-left: 2px solid transparent;
  background: rgba(var(--on-dark), .1);
  cursor: default;
}

.wgslot__at {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.wgslot__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  line-height: .975;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.wgslot__host {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 12px;
  line-height: .9;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .7);
}

.wgslot:hover { border-left-color: var(--accent); }

/* подвал сетки: чем закрашены клетки и выгрузка недели */
.wgrid__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.wgleg {
  display: flex;
  gap: 9px;
  align-items: center;
}

.wgleg .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.wgleg__box {
  width: 14px;
  height: 14px;
}

.wgleg__box--now { background: var(--accent); }
.wgleg__box--live { background: rgba(var(--on-dark), .16); }

.wgleg__box--rerun {
  width: 16px;
  background: rgba(var(--on-dark), .1);
}

.wgrid__dl {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  color: var(--accent);
}

.wgrid__dl:hover { text-decoration: underline; }

/* эфир сейчас: жёлтая заливка, текст на ней тёмный */
.wgslot.is-now {
  border-left-color: var(--accent);
  background: var(--accent);
}

.wgslot.is-now .wgslot__at,
.wgslot.is-now .wgslot__name,
.wgslot.is-now .wgslot__host { color: var(--on-accent); }

/* --- 33.2 сейчас в эфире --- */
.onair {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.onair__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.onair__line .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.onair__line .onair__label {
  letter-spacing: .28em;
  color: var(--accent);
}

/* столбики эквалайзера у подписи «в эфире» */
.onair__eq {
  display: flex;
  gap: 3px;
  height: 16px;
  align-items: flex-end;
}

.onair__eq i {
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.onair__eq i:nth-child(2) { animation-delay: .18s; }
.onair__eq i:nth-child(3) { animation-delay: .36s; }
.onair__eq i:nth-child(4) { animation-delay: .54s; }
.onair__eq i:nth-child(5) { animation-delay: .72s; }

.onair__label { color: var(--accent); }

.onair__week {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.onair__week:hover { text-decoration: underline; }

.onair__today { padding: 30px 0 20px; }

.onair__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 10px;
}

.onair__title {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.onair__span {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* Шкала дня: каждый отрезок несёт полоску, время и название — так они
   не разъезжаются при любой ширине. Доля отрезка приходит из data-span. */
.oaday {
  position: relative;
  display: flex;
  gap: 2px;
}

.oaseg {
  display: flex;
  overflow: hidden;
  flex: var(--span, 1) 1 0;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.oaseg__bar {
  height: 12px;
  background: rgba(var(--on-dark), .22);
}

.oaseg.is-now .oaseg__bar { background: var(--accent); }

/* Повтор: сплошная серая полоса 4px, просвет прозрачный, шаг 8px.
   Серый — это белый 22% на фоне секции, но заданный цветом, чтобы
   полоса не просвечивала текстуру и читалась ровно. */
.oaseg--rerun .oaseg__bar {
  background:
    repeating-linear-gradient(135deg,
      #484849 0 4px,
      transparent 4px 8px);
}

.oaseg__at {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .5);
}

.oaseg__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.oaseg.is-now .oaseg__at,
.oaseg.is-now .oaseg__name { color: var(--accent); }
.oaseg:hover .oaseg__name { color: var(--accent); }

/* метка текущего часа: плашка и чёрточка вниз до шкалы */
.oaday__now {
  position: absolute;
  top: -20px;
  left: var(--now, 13.8%);
  padding: 3px 6px;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
}

.oaday__now::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 19px;
  width: 2px;
  height: 22px;
  background: var(--ink);
}

/* карточка: обложка, эфир, что дальше */
.onair__card {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  border-top: 2px solid var(--ink);
}

/* левая половина: обложка и то, что идёт сейчас */
.onair__live {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 26px;
  padding: 28px 30px 38px 0;
}

.onair__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* обложка тянется на всю высоту карточки — соотношение не задаём */
.onair__cover {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 210px;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 8px,
      rgba(var(--on-dark), .16) 8px 16px);
}

/* кадр передачи закрывает обложку целиком, плашка эфира лежит поверх */
.onair__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onair__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.onair__act {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-align: left;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

.onair__act:hover,
.onair__act[aria-pressed="true"] { color: var(--accent); }

.onair__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.onair__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  margin: 0;
}

.onair__freq {
  padding: 4px 10px;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
}

.onair__when {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.onair__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.042em;
  text-transform: uppercase;
  color: var(--ink);
}

.onair__host {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.9vw, 26px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .75);
}

.onair__blurb {
  max-width: 46ch;
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .68);
}

.onair__play {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: auto;
}

.onair__btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--shell);
  cursor: pointer;
}

.onair__glyph {
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: normal;
  color: #fff;
}

.onair__btn:hover,
.onair__btn:focus-visible,
.onair__btn[aria-pressed="true"] { background: var(--accent); }

.onair__btn:hover .onair__glyph,
.onair__btn:focus-visible .onair__glyph,
.onair__btn[aria-pressed="true"] .onair__glyph { color: var(--on-accent); }

/* волна, под ней полоса прошедшего и подписи по краям */
.onair__track {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* волна эфира: серый слой снизу, жёлтый сверху, подрезанный справа */
.onair__wave {
  position: relative;
  display: block;
  height: 30px;
}

.onair__row {
  display: flex;
  gap: 2px;
  height: 30px;
  align-items: flex-end;
}

.onair__row i {
  flex: 1;
  background: rgba(var(--on-dark), .28);
}

.onair__row--on i { background: var(--accent); }

/* край едет вправо переходом clip-path: полосы не сдвигаются,
   а перекрашиваются слева направо, пока идёт передача */
.onair__fill {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: inset(0 100% 0 0);
}

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

.onair__bar {
  height: 3px;
  background: rgba(var(--on-dark), .22);
}

.onair__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.onair__times {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.onair__times .meta { font-size: 12px; letter-spacing: .12em; line-height: normal; }
.onair__in { color: var(--accent); }
.onair__remain { margin-left: auto; color: rgba(var(--on-dark), .5); }

/* что дальше */
.onair__up {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 28px 0 38px 30px;
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.onair__uptop {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.onair__uplabel {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.onair__starts {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.oanext {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.oanext__thumb {
  overflow: hidden;
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 6px,
      rgba(var(--on-dark), .16) 6px 12px);
}

.oanext__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.oanext__at {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: none;
  color: var(--accent);
}

.oanext.is-quiet .oanext__at { color: rgba(var(--on-dark), .55); }

.oanext__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.oanext__host {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .75);
}

.oanext__side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  text-align: right;
}

.oanext__in {
  font-family: var(--f-num);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.oanext.is-quiet .oanext__in { color: rgba(var(--on-dark), .55); }

.oanext__remind,
.oanext__dash {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .45);
  cursor: pointer;
}

.oanext__remind:hover { color: var(--accent); }
.oanext__dash { cursor: default; }

.onair__signoff {
  margin: auto 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* строка «сейчас играет» */
.onair__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  padding: 15px 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.onair__nowlabel,
.onair__nowlabelled {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.onair__nowtrack {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.onair__log {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.onair__log:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .onair__card { grid-template-columns: minmax(0, 1fr); }
  .onair__up { padding-left: 0; border-left: 0; }
}

/* --- 33.3 все передачи --- */
.pgm {
  padding: 0 var(--gutter);
  background: var(--card);
}

.pgm__head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
}

.pgm__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.pgm__note {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

/* лента едет вбок, полоса прокрутки тонкая */
.pgm__rail {
  display: flex;
  gap: clamp(14px, 1.8vw, 28px);
  overflow-x: auto;
  margin-top: 26px;
  margin-right: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 14px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--on-dark), .28) rgba(var(--on-dark), .06);
}

.pgm__rail:hover { scrollbar-color: var(--accent) rgba(var(--on-dark), .06); }

.pgm__rail::-webkit-scrollbar { height: 6px; }
.pgm__rail::-webkit-scrollbar-track { background: rgba(var(--on-dark), .06); }
.pgm__rail::-webkit-scrollbar-thumb { background: rgba(var(--on-dark), .28); }
.pgm__rail:hover::-webkit-scrollbar-thumb { background: var(--accent); }

.pgcard {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 11px;
  width: clamp(276px, 25.2vw, 346px);
  padding: 12px;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .16);
  background: var(--card);
}

/* передача, которая идёт сейчас */
.pgcard.is-live {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.pgcard:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}

.pgcard__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 8px,
      rgba(var(--on-dark), .16) 8px 16px);
}

/* кадр передачи закрывает обложку целиком, плашки лежат поверх */
.pgcard__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* верх кадра притемнён, иначе время и метка теряются на светлом снимке */
.pgcard__cover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.pgcard__badge {
  position: absolute;
  top: 15px;
  left: 18px;
  padding: 5px 8px;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
}

/* у идущей передачи бейдж жёлтый — значит текст тёмный */
.is-live .pgcard__badge {
  background: var(--accent);
  color: var(--on-accent);
}

.pgcard__when {
  position: absolute;
  top: 15px;
  right: 18px;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pgcard__name {
  margin: 0;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.is-live .pgcard__name { color: var(--accent); }

.pgcard__host {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.15;
  color: rgba(var(--on-dark), .75);
}

.pgcard__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.pgcard__foot .meta {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.pgcard__arch {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .55);
}

.is-live .pgcard__arch { color: var(--accent); }
.pgcard__arch:hover { color: var(--accent); }

/* под лентой: кнопка «показать все» и счётчик */
.pgm__more {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding-top: 26px;
}

.pgm__all {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.pgm__all:hover,
.pgm__all:focus-visible { background: var(--accent); color: var(--on-accent); }

.pgm__shown {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* --- 33.4 форматы --- */
.fmts {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.fmts__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.fmts__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.9vw, 46px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.fmts__totals {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 28px);
  align-items: flex-end;
  margin-left: auto;
}

/* лента форматов едет вбок теми же правилами, что и лента передач */
.fmts__rail {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  margin-top: 26px;
  margin-right: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 14px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--on-dark), .28) rgba(var(--on-dark), .06);
}

.fmts__rail:hover { scrollbar-color: var(--accent) rgba(var(--on-dark), .06); }
.fmts__rail::-webkit-scrollbar { height: 6px; }
.fmts__rail::-webkit-scrollbar-track { background: rgba(var(--on-dark), .06); }
.fmts__rail::-webkit-scrollbar-thumb { background: rgba(var(--on-dark), .28); }
.fmts__rail:hover::-webkit-scrollbar-thumb { background: var(--accent); }

.fmtc {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 11px;
  width: 386px;
  padding: 22px;
  scroll-snap-align: start;
  border: 1px solid rgba(var(--on-dark), .16);
  background: var(--card);
}

/* формат, который идёт сегодня */
.fmtc.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.fmtc:hover { border-color: var(--accent); }

.fmtc__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.fmtc__no {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .4);
}

/* Плашка формата, который идёт сегодня: жёлтая заливка, на ней всё тёмное. */
.fmtc__live {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 4px 8px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.fmtc__live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
}

.fmtc__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.fmtc.is-on .fmtc__name { color: var(--accent); }

.fmtc__figs {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

/* число выпусков — крупная цифра, доля эфира — приборная подпись */
.fmtc__num {
  font-family: var(--f-num);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.fmtc.is-on .fmtc__num { color: var(--accent); }

.fmtc__share {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}
.fmtc.is-on .fmtc__share { color: var(--accent); }

.fmtc__lab {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* доля в эфире полосой */
.fmtc__bar {
  height: 3px;
  background: rgba(var(--on-dark), .16);
}

.fmtc__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.fmtc.is-on .fmtc__bar i { background: var(--accent); }

.fmtc__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .68);
}

/* диаграмма выпусков в карточке формата: двенадцать полос */
.fmtc__chart {
  display: flex;
  gap: 2px;
  height: 22px;
  align-items: flex-end;
}

.fmtc__chart i {
  flex: 1;
  background: rgba(var(--on-dark), .22);
}

.fmtc.is-on .fmtc__chart i { background: color-mix(in srgb, var(--accent) 65%, transparent); }

/* пока выпуск играет, столбики карточки шевелятся волной слева направо */
.fmtc__chart i { transform-origin: bottom; }

.fmtc.is-live .fmtc__chart i {
  animation: aveq 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .fmtc.is-live .fmtc__chart i { animation: none; }
}

.fmtc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.fmtc__chip {
  padding: 6px 9px;
  border: 1px solid rgba(var(--on-dark), .22);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  color: rgba(var(--on-dark), .7);
}

.fmtc.is-on .fmtc__chip {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

/* ближайший выпуск формата */
.fmtc__next {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.fmtc__col {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}

.fmtc__at {
  flex: none;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.fmtc.is-on .fmtc__at { color: var(--accent); }

/* ближайший выпуск подписан курсивом, как в эталоне */
.fmtc__title {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .7);
}

.fmtc__play {
  display: grid;
  flex: none;
  margin-left: auto;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
}

.fmtc__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: inherit;
}

.fmtc__play:hover,
.fmtc__play:focus-visible,
.fmtc.is-on .fmtc__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.fmtc__play:hover .fmtc__glyph,
.fmtc__play:focus-visible .fmtc__glyph,
.fmtc.is-on .fmtc__glyph { color: var(--on-accent); }

/* --- 33.5 ведущие --- */
.hsts {
  padding: 0 var(--gutter);
  background: var(--card);
}

.hsts__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.hsts__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.hsts__note {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.hsts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2vw, 34px) clamp(12px, 1.6vw, 26px);
  margin-top: 32px;
}

/* фото приколото к стене: свой наклон и своя высота посадки */
.hcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin-top: var(--top, 0);
  transform: rotate(var(--rot, 0deg));
  transition: transform .2s ease;
}

.hcard:hover { transform: rotate(0deg) translateY(-6px); }

.hcard__frame {
  position: relative;
  padding: 9px 9px 15px;
  border: 1px solid rgba(var(--on-dark), .14);
  background: var(--card);
  box-shadow: 0 14px 30px rgba(var(--on-dark), .14);
}

/* скотч сверху по центру */
.hcard__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 52px;
  height: 16px;
  background: rgba(var(--on-dark), .16);
  transform: translateX(-50%) rotate(var(--tape, 0deg));
}

.hcard__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 8px,
      rgba(var(--on-dark), .16) 8px 16px);
}

.hcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hcard__no {
  position: absolute;
  top: 15px;
  left: 8px;
  padding: 5px 8px;
  background: var(--shell);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: #fff;
}

/* у ведущего в эфире номер жёлтый — значит текст на нём тёмный */
.hcard.is-live .hcard__no {
  background: var(--accent);
  color: var(--on-accent);
}

.hcard__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .4);
}

/* плашка «в эфире» с эквалайзером — на жёлтом всё тёмное */
.hcard__live {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.hcard__eq {
  display: flex;
  gap: 2px;
  height: 11px;
  align-items: flex-end;
}

.hcard__eq i {
  width: 2px;
  height: 100%;
  background: var(--on-accent);
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.hcard__eq i:nth-child(2) { animation-delay: .2s; }
.hcard__eq i:nth-child(3) { animation-delay: .4s; }
.hcard__eq i:nth-child(4) { animation-delay: .6s; }

/* имя под рамкой снимка */
.hcard__name {
  display: block;
  margin-top: 11px;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.1;
  color: var(--ink);
}


.hcard__show {
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.hcard.is-live .hcard__show { color: var(--accent); }

.hcard__when {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.hcard.is-live .hcard__when { color: var(--accent); }

.hsts__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.hsts__dot {
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: avpulse 1.6s ease-in-out infinite;
}

.hsts__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: var(--accent);
}

.hsts__now {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}

.hsts__who {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.8vw, 24px);
  font-style: italic;
  line-height: 1;
  color: rgba(var(--on-dark), .75);
}

.hsts__all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.hsts__all:hover { text-decoration: underline; }

/* подвал секции форматов: что идёт на этой неделе */
.fmts__week {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.fmts__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.fmts__up {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 11px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
}

.fmts__up:hover,
.fmts__up:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ближайший выпуск недели — жёлтым, как активная карточка */
.fmts__up.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.fmts__day,
.fmts__upname {
  letter-spacing: inherit;
  line-height: normal;
  color: inherit;
}

.fmts__suggest {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.fmts__suggest:hover { text-decoration: underline; }



/* ===================================================================
   34 — «BECOME A HOST»: ПРИЁМ ДЕМО (страница Shows)
   Полоса лежит на самом тёмном фоне страницы, поэтому жёлтый берётся
   яркий — тот же, что у живых меток. Токен переопределён на секции,
   чтобы все её потомки взяли его сами.
   =================================================================== */
.bhost {
  --accent: var(--c-yellow);
  --ink: #fff;

  padding: 0 clamp(20px, 3.2vw, 40px) clamp(38px, 4.7vw, 60px);

  /* тон тот же, что у подвала, но зерно общее для всего сайта:
     без него полоса выглядит вставленной из другого макета */
  background: var(--tile) var(--shell);
  color: var(--ink);
}

/* верхняя служебная строка: цифры приёма и срок */
.bhost__service {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.bhost__service .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bhost__left {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-left: auto;
}

.bhost__left i {
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.bhost__left .meta { color: var(--accent); }

/* заголовок и подзаголовок стоят на одной линии */
.bhost__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  padding: clamp(24px, 2.8vw, 36px) 0 20px;
}

.bhost__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.042em;
  text-transform: uppercase;
  color: var(--ink);
}

.bhost__lead {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.1;
  color: rgba(var(--on-dark), .7);
}

/* три колонки: правила, форма, что получает ведущий */
.bhost__cols {
  display: grid;
  grid-template-columns: 19fr 21fr 16fr;
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.bhost__col {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 40px;
}

.bhost__ask { gap: 14px; }
.bhost__form { gap: 15px; }
.bhost__gets { gap: 13px; }

.bhost__ask,
.bhost__form { border-right: 1px solid rgba(var(--on-dark), .16); }

.bhost__gets { padding-right: 0; }

.bhost__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* --- 34.1 что мы просим прислать --- */
.bhost__rule {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.bhost__no {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bhost__no.is-on { color: var(--accent); }

.bhost__ruletext {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(var(--on-dark), .86);
}

/* --- 34.2 путь демо: четыре этапа --- */
.bhost__how {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: auto;
  padding-top: 8px;
}

.bhost__howhead {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.bhost__stage {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: var(--accent);
}

.bhost__steps {
  display: flex;
  gap: 3px;
}

.bhost__step {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.bhost__step i {
  height: 8px;
  background: rgba(var(--on-dark), .28);
}

.bhost__step.is-on i { background: var(--accent); }

.bhost__when {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bhost__what {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.bhost__step.is-on .bhost__when,
.bhost__step.is-on .bhost__what { color: var(--accent); }

/* --- 34.3 форма заявки --- */
.bhost__formhead {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.bhost__h3 {
  font-family: var(--f-display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}

.bhost__no6 {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bhost__field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
}

.bhost__flab {
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bhost__flabrow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bhost__count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bhost__input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .5);
  border-radius: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ink);
}

.bhost__input::placeholder { color: rgba(var(--on-dark), .35); }

.bhost__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.bhost__two {
  display: flex;
  gap: 22px;
}

/* поле для файла: рамка пунктиром, сам input спрятан */
.bhost__drop {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 13px;
  border: 1px dashed rgba(var(--on-dark), .4);
  cursor: pointer;
}

.bhost__drop.is-over,
.bhost__drop:hover { border-color: var(--accent); }

/* запись выбрана: рамка сплошная, имя файла подсвечено */
.bhost__drop.is-set {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.bhost__drop.is-set .bhost__dropline { color: var(--accent); }

.bhost__arrow {
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: normal;
  color: var(--accent);
}

.bhost__droptext {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bhost__dropline {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .85);
}

.bhost__dropnote {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bhost__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bhost__send {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border: 0;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

.bhost__send:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }

.bhost__answer {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

/* --- 34.4 что получает ведущий --- */
.bhost__get {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.bhost__getlab {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bhost__getval {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-align: right;
  color: var(--ink);
}

.bhost__getval--soft { color: rgba(var(--on-dark), .8); }
.bhost__getval--on { color: var(--accent); }

.bhost__slotslab { padding-top: 6px; }

/* свободный слот: жёлтая рамка на притушённой заливке */
.bhost__slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.bhost__slotwhen {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
}

.bhost__slotwhat {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

/* отзыв ведущей прижат к низу колонки */
.bhost__quote {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.bhost__quotetext {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 21px;
  line-height: 1.35;
  color: rgba(var(--on-dark), .82);
}

.bhost__quotewho {
  margin: 0;
  padding-top: 9px;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

/* нижняя служебная строка */
.bhost__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.bhost__foot .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.bhost__more {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.bhost__more:hover { text-decoration: underline; }

/* на узких экранах колонки встают друг под друга */
@media (max-width: 1000px) {
  .bhost__cols { grid-template-columns: 1fr; }

  .bhost__ask,
  .bhost__form {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--on-dark), .16);
  }

  .bhost__col { padding: 24px 0 28px; }
  .bhost__two { flex-wrap: wrap; }
}

/* ===================================================================
   35 — СТРАНИЦА DJS
   Секции: резиденты, за пультом, сеты, гости, жанры, «пришлите микс».
   =================================================================== */

/* --- 35.1 резиденты --- */
.res {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) 0;
  background: var(--paper);
}

.res__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: clamp(16px, 1.9vw, 24px);
}

.res__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.res__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-left: auto;
}

/* строка фильтров над лентой */
.res__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding-bottom: 14px;
}

.res__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.res__chip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 9px 12px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.res__chip.is-on {
  background: var(--shell);
  color: #fff;
}

/* на жёлтой заливке текст тёмный */
.res__chip:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.res__scroll {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.res__guests {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.res__guests:hover { text-decoration: underline; }

.res__rail {
  display: flex;
  gap: clamp(14px, 1.8vw, 30px);
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

/* --- 35.2 карточка резидента --- */
.rescard {
  display: flex;
  box-sizing: content-box;
  flex: 0 0 clamp(240px, 22vw, 300px);
  flex-direction: column;
  gap: 11px;
  padding: 12px;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .16);
  background: none;
}

/* резидент, который сейчас в эфире */
.rescard.is-live {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.rescard:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
}

.rescard__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 9px,
      rgba(var(--on-dark), .16) 9px 18px);
}

/* снимок закрывает кадр целиком, плашки лежат поверх */
.rescard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rescard__top {
  position: absolute;
  top: 11px;
  left: 11px;
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}

.rescard__no {
  padding: 5px 8px;
  background: var(--shell);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: #fff;
}

.rescard.is-live .rescard__no {
  background: var(--accent);
  color: var(--on-accent);
}

.rescard__live {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 8px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.rescard__eq {
  display: flex;
  gap: 1.5px;
  height: 12px;
  align-items: flex-end;
}

.rescard__eq i {
  width: 2px;
  height: 100%;
  background: currentcolor;
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.rescard__eq i:nth-child(2) { animation-delay: .18s; }
.rescard__eq i:nth-child(3) { animation-delay: .36s; }
.rescard__eq i:nth-child(4) { animation-delay: .54s; }

/* жанр стоит на подложке в нижнем углу кадра */
.rescard__genre {
  position: absolute;
  bottom: 11px;
  left: 11px;
  padding: 5px 8px;
  background: var(--card);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .7);
}

.rescard__line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.rescard__name {
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.rescard.is-live .rescard__name { color: var(--accent); }

.rescard__since {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.rescard__slot {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.rescard.is-live .rescard__slot { color: var(--accent); }

/* доля эфира: полоска и часы в неделю */
.rescard__share {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}

.rescard__bar {
  flex: 1;
  height: 3px;
  background: rgba(var(--on-dark), .14);
}

.rescard__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.rescard.is-live .rescard__bar i { background: var(--accent); }

.rescard__hours {
  flex: none;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* подвал карточки: последний сет и кнопка */
.rescard__last {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.rescard__col {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}

.rescard__set {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .78);
}

.rescard__meta {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.rescard__play {
  display: grid;
  flex: none;
  margin-left: auto;
  padding: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
}

.rescard.is-live .rescard__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.rescard__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: inherit;
}

/* подвал секции */
.res__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.res__now {
  display: flex;
  gap: 9px;
  align-items: center;
}

.res__now .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.res__archive {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.res__become {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.res__become:hover { text-decoration: underline; }

/* --- 35.3 за пультом --- */
.booth {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.booth__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.booth__eq {
  display: flex;
  gap: 3px;
  height: 16px;
  align-items: flex-end;
}

.booth__eq i {
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.booth__eq i:nth-child(2) { animation-delay: .18s; }
.booth__eq i:nth-child(3) { animation-delay: .36s; }
.booth__eq i:nth-child(4) { animation-delay: .54s; }
.booth__eq i:nth-child(5) { animation-delay: .72s; }

.booth__label {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: var(--accent);
}

.booth__at,
.booth__listening {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.booth__listening { margin-left: auto; }

.booth__grid {
  display: grid;
  grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(22px, 2.6vw, 36px);
}

/* левая колонка: портрет ведущего */
.booth__side {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.booth__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 9px,
      rgba(var(--on-dark), .16) 9px 18px);
}

.booth__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booth__badge {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 5px 8px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.booth__since {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.booth__follow {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-align: left;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

.booth__follow:hover,
.booth__follow[aria-pressed="true"] { color: var(--accent); }

/* центральная колонка: кто и что играет */
.booth__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.booth__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.042em;
  text-transform: uppercase;
  color: var(--ink);
}

.booth__genres {
  font-family: var(--f-serif);
  font-size: clamp(18px, 2vw, 26px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .75);
}

.booth__now {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--on-dark), .16);
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.booth__thumb {
  overflow: hidden;
  flex: none;
  width: 56px;
  height: 56px;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 8px,
      rgba(var(--on-dark), .16) 8px 16px);
}

.booth__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booth__nowcol {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.booth__nowlab {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.booth__track {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.booth__release {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* плеер сета */
.booth__player {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: auto;
}

.booth__btn {
  display: grid;
  flex: none;
  padding: 0;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--shell);
  color: var(--accent);
  cursor: pointer;
}

.booth__btn:hover { background: var(--accent); color: var(--on-accent); }

.booth__glyph {
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: normal;
  color: inherit;
}

.booth__meter {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* Волна сета: два одинаковых ряда полос друг над другом. Нижний серый,
   верхний жёлтый и обрезан по ширине — она и ползёт по мере проигрывания. */
.booth__wave {
  position: relative;
  display: block;
  height: 30px;
}

.booth__row {
  display: flex;
  gap: 2px;
  height: 30px;
  align-items: flex-end;
}

.booth__row i {
  flex: 1;
  background: rgba(var(--on-dark), .22);
  transform-origin: bottom;
}

/* Жёлтый слой лежит поверх серого во всю ширину и подрезается справа:
   так полосы не сдвигаются, а просто перекрашиваются слева направо. */
.booth__fill {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: inset(0 70% 0 0);
  transition: clip-path .35s linear;
}

.booth__row--on i { background: var(--accent); }

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

.booth__prog {
  display: block;
  height: 5px;
  background: rgba(var(--on-dark), .14);
}

.booth__prog i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
  transition: width .35s linear;
}

.booth__times {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.booth__into {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

.booth__left {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* правая колонка: что уже прозвучало */
.booth__tracks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-left: clamp(14px, 1.6vw, 24px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.booth__thead {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.booth__tlabel {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.booth__count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.btrack {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.btrack:hover { border-bottom-color: var(--accent); }

.btrack__at {
  flex: none;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.btrack.is-now .btrack__at { color: var(--accent); }

.btrack__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .82);
}

.booth__all {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.booth__all:hover { text-decoration: underline; }

/* нижняя строка: кто следующий */
.booth__next {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 15px 0;
  border-top: 1px solid rgba(var(--on-dark), .18);
}

.booth__nextlab {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.booth__chip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 11px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
}

.booth__chip.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.booth__chip:hover { border-color: var(--accent); color: var(--accent); }

.booth__chipat,
.booth__chipwho {
  letter-spacing: inherit;
  line-height: normal;
  color: inherit;
}

.booth__req {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.booth__req:hover { text-decoration: underline; }

/* --- 35.4 сеты: таблица записей --- */
.sets {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.sets__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 22px;
}

.sets__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.sets__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-left: auto;
}

.sets__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding-bottom: 13px;
}

.sets__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.sets__chip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 9px 12px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.sets__chip.is-on { background: var(--shell); color: #fff; }
.sets__chip:hover { background: var(--accent); color: var(--on-accent); }

/* сортировка одним переключателем в рамке */
.sets__sorts {
  display: flex;
  margin-left: auto;
  border: 1px solid rgba(var(--on-dark), .28);
}

.sets__sort {
  padding: 9px 14px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .6);
  cursor: pointer;
}

.sets__sort.is-on { background: var(--accent); color: var(--on-accent); }
.sets__sort:hover { color: var(--ink); }
.sets__sort.is-on:hover { color: var(--on-accent); }

/* шапка и строки живут на одной сетке */
.sets__thead,
.setrow {
  display: grid;
  grid-template-columns: 3px 76px 38px minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .7fr) 58px 92px 74px;
  gap: 12px;
  align-items: center;
}

/* обложка сета: маленький квадрат перед названием */
.setrow__art {
  display: block;
  overflow: hidden;
  width: 38px;
  height: 38px;
}

.setrow__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sets__thead {
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}

.sets__col {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.setrow {
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.setrow:hover { background: rgba(var(--on-dark), .1); }

/* полоска слева — цвет диджея */
.setrow__stripe {
  align-self: stretch;
  width: 3px;
  background: rgba(var(--on-dark), .28);
}

.setrow__stripe--live { background: var(--accent); }
.setrow__stripe--a { background: rgba(var(--on-dark), .28); }
.setrow__stripe--b { background: rgba(var(--on-dark), .22); }
.setrow__stripe--c { background: rgba(var(--on-dark), .18); }
.setrow__stripe--d { background: rgba(var(--on-dark), .45); }
.setrow__stripe--e { background: rgba(var(--on-dark), .55); }
.setrow__stripe--f { background: rgba(var(--on-dark), .35); }

.setrow__date {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.setrow:first-child .setrow__date { color: var(--accent); }

.setrow__set {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.setrow__title {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.setrow__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.setrow__new {
  flex: none;
  padding: 2px 7px;
  background: var(--accent);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: var(--on-accent);
}

.setrow__wave {
  display: flex;
  flex: none;
  gap: 2px;
  height: 17px;
  align-items: flex-end;
  max-width: 180px;
}

.setrow__wave i {
  width: 3px;
  background: rgba(var(--on-dark), .28);
}

/* играющая строка: полоска слева, дата и название жёлтые, полосы
   под названием пляшут вразнобой */
.setrow.is-live .setrow__stripe { background: var(--accent); }
.setrow.is-live .setrow__name { color: var(--accent); }
.setrow.is-live .setrow__date { color: var(--accent); }

.setrow__wave i { transform-origin: bottom; }

.setrow.is-live .setrow__wave i {
  background: var(--accent);
  animation: aveq var(--t, 1.1s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .setrow.is-live .setrow__wave i { animation: none; }
}

.setrow__dj {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .78);
}

.setrow__genre,
.setrow__len {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.setrow__len { text-align: right; }

.setrow__plays {
  display: flex;
  gap: 9px;
  align-items: center;
}

.setrow__bar {
  flex: 1;
  height: 3px;
  background: rgba(var(--on-dark), .14);
}

.setrow__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.setrow:first-child .setrow__bar i { background: var(--accent); }

/* пока сет играет, полоска жёлтая и растёт вместе с ним */
.setrow.is-live .setrow__bar i {
  background: var(--accent);
  transition: width .35s linear;
}

@media (prefers-reduced-motion: reduce) {
  .setrow.is-live .setrow__bar i { transition: none; }
}

.setrow__num {
  flex: none;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: var(--ink);
}

.setrow__acts {
  display: flex;
  gap: 11px;
  align-items: center;
  justify-self: end;
}

.setrow__dl {
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
  color: rgba(var(--on-dark), .5);
}

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

.setrow__play {
  display: grid;
  flex: none;
  padding: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--on-dark), .28);
  border-radius: 50%;
  background: none;
  color: rgba(var(--on-dark), .7);
  cursor: pointer;
}

.setrow.is-live .setrow__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.setrow__play:hover { border-color: var(--accent); color: var(--accent); }
.setrow.is-live .setrow__play:hover { color: var(--on-accent); }

.setrow__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: inherit;
}

/* подвал таблицы */
.sets__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding-top: 22px;
}

.sets__more {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.sets__more:hover { background: var(--accent); color: var(--on-accent); }

.sets__progress {
  flex: 1;
  max-width: 220px;
  height: 2px;
  background: rgba(var(--on-dark), .14);
}

.sets__progress i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.sets__count {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.sets__rss {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.sets__rss:hover { text-decoration: underline; }

/* --- 35.5 гости --- */
.guests {
  --accent: var(--c-yellow);
  --ink: #fff;

  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
  color: var(--ink);
}

.guests__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: clamp(20px, 2.4vw, 26px);
}

.guests__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.guests__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-left: auto;
}

/* полоса ближайших дат */
.gtime {
  position: relative;
  display: flex;
  gap: 3px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.gtime__month {
  display: flex;
  flex: var(--span, 1) 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.gtime__slots {
  display: flex;
  gap: 3px;
}

.gtime__slots i {
  flex: 1;
  height: 12px;
  background: rgba(255, 255, 255, .26);
}

.gtime__slots i.is-on { background: var(--accent); }

.gtime__name {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .6);
}

.gtime__name.is-on { color: var(--accent); }

.gtime__who {
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .45);
}

/* курсор сегодняшнего дня */
.gtime__today {
  position: absolute;
  top: -26px;
  left: 9%;
  padding: 3px 6px;
  background: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.gtime__today::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  width: 2px;
  height: 34px;
  background: #fff;
}

/* лента гостей уходит под правый край страницы */
.guests__rail {
  display: flex;
  gap: clamp(12px, 1.6vw, 26px);
  overflow-x: auto;
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
}

.gvis {
  display: flex;
  box-sizing: content-box;
  flex: none;
  flex-direction: column;
  gap: 11px;
  width: clamp(230px, 20vw, 290px);
  padding: 12px;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease;
  border: 1px solid rgba(255, 255, 255, .14);
  background: none;
}

.gvis.is-live {
  border-color: rgba(255, 212, 0, .55);
  background: rgba(255, 212, 0, .06);
}

.gvis:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}

.gvis__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .07) 0 9px,
      rgba(255, 255, 255, .03) 9px 18px);
}

/* снимок гостя закрывает кадр целиком, дата и метки лежат поверх */
.gvis__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gvis__top {
  position: absolute;
  top: 11px;
  right: 11px;
  left: 11px;
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}

.gvis__date {
  padding: 5px 9px;
  background: var(--accent);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--on-accent);
}

.gvis__cd {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.gvis.is-live .gvis__cd { color: var(--accent); }

.gvis__live {
  position: absolute;
  bottom: 11px;
  left: 11px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 9px;
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.gvis__eq {
  display: flex;
  gap: 1.5px;
  height: 12px;
  align-items: flex-end;
}

.gvis__eq i {
  width: 2px;
  height: 100%;
  background: currentcolor;
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.gvis__eq i:nth-child(2) { animation-delay: .18s; }
.gvis__eq i:nth-child(3) { animation-delay: .36s; }
.gvis__eq i:nth-child(4) { animation-delay: .54s; }

.gvis__name {
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.gvis.is-live .gvis__name { color: var(--accent); }

.gvis__city {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.gvis__style {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.15;
  color: rgba(255, 255, 255, .8);
}

.gvis__left {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}

.gvis__bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, .12);
}

.gvis__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(255, 255, 255, .45);
}

.gvis.is-live .gvis__bar i { background: var(--accent); }

.gvis__slot {
  flex: none;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.gvis__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.gvis__status {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .55);
}

.gvis__status--on { color: var(--accent); }

.gvis__remind {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
}

.gvis__remind:hover,
.gvis__remind[aria-pressed="true"] { color: var(--accent); }

/* подвал: откуда приезжают */
.guests__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: clamp(20px, 2.2vw, 26px) 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(255, 255, 255, .5);
}

.guests__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.guests__city {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 9px 12px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
}

.guests__city b {
  font-weight: 400;
  color: rgba(255, 255, 255, .45);
}

.guests__city:hover,
.guests__city:hover b { color: var(--accent); }

.guests__past {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.guests__past:hover { text-decoration: underline; }

/* --- 35.6 жанры --- */
.gnr {
  padding: 0 var(--gutter);
  background: var(--card);
}

.gnr__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.gnr__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}

.gnr__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  margin-left: auto;
}

.gnr__modes {
  display: flex;
  border: 1px solid rgba(var(--on-dark), .28);
}

.gnr__mode {
  padding: 9px 14px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .6);
  cursor: pointer;
}

.gnr__mode.is-on { background: var(--accent); color: var(--on-accent); }
.gnr__mode:hover { color: var(--ink); }
.gnr__mode.is-on:hover { color: var(--on-accent); }

/* облако: кегль слова = число сетов */
.gnr__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-end;
  padding-bottom: 34px;
  border-bottom: 2px solid var(--ink);
}

.gword {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.gword__top {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gword__name {
  font-family: var(--f-display);
  font-size: var(--size, 20px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.gword.is-on .gword__name { color: var(--accent); }
.gword:hover .gword__name { color: var(--accent); }

.gword__num {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .4);
}

.gword__bar {
  display: block;
  width: 130px;
  height: 2px;
  background: rgba(var(--on-dark), .14);
}

.gword__bar i {
  display: block;
  width: var(--fill, 0);
  height: 100%;
  background: var(--accent);
}

/* карточки жанров */
.gnr__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  padding-top: clamp(18px, 2.2vw, 28px);
}

.gcat {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  transition: border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .16);
}

.gcat:hover { border-color: var(--accent); }

.gcat__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.gcat__name {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.gcat__sets {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.gcat__dj {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 46px;
  gap: 11px;
  align-items: center;
  margin: 0;
}

.gcat__ava {
  overflow: hidden;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 6px,
      rgba(var(--on-dark), .16) 6px 12px);
}

.gcat__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gcat__who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gcat__nm {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.gcat__bar {
  display: block;
  height: 2px;
  background: rgba(var(--on-dark), .14);
}

.gcat__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.gcat__n {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .5);
}

.gcat__foot {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.gcat__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}

.gcat__lab {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.gcat__latest {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .78);
}

.gcat__play {
  display: grid;
  flex: none;
  margin-left: auto;
  padding: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}

.gcat__glyph {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: normal;
  color: inherit;
}

.gnr__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.gnr__hint,
.gnr__share {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.gnr__filter {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.gnr__filter:hover { text-decoration: underline; }

/* ===================================================================
   36 — СТРАНИЦА SCHEDULE
   Шесть секций из восьми стоят на одном фоне: ритм держат разделители,
   линии внутри секций и типографика.
   =================================================================== */

/* --- 36.1 панель фильтров --- */
.sfilter {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) 0;
  background: var(--paper);
}

.sfilter__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 28px);
  align-items: flex-end;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(var(--on-dark), .16);
}

.sfilter__search {
  display: flex;
  flex: 1 1 280px;
  gap: 12px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(var(--on-dark), .5);
}

.sfilter__glyph {
  font-family: var(--f-mono);
  font-size: 22px;
  line-height: 1;
  color: rgba(var(--on-dark), .5);
}

.sfilter__input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}

.sfilter__input::placeholder { color: rgba(var(--on-dark), .62); }
.sfilter__input:focus { outline: none; }
.sfilter__search:focus-within { border-bottom-color: var(--accent); }

.sfilter__found {
  flex: none;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

/* два выпадающих списка */
.sfilter__drop {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .28);
  background: none;
  text-align: left;
  cursor: pointer;
}

.sfilter__drop:hover { border-bottom-color: var(--accent); }

.sfilter__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.sfilter__val {
  display: flex;
  gap: 10px;
  align-items: baseline;
  overflow: hidden;
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.sfilter__val span { margin-left: auto; color: rgba(var(--on-dark), .5); }

/* вид эфира и день — сегментами в рамке */
.sfilter__kinds,
.sfilter__date {
  display: flex;
  flex: none;
  align-items: center;
  border: 1px solid rgba(var(--on-dark), .28);
}

.sfilter__kind,
.sfilter__arrow {
  padding: 9px 12px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .6);
  cursor: pointer;
}

.sfilter__kind.is-on { background: var(--accent); color: var(--on-accent); }
.sfilter__kind:hover { color: var(--ink); }
.sfilter__kind.is-on:hover { color: var(--on-accent); }
.sfilter__arrow:hover { color: var(--accent); }

.sfilter__day {
  padding: 9px 4px;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--ink);
}

/* нижняя строка: что уже выбрано */
.sfilter__active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 13px 0;
}

.sfilter__alabel {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.sfilter__chip {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .12);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-yellow);
  cursor: pointer;
}

.sfilter__chip i {
  font-style: normal;
  opacity: .6;
}

.sfilter__chip:hover i { opacity: 1; }

.sfilter__clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

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

.sfilter__hours {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

/* --- 36.2 сейчас в эфире --- */
.sair {
  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
}

.sair__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.sair__eq {
  display: flex;
  gap: 3px;
  height: 16px;
  align-items: flex-end;
}

.sair__eq i {
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.sair__eq i:nth-child(2) { animation-delay: .18s; }
.sair__eq i:nth-child(3) { animation-delay: .36s; }
.sair__eq i:nth-child(4) { animation-delay: .54s; }
.sair__eq i:nth-child(5) { animation-delay: .72s; }

.sair__label {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: var(--accent);
}

.sair__at,
.sair__listening {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.sair__listening { margin-left: auto; }

.sair__grid {
  display: grid;
  grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1fr) clamp(130px, 14vw, 200px);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 36px) 0;
}

.sair__clock {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sair__time {
  font-family: var(--f-num);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.sair__until {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.sair__bar {
  display: block;
  height: 5px;
  background: rgba(var(--on-dark), .14);
}

.sair__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.sair__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sair__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.sair__badge {
  padding: 5px 9px;
  background: rgba(var(--on-dark), .14);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--ink);
}

.sair__kind {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.sair__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.sair__who {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin: 0;
}

.sair__host {
  font-family: var(--f-serif);
  font-size: clamp(18px, 2vw, 26px);
  font-style: italic;
  line-height: 1.1;
  color: rgba(var(--on-dark), .75);
}

/* кнопка эфира: на жёлтом всё тёмное */
.sair__listen {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

.sair__listen:hover { background: #fff; }

.sair__tri {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--on-accent);
}

.sair__now {
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .55);
}

.sair__ends {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  text-align: right;
}

.sair__endlab,
.sair__then {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.sair__left {
  font-family: var(--f-num);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

/* что дальше в эфире */
.sair__next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 26px);
  padding-top: clamp(18px, 2.2vw, 28px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.snext {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  transition: border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .14);
}

.snext.is-next {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.snext:hover { border-color: var(--accent); }

.snext__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.snext__at {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.snext.is-next .snext__at { color: var(--accent); }

.snext__in {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.snext__name {
  margin: 0;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.snext__host {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.15;
  color: rgba(var(--on-dark), .75);
}

.snext__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.snext__ch {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.snext__cta {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

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

/* --- 36.3 недельная сетка --- */
.wk {
  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
}

.wk__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 22px;
}

.wk__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.wk__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  margin-left: auto;
}

.wk__weeks {
  display: flex;
  border: 1px solid rgba(var(--on-dark), .28);
}

.wk__week {
  padding: 9px 12px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .6);
  cursor: pointer;
}

.wk__week.is-on { background: var(--accent); color: var(--on-accent); }
.wk__week:hover { color: var(--ink); }
.wk__week.is-on:hover { color: var(--on-accent); }

/* чипсы каналов */
.wk__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding-bottom: 16px;
}

.wk__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.wk__chip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 11px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.wk__chip b { font-weight: 400; opacity: .6; }
.wk__chip.is-on { background: var(--shell); color: #fff; }
.wk__chip:hover { background: var(--accent); color: var(--on-accent); }

.wk__cet {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* шапка дней и тело сетки живут на одинаковых колонках */
.wk__days,
.wk__body {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  gap: clamp(4px, .6vw, 10px);
}

.wk__days {
  padding-top: 12px;
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.wk__body { margin-top: 8px; }

.wday {
  padding: 7px 8px 9px;
  border-bottom: 1px solid rgba(var(--on-dark), .2);
}

.wday.is-today {
  background: rgba(255, 212, 0, .06);
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.wday__top {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.wday__name {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--ink);
}

.wday.is-today .wday__name { color: var(--accent); }

.wday__date {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  white-space: nowrap;
  color: rgba(var(--on-dark), .45);
}

.wday__count {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

/* часы слева и колонки дней */
.wk__hours,
.wgcol2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wk__hour {
  display: flex;
  height: 58px;
  align-items: flex-start;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.wgcol2.is-today { background: rgba(255, 212, 0, .04); }

/* слот сетки: только время, канал читается по левой грани */
.wsl {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 3px;
  justify-content: center;

  /* высота слота — по эталону 58px, но занятый растягивается содержимым;
     overflow:hidden обнуляет авто-минимум, поэтому задаём min-height */
  min-height: 58px;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  border-left: 2px solid rgba(var(--on-dark), .28);
  background: rgba(var(--on-dark), .2);
  text-align: left;
  cursor: pointer;
}

.wsl:hover { outline: 1px solid rgba(255, 212, 0, .5); }

.wsl--empty {
  border-left-color: transparent;
  background: rgba(var(--on-dark), .06);
  cursor: default;
}

.wsl--night { border-left-color: var(--accent); }
.wsl--deep { border-left-color: rgba(var(--on-dark), .5); }
.wsl--soul { border-left-color: rgba(var(--on-dark), .36); }
.wsl--talk { border-left-color: rgba(var(--on-dark), .22); }
.wsl--classic { border-left-color: rgba(var(--on-dark), .28); }
.wsl--jazz { border-left-color: rgba(var(--on-dark), .6); }

/* повтор: штриховка вместо заливки */
.wsl--rerun {
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .22) 0 4px,
      transparent 4px 8px);
}

/* эфир сейчас: жёлтая заливка, всё на ней тёмное */
.wsl--live {
  background: var(--c-yellow);
  border-left-color: var(--c-yellow);
}

.wsl__top {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.wsl__at {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .55);
}

.wsl__dur {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.wsl__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.wsl__host {
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .6);
}

.wsl--live .wsl__at,
.wsl--live .wsl__dur,
.wsl--live .wsl__host { color: rgba(0, 0, 0, .65); }
.wsl--live .wsl__name { color: var(--on-accent); }

.wsl__eq {
  display: flex;
  flex: none;
  gap: 1.5px;
  height: 9px;
  align-items: flex-end;
}

.wsl__eq i {
  width: 2px;
  height: 100%;
  background: var(--on-accent);
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.wsl__eq i:nth-child(2) { animation-delay: .2s; }
.wsl__eq i:nth-child(3) { animation-delay: .4s; }

/* подвал сетки */
.wk__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.wk__now,
.wk__legend {
  display: flex;
  gap: 9px;
  align-items: center;
}

.wk__now .meta { color: var(--accent); }

.wk__now .meta,
.wk__legend .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
}

.wk__legend .meta { color: rgba(var(--on-dark), .55); }

.wk__key {
  width: 14px;
  height: 14px;
}

.wk__key--live { background: var(--c-yellow); }

.wk__key--rerun {
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .22) 0 4px,
      transparent 4px 8px);
}

.wk__sub {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.wk__sub:hover { text-decoration: underline; }

/* --- 36.4 сегодня --- */
.tday {
  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
}

.tday__head,
.chgs__head,
.scal__head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  margin-bottom: 26px;
}

.tday__h2,
.chgs__h2,
.scal__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}

.tday__note,
.chgs__sum,
.scal__note {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.tday__grid {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 92px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

/* ось времени с меткой «сейчас» */
.tday__axis {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 4px 0;
  border-right: 1px solid rgba(var(--on-dark), .18);
}

.tday__tick {
  display: block;
  padding-right: 10px;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .45);
}

.tday__nowmark {
  position: absolute;
  top: 0;
  right: -1px;
  padding: 3px 6px;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  transform: translateX(100%);
}

.tday__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  align-content: start;
}

.tcard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  transition: border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .14);
}

.tcard.is-now {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.tcard:hover { border-color: var(--accent); }

.tcard__top {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  min-width: 0;
}

.tcard__at {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .55);
}

.tcard.is-now .tcard__at { color: var(--accent); }

.tcard__dur {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tcard__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.tcard__host {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.15;
  color: rgba(var(--on-dark), .75);
}

.tcard__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.tcard__ch {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.tcard__cta,
.snext__cta,
.spec__cta,
.chg__cta,
.capp__cta {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

.tcard__cta:hover,
.spec__cta:hover,
.chg__cta:hover,
.capp__cta:hover { color: var(--accent); }
.tcard.is-now .tcard__cta { color: var(--accent); }

.tday__foot,
.specs__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.tday__now {
  display: flex;
  gap: 9px;
  align-items: center;
}

.tday__now .meta { color: var(--accent); }

.tday__now .meta,
.tday__hours {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
}

.tday__hours { color: rgba(var(--on-dark), .55); }

.tday__cal,
.specs__all,
.chgs__sub {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.tday__cal:hover,
.specs__all:hover,
.chgs__sub:hover { text-decoration: underline; }

/* --- 36.5 специальные ночи --- */
.specs {
  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
}

.specs__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 28px;
}

.specs__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.specs__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-left: auto;
}

.specs__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 26px);
}

.spec {
  display: flex;
  flex: var(--grow, 1) 1 clamp(220px, 20vw, 280px);
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  transition: transform .2s ease, border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .14);
}

.spec:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}

.spec__shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .07) 0 9px,
      rgba(var(--on-dark), .03) 9px 18px);
}

/* кадр закрывает превью целиком; дата и метки лежат поверх, поэтому
   сверху идёт лёгкое затемнение — иначе подписи тонут на светлом снимке */
.spec__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spec__shot::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.spec__top {
  position: absolute;
  top: 11px;
  right: 11px;
  left: 11px;
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  min-width: 0;
}

.spec__date {
  flex: none;
  padding: 5px 9px;
  background: var(--shell);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: #fff;
}

.spec__cd {
  overflow: hidden;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.spec__next {
  position: absolute;
  bottom: 11px;
  left: 11px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 9px;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
}

.spec__eq {
  display: flex;
  gap: 1.5px;
  height: 11px;
  align-items: flex-end;
}

.spec__eq i {
  width: 2px;
  height: 100%;
  background: currentcolor;
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.spec__eq i:nth-child(2) { animation-delay: .2s; }
.spec__eq i:nth-child(3) { animation-delay: .4s; }

.spec__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.spec__figs {
  display: flex;
  gap: 9px;
  align-items: baseline;
  margin: 0;
}

.spec__hours {
  font-family: var(--f-num);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.spec__hlab {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.spec__ch {
  overflow: hidden;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.spec__host {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.15;
  color: rgba(var(--on-dark), .75);
}

.spec__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
  color: rgba(var(--on-dark), .68);
}

.spec__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.spec__slot {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.specs__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.specs__past {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 9px 12px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.specs__past b { font-weight: 400; opacity: .6; }
.specs__past:hover,
.specs__past:hover b { color: var(--accent); }

/* --- 36.6 правки недели --- */
.chgs {
  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
}

.chgs__grid {
  display: grid;
  grid-template-columns: clamp(96px, 10vw, 132px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-top: 14px;
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.chgs__days {
  display: flex;
  flex-direction: column;
  padding-right: 14px;
  border-right: 1px solid rgba(var(--on-dark), .18);
}

.chgs__day {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .12);
  background: none;
  cursor: pointer;
}

.chgs__day:hover { border-bottom-color: var(--accent); }

.chgs__day.is-on .meta,
.chgs__day.is-on b { color: var(--accent); }

.chgs__day .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--ink);
}

.chgs__day b {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.chgs__sub { margin-top: auto; padding-top: 12px; }

.chgs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);

  /* карточки стоят по своему содержимому, высоту ряда держит список дней */
  align-content: start;
}

.chg {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  transition: border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .14);
}

.chg:hover { border-color: var(--accent); }

.chg__top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.chg__tag {
  padding: 5px 9px;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: #fff;
}

.chg__tag--guest { background: var(--c-yellow); color: var(--on-accent); }
.chg__tag--swap { background: rgba(255, 255, 255, .2); }
.chg__tag--cancel { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.chg__tag--moved { background: rgba(255, 255, 255, .14); }

/* самая свежая правка подсвечена целиком */
.chg--new {
  border-color: rgba(255, 212, 0, .55);
  background: rgba(255, 212, 0, .06);
}

.chg--new .chg__when,
.chg--new .chg__now,
.chg--new .chg__arrow,
.chg--new .chg__cta { color: var(--c-yellow); }

.chg__when {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.chg__slot {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.chg__move {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.chg__new {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.chg__was {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.25;
  text-decoration: line-through;
  color: rgba(var(--on-dark), .45);
}

.chg__arrow { color: rgba(var(--on-dark), .45); }

.chg__now {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.chg__note {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .68);
}

.chg__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.chg__who {
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.15;
  color: rgba(var(--on-dark), .7);
}

/* --- 36.7 подписка на сетку --- */
.scal {
  padding: 0 var(--gutter) clamp(38px, 4.7vw, 60px);
  background: var(--tile) var(--shell);
}

.scal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.scal__apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.capp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  transition: border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .14);
}

.capp:hover { border-color: var(--accent); }

.capp__no {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.capp__name {
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.capp__figs {
  display: flex;
  gap: 9px;
  align-items: baseline;
  margin: 0;
}

.capp__num {
  font-family: var(--f-num);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.capp__lab {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.capp__bar {
  display: block;
  height: 3px;
  background: rgba(var(--on-dark), .14);
}

.capp__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

.capp__cta { margin: auto 0 0; text-align: left; }

.scal__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.scal__label {
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* адрес фида — кнопка: щелчок копирует его в буфер */
.scal__feed {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.4;
  word-break: break-all;
  color: var(--ink);
}

.scal__scopes,
.scal__leads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.scal__scope,
.scal__lead {
  padding: 8px 11px;
  border: 1px solid rgba(var(--on-dark), .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.scal__scope.is-on,
.scal__lead.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.scal__scope:hover,
.scal__lead:hover { border-color: var(--accent); color: var(--accent); }

.scal__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.scal__input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .5);
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.scal__input::placeholder { color: rgba(var(--on-dark), .62); }
.scal__input:focus { outline: none; border-bottom-color: var(--accent); }

.scal__send {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

.scal__send:hover { background: #fff; }

.scal__foot {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* выпадающий список фильтра */
.sfilter__drop { position: relative; }

.sfilter__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  min-width: 220px;
  margin: 6px 0 0;
  padding: 10px 0;
  list-style: none;
  border: 1px solid var(--dd-rule);
  border-radius: 12px;
  background: var(--dd-bg);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .35);
}

.sfilter__drop.is-open .sfilter__list { display: block; }

.sfilter__list button {
  display: block;
  width: 100%;
  padding: 9px 18px;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
  color: var(--dd-ink);
  cursor: pointer;
}

.sfilter__list button:hover { color: var(--dd-hover); }

.sfilter__val {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* слот вне выбранного канала гаснет, но остаётся на месте */
.wsl.is-dim {
  opacity: .28;
  pointer-events: none;
}

/* ближайшая ночь: жёлтая рамка, как у карточек эфира */
.spec.is-next {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.spec.is-next .spec__cd { color: var(--accent); }

/* кнопка эфира в карточке дня: пока играет — жёлтая, как и сама карточка */
.tcard__cta--live { color: var(--accent); }
.tcard__cta--live[aria-pressed="true"] { color: var(--accent); }

/* день без правок нельзя выбрать */
.chgs__day[disabled] {
  cursor: default;
  opacity: .45;
}

.chgs__day[disabled]:hover { border-bottom-color: rgba(var(--on-dark), .12); }


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

/* ответ формы: подтверждение зелёным жёлтым, ошибка — приглушённым */
.scal__foot.is-ok { color: var(--accent); }

/* ===================================================================
   37 — СТРАНИЦА DONATE
   =================================================================== */

/* --- 37.1 сколько стоит час эфира --- */
.dmoney {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) 0;
  background: var(--paper);
}

.dmoney__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 32px;
}

.dmoney__title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dmoney__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.dmoney__lede {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.6vw, 22px);
  font-style: italic;
  line-height: 1.2;
  color: rgba(var(--on-dark), .7);
}

.dmoney__price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  margin: 0 0 0 auto;
  text-align: right;
}

.dmoney__sum {
  font-family: var(--f-num);
  font-size: clamp(30px, 3.6vw, 56px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.dmoney__per {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.dmoney__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 320px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

/* чек за час */
.dbill {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(var(--on-dark), .16);
}

.dbill__top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(var(--on-dark), .28);
}

.dbill__who,
.dbill__when {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.dbill__when { margin-left: auto; }

.dbill__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 66px;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

/* последняя строка чека — «оторванный» край */
.dbill__row--last { border-bottom-color: rgba(var(--on-dark), .28); }

.dbill__no {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.dbill__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.dbill__cost {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .7);
}

.dbill__row.is-on .dbill__no,
.dbill__row.is-on .dbill__name,
.dbill__row.is-on .dbill__cost { color: var(--accent); }

.dbill__total {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-top: 15px;
}

.dbill__tlabel {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .55);
}

.dbill__tsum {
  margin-left: auto;
  font-family: var(--f-num);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.dbill__salary {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-top: 10px;
}

.dbill__salary .meta {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.dbill__salary .meta:last-child { margin-left: auto; }

/* правая колонка: что даёт сумма */
.dmoney__side {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.dmoney__slabel {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.dpract {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.dpract__sum {
  flex: none;
  font-family: var(--f-num);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.dpract.is-on .dpract__sum { color: var(--accent); }

.dpract__text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--on-dark), .68);
}

.dmoney__quote {
  margin: auto 0 0;
  font-family: var(--f-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
  color: rgba(var(--on-dark), .82);
}

.dmoney__who {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.dmoney__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.dmoney__year {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.4;
  color: rgba(var(--on-dark), .5);
}

.dmoney__pdf {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.dmoney__pdf:hover { text-decoration: underline; }

/* --- 37.2 выбор суммы --- */
.damount {
  --ink: #fff;

  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
  color: var(--ink);
}

.damount__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.damount__eq {
  display: flex;
  gap: 3px;
  height: 16px;
  align-items: flex-end;
}

.damount__eq i {
  width: 2px;
  height: 100%;
  background: var(--c-yellow);
  transform-origin: bottom;
  animation: aveq 1.1s ease-in-out infinite;
}

.damount__eq i:nth-child(2) { animation-delay: .18s; }
.damount__eq i:nth-child(3) { animation-delay: .36s; }
.damount__eq i:nth-child(4) { animation-delay: .54s; }
.damount__eq i:nth-child(5) { animation-delay: .72s; }

.damount__label {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: var(--c-yellow);
}

.damount__note,
.damount__count {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.damount__count { margin-left: auto; }

.damount__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px);
  gap: clamp(20px, 2.6vw, 44px);
  padding: clamp(22px, 2.6vw, 36px) 0 0;
}

.damount__left {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 24px);
  min-width: 0;
}

/* модель поддержки */
.dplan {
  display: flex;
  width: max-content;
  border: 1px solid rgba(255, 255, 255, .28);
}

.dplan__btn {
  padding: 10px 16px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
}

/* на жёлтом всё тёмное */
.dplan__btn.is-on { background: var(--c-yellow); color: var(--on-accent); }
.dplan__btn:hover { color: #fff; }
.dplan__btn.is-on:hover { color: var(--on-accent); }

/* карточки уровней */
.dtiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.dtier {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  transition: border-color .2s ease;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
  text-align: left;
  cursor: pointer;
}

.dtier:hover { border-color: var(--c-yellow); }

/* выбранный уровень залит жёлтым — значит всё внутри тёмное */
.dtier.is-on {
  border-color: var(--c-yellow);
  background: var(--c-yellow);
}

.dtier__top {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.dtier__label {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .5);
}

.dtier.is-on .dtier__label { color: rgba(20, 17, 16, .72); }

/* бейдж на жёлтой карточке инвертирован, иначе жёлтое на жёлтом */
.dtier__badge {
  flex: none;
  padding: 4px 8px;
  background: var(--on-accent);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--c-yellow);
}

.dtier__price {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.dtier__price b {
  font-family: var(--f-num);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.dtier.is-on .dtier__price b { color: var(--on-accent); }

.dtier__per {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .45);
}

.dtier.is-on .dtier__per { color: rgba(20, 17, 16, .6); }

.dtier__text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
}

.dtier.is-on .dtier__text { color: rgba(20, 17, 16, .82); }

.dtier__foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.dtier.is-on .dtier__foot { border-top-color: rgba(20, 17, 16, .25); }

.dtier__hours,
.dtier__count {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.dtier__count { margin-left: auto; color: rgba(255, 255, 255, .45); }
.dtier.is-on .dtier__hours { color: rgba(20, 17, 16, .65); }
.dtier.is-on .dtier__count { color: var(--on-accent); }

/* своя сумма */
.down {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.down__label {
  flex: 1 0 100%;
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.down__field {
  display: flex;
  flex: 1 1 220px;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.down__field:focus-within { border-bottom-color: var(--c-yellow); }

.down__cur {
  font-family: var(--f-num);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-yellow);
}

.down__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}

.down__input::placeholder { color: rgba(255, 255, 255, .62); }
.down__input:focus { outline: none; }

.down__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.down__chip {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
}

.down__chip:hover,
.down__chip.is-on { border-color: var(--c-yellow); color: var(--c-yellow); }

/* правая колонка — зеркало выбора */
.damount__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.dside__label,
.dside__flabel {
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.dside__sum {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.dside__price {
  font-family: var(--f-num);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--c-yellow);
}

.dside__per {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}

.dside__note {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
}

.dside__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dside__input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.2;
  color: #fff;
}

.dside__input::placeholder { color: rgba(255, 255, 255, .62); }
.dside__input:focus { outline: none; border-bottom-color: var(--c-yellow); }

.dside__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.dside__way {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
}

.dside__way.is-on {
  border-color: rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .12);
  color: var(--c-yellow);
}

.dside__way:hover { border-color: var(--c-yellow); color: var(--c-yellow); }

.dside__pay {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 15px 20px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

.dside__pay:hover { background: #fff; }

.dside__foot {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.4;
  color: rgba(255, 255, 255, .5);
}

.dside__foot.is-ok { color: var(--c-yellow); }

/* --- 37.3 что получает поддержавший --- */
.dperks {
  padding: 0 var(--gutter);
  background: var(--card);
}

.dperks__head,
.dways__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 28px;
}

.dperks__h2,
.dways__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.dperks__note,
.dways__note,
.dfaq__note,
.dmonth__when {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.dperks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.dperk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  transition: border-color .2s ease;
  border: 1px solid rgba(var(--on-dark), .16);
}

.dperk.is-on {
  border-color: rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.dperk:hover { border-color: var(--accent); }

.dperk__top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.dperk__no {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* тег уровня: на жёлтом текст тёмный */
.dperk__tag {
  margin-left: auto;
  padding: 4px 8px;
  background: rgba(var(--on-dark), .12);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .7);
}

.dperk.is-on .dperk__tag { background: var(--c-yellow); color: var(--on-accent); }
.dperk.is-on .dperk__no { color: var(--accent); }

.dperk__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.dperk__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .68);
}

.dperk__foot {
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.dperk__foot .meta {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.dperks__foot,
.dmonth__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.dperks__all,
.dmonth__money,
.dmonth__what,
.dmonth__count {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.dmonth__money { color: var(--accent); }
.dmonth__count { margin-left: auto; }

.dperks__sheet {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.dperks__sheet:hover { text-decoration: underline; }

/* --- 37.4 насколько оплачен месяц --- */
.dmonth {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.dmonth__head,
.dfaq__head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  margin-bottom: 26px;
}

.dmonth__h2,
.dfaq__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}

.dmonth__top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 44px);
  align-items: baseline;
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.dmonth__figs {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.dmonth__hours {
  font-family: var(--f-num);
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
}

.dmonth__paid {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.dmonth__lede {
  flex: 1 1 320px;
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.6vw, 21px);
  font-style: italic;
  line-height: 1.3;
  color: rgba(var(--on-dark), .78);
}

/* полоса недель: мера — эфир, а не деньги */
.dmonth__weeks {
  display: flex;
  gap: 3px;
  padding-top: 22px;
}

.dweek {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.dweek__bar {
  position: relative;
  display: block;
  height: 28px;
  background: rgba(var(--on-dark), .1);
}

.dweek__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: var(--accent);
}

/* последняя неделя ещё не оплачена — штриховка вместо заливки */
.dweek--rest .dweek__bar {
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .22) 0 4px,
      transparent 4px 8px);
}

/* курсор «оплачено до 20-го» */
.dweek--now .dweek__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 86%;
  width: 2px;
  background: var(--ink);
}

.dweek__label {
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.dweek--paid .dweek__label { color: rgba(var(--on-dark), .7); }

/* --- 37.5 другие способы помочь --- */
.dways {
  --ink: #fff;

  padding: 0 var(--gutter);
  background: var(--tile) var(--shell);
  color: var(--ink);
}

.dways__rail {
  display: flex;
  gap: clamp(12px, 1.6vw, 26px);
  overflow-x: auto;
  padding: clamp(16px, 2vw, 26px) 0 14px;
  border-top: 2px solid rgba(255, 255, 255, .5);
  scroll-snap-type: x mandatory;
}

.dway {
  display: flex;
  box-sizing: border-box;

  /* карточки делят строку поровну и не сжимаются ниже 240px:
     на широком экране справа не остаётся пустого хвоста,
     на узком лента по-прежнему прокручивается */
  flex: 1 0 clamp(240px, 22vw, 310px);
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  scroll-snap-align: start;
  transition: border-color .2s ease;
  border: 1px solid rgba(255, 255, 255, .16);
}

.dway.is-on {
  border-color: rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.dway:hover { border-color: var(--c-yellow); }

.dway__top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.dway__no {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(255, 255, 255, .45);
}

.dway.is-on .dway__no { color: var(--c-yellow); }

.dway__tag {
  margin-left: auto;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .7);
}

.dway.is-on .dway__tag { background: var(--c-yellow); color: var(--on-accent); }

.dway__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
}

.dway__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
}

/* подвал в две строки: иначе IBAN рядом с кнопкой теряет цифры */
.dway__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.dway__meta {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.4;
  color: rgba(255, 255, 255, .5);
}

.dway__cta {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-yellow);
  cursor: pointer;
}

.dway__cta:hover { text-decoration: underline; }

/* --- 37.6 частые вопросы --- */
.dfaq {
  padding: 0 var(--gutter) clamp(38px, 4.7vw, 60px);
  background: var(--paper);
}

.dfaq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 30px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.dfq {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.dfq__q {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 8px;
  font-family: var(--f-body);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.dfq__no {
  flex: none;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.dfq__no.is-on { color: var(--accent); }

.dfq__a {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .68);
}

/* ===================================================================
   38 — СТРАНИЦА BLOG
   Три колонки: рубрики слева, лента записей в центре, подписка справа.
   =================================================================== */
.blog {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) clamp(38px, 4.7vw, 60px);
  background: var(--paper);
}

.blog__line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.blog__label {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: var(--accent);
}

.blog__note {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.blog__rss {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.blog__rss:hover { text-decoration: underline; }

.blog__grid {
  display: grid;
  grid-template-columns: clamp(200px, 17vw, 270px) minmax(0, 1fr) clamp(240px, 20vw, 320px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(20px, 2.4vw, 34px);
}

/* --- 38.1 боковые блоки --- */
.bside,
.bright {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  min-width: 0;
}

.bbox {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

.bbox__title {
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bcat {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  background: none;
  cursor: pointer;
}

.bcat:hover { border-bottom-color: var(--accent); }

.bcat__name {
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.bcat__n {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bcat.is-on .bcat__name,
.bcat.is-on .bcat__n { color: var(--accent); }

/* архив: месяц, полоса, счётчик */
.bmonth {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.bmonth:hover { opacity: .7; }

.bmonth__name,
.bmonth__n {
  flex: none;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
}

.bmonth__bar {
  flex: 1;
  height: 2px;
  background: rgba(var(--on-dark), .12);
}

.bmonth__bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background: rgba(var(--on-dark), .45);
}

.bbox__all {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.bbox__all:hover { text-decoration: underline; }

.btags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.btag {
  padding: 7px 10px;
  border: 1px solid rgba(var(--on-dark), .16);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.btag:hover { border-color: var(--accent); color: var(--accent); }

/* --- 38.2 лента записей --- */
.blist {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 44px);
  min-width: 0;
}

/* у скрытой записи display:flex перебивал бы атрибут hidden */
.bpost[hidden] { display: none; }

.bpost {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: clamp(24px, 2.8vw, 40px);
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

/* кадр записи низкий: 21:9 */
.bpost__shot {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  cursor: pointer;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 9px,
      rgba(var(--on-dark), .16) 9px 18px);
}

.bpost__cat,
.bpost__read {
  position: absolute;
  z-index: 1;              /* плашки поверх притемнения кадра */
  top: 14px;
  padding: 5px 9px;
  background: var(--shell);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: #fff;
}

.bpost__cat { left: 14px; }
.bpost__read { right: 14px; }

/* рубрика первой записи жёлтая — значит текст тёмный */
.bpost__cat.is-on { background: var(--c-yellow); color: var(--on-accent); }

.bpost__credit {
  position: absolute;
  z-index: 1;
  bottom: 14px;
  left: 14px;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .7);
}

.bpost__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.bpost__date {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bpost__date.is-on { color: var(--accent); }

.bpost__by {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
  color: rgba(var(--on-dark), .7);
}

.bpost__comments {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bpost__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.bpost__title:hover { color: var(--c-yellow); }

/* отрывок идёт во всю ширину колонки — без max-width */
.bpost__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
  color: rgba(var(--on-dark), .6);
}

.bpost__cta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.bpost__cta:hover { color: var(--ink); }

/* пагинация */
.bpages {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
}

.bpages__more {
  padding: 13px 20px;
  border: 0;
  background: var(--shell);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.bpages__more:hover { background: var(--c-yellow); color: var(--on-accent); }

.bpages__nums {
  display: flex;
  border: 1px solid rgba(var(--on-dark), .28);
}

.bpage {
  padding: 10px 14px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .6);
  cursor: pointer;
}

.bpage.is-on { background: var(--c-yellow); color: var(--on-accent); }
.bpage:hover { color: var(--ink); }
.bpage.is-on:hover { color: var(--on-accent); }

.bpages__count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* --- 38.3 правый сайдбар --- */
.bmail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.bmail__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: var(--accent);
}

.bmail__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .72);
}

/* поле стоит на жёлтой подложке — линия и текст светлее обычного */
.bmail__input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .35);
  background: none;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
}

.bmail__input::placeholder { color: rgba(var(--on-dark), .62); }
.bmail__input:focus { outline: none; border-bottom-color: var(--accent); }

.bmail__btn {
  padding: 12px 16px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

.bmail__btn:hover { background: var(--ink); }

.bmail__note {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bpop {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  text-decoration: none;
}

.bpop:hover { border-bottom-color: var(--accent); }

.bpop__no {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bpop__no.is-on { color: var(--accent); }

.bpop__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.bpop__title {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
  color: var(--ink);
}

.bpop:hover .bpop__title { color: var(--accent); }

.bpop__meta {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* что в эфире прямо сейчас */
.bnow {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bnow__line {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}

.bnow__ch {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.bnow__show {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.bnow__host {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
  color: rgba(var(--on-dark), .7);
}

.bnow__all {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.bnow__all:hover { text-decoration: underline; }

/* выбранная рубрика, месяц и тег */
.bmonth.is-on .bmonth__name,
.bmonth.is-on .bmonth__n { color: var(--accent); }
.bmonth.is-on .bmonth__bar i { background: var(--accent); }
.btag.is-on { border-color: var(--accent); color: var(--accent); }

.bpages__more[disabled] {
  cursor: default;
  opacity: .5;
}

.bpages__more[disabled]:hover { background: var(--shell); color: #fff; }


.chg[hidden],
.snext[hidden] { display: none; }

/* ===================================================================
   39. BLOG POST — ЗАПИСЬ ЦЕЛИКОМ И ОТВЕТЫ
   Центральная колонка блога заменена одной записью: кадр 21:9, лид,
   врезка на двух линиях, список изменений, теги и переход к соседним
   записям. Ниже — ветка ответов с аватарами и форма без регистрации.
   Сайдбары и каркас берутся из секции 38.
   =================================================================== */
.bp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.bp__date {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.bp__by {
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
  color: rgba(var(--on-dark), .65);
}

.bp__comments {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bp__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 48px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.bp__lead {
  margin: 0;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.bp__p {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* врезка держится на двух жирных линиях, полей по бокам нет */
.bp__quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: clamp(8px, 1vw, 14px) 0;
  padding: clamp(16px, 2vw, 26px) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.bp__qtext {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.2vw, 30px);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}

.bp__qwho {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.bp__check {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(var(--on-dark), .16);
}

.bp__clabel {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bp__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.bp__no {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bp__no.is-on { color: var(--accent); }

.bp__text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.bp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.bp__tlabel {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bp__share,
.bcom__all,
.bcm__reply {
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
}

.bp__share {
  margin-left: auto;
  color: var(--accent);
}

.bp__share:hover { text-decoration: underline; }

.bp__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  padding-top: clamp(14px, 1.8vw, 22px);
}

.bpnav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(var(--on-dark), .16);
  text-decoration: none;
}

.bpnav:hover { border-color: var(--accent); }

.bpnav__dir {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bpnav__title {
  min-width: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}

.bpnav__date {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 39.2 ответы --- */
.bcom {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  min-width: 0;
  padding-top: clamp(20px, 2.4vw, 34px);
  border-top: 2px solid var(--ink);
}

.bcom__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
}

.bcom__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.bcom__note {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.bcom__list {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}

.bcm {
  display: grid;
  grid-template-columns: clamp(38px, 4vw, 52px) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  padding-bottom: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

/* ответ ведущего сдвинут вправо — видно, что это ветка */
.bcm.is-host { margin-left: clamp(20px, 4vw, 56px); }

.bcm__ava {
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 6px,
      rgba(var(--on-dark), .16) 6px 12px);
}

.bcm__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bcm__top {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: baseline;
  margin: 0;
}

.bcm__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.bcm.is-host .bcm__name { color: var(--accent); }

/* бейдж жёлтый — значит буквы тёмные */
.bcm__badge {
  padding: 3px 7px;
  background: var(--c-yellow);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: var(--on-accent);
}

.bcm__when,
.bcm__likes {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bcm__likes { letter-spacing: .14em; }

/* скрытые ответы: display:grid перебил бы атрибут hidden */
.bcm[hidden] { display: none; }

.bcm__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.bcm__foot {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0;
}

.bcm__reply { color: rgba(var(--on-dark), .45); }

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

.bcom__all {
  align-self: flex-start;
  letter-spacing: .16em;
  color: var(--accent);
}

.bcom__all:hover { text-decoration: underline; }

.bcom__form {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(var(--on-dark), .16);
}

.bcom__flabel {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bcom__ftext {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.bcom__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
}

.bcom__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* 200px — ширина колонки в паре имя/почта; у формы направление колонкой,
   поэтому базис задаём только внутри строки, иначе он станет высотой */
.bcom__row .bcom__field { flex: 1 1 200px; }

.bcom__field .meta {
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bcom__input,
.bcom__area {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .35);
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.bcom__area { resize: vertical; }

.bcom__input::placeholder,
.bcom__area::placeholder { color: rgba(var(--on-dark), .45); }

.bcom__input:focus,
.bcom__area:focus { border-bottom-color: var(--accent); outline: none; }

/* кнопка жёлтая — буквы на ней тёмные */
.bcom__send {
  align-self: flex-start;
  padding: 14px 22px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

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

.bcom__note2 {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.bcom__act {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
}

/* «поделиться» в служебной строке — серая, в отличие от жёлтой RSS в ленте */
.bshare {
  margin-left: auto;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

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

/* кадр записи закрывает подложку целиком, плашки лежат поверх */
.bpost__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* верх и низ кадра притемнены: рубрика, время чтения и подпись
   иначе теряются на светлых участках снимка */
.bpost__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 34%),
    linear-gradient(rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .5));
  pointer-events: none;
}

/* портрет в кружке аватара; у кого фото нет — остаётся штриховка */
.bcm__ava { overflow: hidden; }

.bcm__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================================================
   40. ОТКЛИК КНОПКИ ЭФИРА
   Между нажатием и первым звуком проходит от полусекунды до двух —
   столько занимает соединение с потоком. Без ответа кнопка выглядит
   нерабочей, и посетитель жмёт ещё раз. Пока идёт соединение, вокруг
   кнопки бежит дуга, а строка станции говорит, что происходит.
   =================================================================== */
.ring__btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid transparent;
  border-top-color: var(--c-yellow);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.is-loading .ring__btn::after {
  opacity: 1;
  animation: ring-wait .8s linear infinite;
}

@keyframes ring-wait {
  to { transform: rotate(360deg); }
}

/* значок на кнопке во время соединения приглушён: нажатие принято,
   но звука ещё нет — обещать паузу рано */
.is-loading .ring__glyph { opacity: .45; }

.player__track.is-wait { color: rgba(var(--on-dark), .7); }

@media (prefers-reduced-motion: reduce) {
  .is-loading .ring__btn::after { animation: none; opacity: .6; }
}

/* =============================================================================
   41. ТЕЛЕФОНЫ: ВНУТРЕННИЕ СТРАНИЦЫ
   Страницы, собранные после первого адаптива (архив, подкасты, диджеи,
   расписание, блог), держали настольные сетки с колонками в пикселях —
   на телефоне строка не влезала, документ становился шире экрана и вся
   страница ездила вбок. Здесь такие строки переводятся на flex-wrap:
   название уходит на свою строку, служебная графика прячется.
   ============================================================================= */
@media (max-width: 1100px) {
  /* блог: три колонки в одну, сайдбары под записями */
  .blog__grid { grid-template-columns: minmax(0, 1fr); }
  .bside { order: 2; }
  .bright { order: 3; }
}

@media (max-width: 820px) {
  /* --- строки-таблицы: архив, подкасты, сеты --- */
  .arrow,
  .podline,
  .setrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
  }

  .arrow__bar,
  .podline__bar,
  .setrow__stripe {
    align-self: stretch;
    width: 3px;
    height: auto;
  }

  /* название занимает свою строку целиком — иначе оно и сжимает всё прочее */
  .arrow__show,
  .podline__body,
  .setrow__set {
    flex: 1 0 100%;
    order: 3;
    min-width: 0;
  }

  .arrow__play,
  .podline__play,
  .setrow__acts { margin-left: auto; }

  /* графика в строке декоративная: на телефоне она только распирает */
  .arshape,
  .arrow__plays,
  .podline__plays,
  .setrow__plays,
  .setrow__wave { display: none; }

  .arrow__ch,
  .podline__series,
  .setrow__genre { display: none; }

  .arhead,
  .podhead,
  .sethead { display: none; }

  /* --- about: шаги в столбик --- */
  .step {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 10px;
  }

  .step__rail { grid-column: 2; }
  .step__when { grid-column: 2; }

  /* --- stations: способы связи друг под другом --- */
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way + .way { border-left: 0; border-top: 1px solid rgba(var(--on-dark), .14); }

  /* --- donate: чек и выбор суммы в одну колонку --- */
  /* чек ужимался до половины экрана: название студии ломалось на три
     строки, а «total per hour» вставало лесенкой */
  .dmoney__grid,
  .damount__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  /* четыре недели месяца в ряд: подписи «15—21 Aug · to the 20th» не
     влезали в четверть экрана — недели идут по две */
  .dmonth__weeks { flex-wrap: wrap; gap: 14px 12px; }
  .dweek { flex: 1 0 45%; }
  .dweek__label { white-space: normal; }

  /* --- schedule: подписка на календарь в одну колонку --- */
  /* две колонки по ~180px ломали всё: «8 600» вставало в две строки,
     адрес фида рвался посреди слова, кнопка «set reminders» — в три */
  .scal__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .scal__apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .capp__figs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
  .capp__num { white-space: nowrap; }

  /* --- schedule: полоса «сейчас в эфире» в одну колонку --- */
  /* три колонки резали всё: название ломалось пополам, «Listen live»
     вставало в две строки, «Now playing» обрывалось многоточием */
  .sair__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sair__when { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
  .sair__next { text-align: left; }

  /* --- schedule: сетка недели листается вбок --- */
  /* в одну колонку она разваливалась: сперва столбик часов, потом все
     передачи всех дней подряд. Теперь как на Shows — своя полоса
     прокрутки, колонка дня 118px */
  .wk__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .wk__days,
  .wk__body {
    grid-template-columns: 48px repeat(7, 118px);
    min-width: max-content;
  }

  .wday {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    min-width: 0;
  }

  .wday__top { min-width: 0; }

  /* «5 shows · 12 h live» не влезало в колонку и резалось многоточием */
  .wday__count { white-space: normal; }

  /* --- podcasts: страницы каталога и главы расшифровки --- */
  .podfoot__pages { flex: 1 1 auto; min-width: 0; }

  /* полоса глав шире экрана — пусть едет сама, а не тянет страницу */
  .podtr__strip {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* --- блог: номера страниц переносятся --- */
  .bpages__nums { flex-wrap: wrap; }

  /* карточки изменений: 260px не влезали в узкий экран */
  .chgs__list { grid-template-columns: minmax(0, 1fr); }

  /* --- внутренние страницы: заголовок и плеер друг под другом --- */
  /* в две колонки на 430 они налезали друг на друга: частота станции
     оказывалась под словом заголовка */
  .intro__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .intro__text,
  .intro__player { flex: 0 0 auto; width: 100%; min-width: 0; }

  /* --- подвал: ссылки в две колонки --- */
  /* три списка друг под другом растягивали подвал на 600px */
  .log__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .log__col--studio { grid-column: 1 / -1; }

  /* --- главная: строка «сейчас играет» --- */
  /* обложка и текст занимали ряд целиком, а таймеру и сердцу оставалась
     узкая колонка: название ломалось на три строки и налезало на часы */
  .nowbar__body { flex: 1 0 100%; order: 2; min-width: 0; }
  .nowbar__cover { order: 1; }
  .nowbar__time { order: 3; margin-left: 0; }
  .nowbar .round-btn { order: 4; margin-left: auto; }

  /* --- главная: ведущие по двое в ряд --- */
  /* девять портретов в столбик давали три с лишним тысячи пикселей —
     на телефоне до следующей секции приходилось долго листать */
  .hosts { display: block; }
  .hosts__list { flex-wrap: wrap; gap: 12px; width: 100%; }
  .host { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .host__name { font-size: 14px; }

  /* --- главная: тюнер --- */
  /* у эквалайзера стоит grid-column: span 2, и он в одиночку возвращал
     сетке вторую колонку — станция и шкала снова вставали рядом */
  .tuner__grid { grid-template-columns: minmax(0, 1fr); }

  /* Порядок на телефоне: обложка станции во всю ширину, под ней данные
     по центру, затем шкала и эквалайзер — как в других шаблонах владельца. */
  /* четыре полосы: снимок, данные станции, шкала, эквалайзер */
  .tuner__station {
    order: 1;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .tuner__dial { order: 2; }
  .tuner__eq { order: 3; grid-column: auto; }

  /* снимок станции — первой полосой во всю ширину, без полей */
  .tuner__art {
    height: auto;
    width: 100%;
    border-radius: 0;
  }

  /* на планшете обложке задана высота 96px — в полосе на всю ширину
     из-за неё под снимком оставалась пустая штриховка */
  .tuner__logo { height: 100%; }

  /* данные станции — вторая полоса, со своими полями и линией сверху */
  .tuner__station-body {
    min-width: 0;
    align-self: stretch;
    padding: 16px 20px 18px;
    border-top: 1px solid rgba(var(--on-dark), .1);
    text-align: center;
  }

  .tuner__station-body .meta--live,
  .tuner__tools { justify-content: center; }

  .tuner__name { font-size: 20px; }

  /* стрелки настройки — круглые, как на образце */
  .dial__arrow {
    border: 1px solid rgba(var(--on-dark), .28);
    border-radius: 50%;
  }

  /* разделители между полосами — сверху, раз они идут столбиком */
  .tuner__dial,
  .tuner__eq { border-top: 1px solid rgba(var(--on-dark), .1); }

  .tuner__station { border-top: 0; }

  /* --- главная: строка «дальше в эфире» --- */
  /* три карточки в ряд ужимались до 90px, и текст в них исчезал:
     подпись уходит наверх, карточки встают друг под другом */
  .next-cards { flex-direction: column; align-items: stretch; gap: 12px; }

  .next-cards__list { grid-template-columns: minmax(0, 1fr); }

  .next-card { min-width: 0; }
  .next-card__body { min-width: 0; overflow: hidden; }
  .next-card__img { width: 108px; }

  /* --- about: кнопка заявки не шире формы --- */
  .apply__send { max-width: 100%; box-sizing: border-box; }

  /* --- stations: подписи станций на шкале --- */
  /* семь названий стояли на своих отметках и превращались в кашу;
     выбор канала на телефоне делают чипсы жанров и карточки ниже */
  .fmscale--channels .fmscale__marks { display: none; }

  /* --- stations: карточка канала --- */
  /* название, частота и кнопка лежали поверх снимка и наезжали на него.
     Теперь снимок сверху, под ним данные и кнопка — в одну колонку */
  .cdet__head {
    position: static;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;   /* иначе частота встаёт по центру */
    padding: 14px 0 0;
  }

  .cdet__scrim { display: none; }

  .cdet__listen { align-self: flex-start; }

  /* --- stations: жанры вместо шкалы --- */
  /* каждый жанр стоял на своей отметке через position:absolute + left:%,
     и на телефоне подписи налезали друг на друга. Здесь это обычные
     чипсы в несколько рядов */
  .filter__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    margin-top: 14px;
    padding-top: 16px;
  }

  .genre,
  .genre:first-child,
  .genre:last-child {
    position: static;
    display: inline-flex;
    gap: 7px;
    align-items: baseline;
    padding: 8px 10px;
    border: 1px solid rgba(var(--on-dark), .16);
    transform: none;
  }

  .genre::before,
  .genre__tuned { display: none; }

  .genre.is-tuned { border-color: var(--accent); }

  /* --- stations: часы над сеткой недели и строки каналов --- */
  .week__hours { display: none; }

  .wrow {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
    padding: 12px 0;
  }

  /* Полоса суток занимала узкую вторую колонку и сжималась до 20px.
     На телефоне она уходит под строку канала во всю ширину: блоки
     передач читаются как отрезки, подписи внутри них не нужны. */
  .wrow__strip,
  .wrow__rail {
    grid-column: 1 / -1;
    height: 26px;
    margin-top: 2px;
  }

  .wblock b,
  .wblock span { display: none; }

  /* час суток различим по сетке, а идущая передача — по цвету */
  .wblock { height: 20px; }

  /* --- stations: блок потока в одну колонку --- */
  .stream__box { grid-template-columns: minmax(0, 1fr); }
  .stream__formats,
  .stream__link { border-left: 0; }
  .stream__list { display: flex; flex-wrap: wrap; gap: 8px; }

  .stream__ways { grid-template-columns: minmax(0, 1fr); }
  .way + .way { border-left: 0; border-top: 1px solid rgba(var(--on-dark), .14); }

  /* --- archive: поиск в одну колонку --- */
  /* четыре выпадающих списка в ряд ужимались, и «All channels» ломалось
     на две строки прямо посреди названия */
  .arsearch__row { flex-direction: column; align-items: stretch; gap: 16px; }

  /* в колонке flex-basis становится высотой: поле поиска раздувалось
     до 300px, а список выпадашек — до 420px */
  .arsearch__field,
  .arsearch__drops,
  .arsearch__go { flex: 0 0 auto; }

  .arsearch__drops { flex-direction: column; align-items: stretch; gap: 16px; }
  .ardrop { width: 100%; flex: 0 0 auto; }

  /* описание записи шло в две колонки по 190px — читать неудобно */
  .arlatest__text { grid-template-columns: minmax(0, 1fr); }
  .arfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archapters__grid { grid-template-columns: minmax(0, 1fr); }

  /* --- archive: карта дней и главы --- */
  .arday {
    grid-template-columns: 88px minmax(0, 1fr);
    row-gap: 4px;
    align-items: baseline;
  }

  .arday__len,
  .arday__go { display: none; }

  .archap { flex-wrap: wrap; }

  /* --- shows: сетка недели листается вбок --- */
  /* семь колонок на 430 сжимались до 50px, названия резались до «M...».
     Теперь колонка держит 118px, а вся сетка едет внутри своей полосы —
     страница при этом не двигается */
  .wgrid__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .wgrid__days,
  .wgrid__body {
    grid-template-columns: 48px repeat(7, 118px);
    min-width: max-content;
  }

  .wgslot { height: auto; min-height: 58px; }

  /* --- shows: полоса сегодняшнего дня листается вбок --- */
  /* восемь передач делили 394px, и подписи под ними наезжали друг на друга */
  .oaday {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .oaseg {
    flex: 0 0 auto;
    width: 128px;
    overflow: visible;
  }

  /* --- shows: этапы и поля заявки --- */
  /* «Until 30 Sep» шире своей четверти и налезало на «Oct» */
  .bhost__steps { flex-wrap: wrap; gap: 10px 12px; }
  .bhost__step { flex: 1 0 45%; }

  .bhost__two { grid-template-columns: minmax(0, 1fr); }

  /* --- shows: карточка эфира в одну колонку --- */
  /* снимок 210px и текст рядом: заголовок ломался по слогам,
     а «36 MIN IN» вставало в три строки */
  .onair__live {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0 26px;
  }

  .onair__act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

  /* --- shows: строка эфира --- */
  .onair__times,
  .onair__wave { flex-wrap: wrap; min-width: 0; }

  /* --- djs: будка в одну колонку --- */
  /* три колонки на 430: портрет 120px, данные и список треков по ~110px.
     Название трека резалось до «Ayo …», а «36 MIN INTO THE SET» вставало
     лесенкой в пять строк */
  .booth__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 0 24px;
  }

  /* портрет во всю ширину, под ним стаж и «следить» одной строкой */
  .booth__side { flex-direction: column; gap: 12px; }
  .booth__photo { width: 100%; }

  .booth__since { order: 2; }
  .booth__follow { order: 3; }

  .booth__times { flex-wrap: wrap; gap: 6px 14px; }
  .booth__player { flex-wrap: wrap; }

  /* --- djs: шапки таблиц и счётчики --- */
  .sets__thead,
  .booth__thead { display: none; }

  /* рейка гостей выходит за поле «в край» — на телефоне это лишние 24px */
  .guests__rail { margin-right: 0; padding-right: 0; }

  /* --- about: заявка на всю ширину --- */
  .join__cols { grid-template-columns: minmax(0, 1fr); }
  .join__right { padding-left: 0; }
  .apply { padding: 24px 20px; }

  /* --- stations: пара полей в столбик, метки внутри блока недели --- */
  .rq__pair { grid-template-columns: minmax(0, 1fr); }
  .wblock { overflow: hidden; }

  /* --- archive: ссылки на другие страницы --- */
  /* без рамок они сливались в одну сплошную строку */
  .arlist__pages { flex: 1 1 auto; min-width: 0; gap: 8px; }

  .arlist__page {
    padding: 8px 10px;
    border: 1px solid rgba(var(--on-dark), .16);
  }

  /* --- about: студия одной колонкой --- */
  /* три снимка в ряд ужимались до трети экрана, подписи ломались на
     три строки. Теперь снимок, под ним подпись, затем следующий */
  .studio__stills { flex-direction: column; gap: 22px; }

  .still--room,
  .still--desk,
  .still--decks { flex: 0 0 auto; width: 100%; }

  .still__img { width: 100%; height: auto; }

  /* приборы и плашки — тоже в одну колонку, друг под другом */
  .keep__grid,
  .studio__gear { grid-template-columns: minmax(0, 1fr); }

  .gear__note,
  .plate__note { overflow-wrap: anywhere; }

  /* всё в одну колонку: карточки ведущих, ступени взносов, поля заявки */
  .crew__grid { grid-template-columns: minmax(0, 1fr); }
  .keep__tiers { flex-direction: column; align-items: stretch; gap: 12px; }
  .apply__row { grid-template-columns: minmax(0, 1fr); }
  .plate + .plate { border-left: 1px solid rgba(var(--on-dark), .12); }

  /* --- stations: две колонки канала друг под другом --- */
  .cdet__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* заявка и лента студии тоже в столбик */
  .rq__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rq__form { padding-right: 0; }
  .rq__feed { padding-left: 0; }
  .logrow__body,
  .logrow__track,
  .logrow__label { min-width: 0; overflow-wrap: anywhere; }

  /* --- djs: полоса месяцев переносится --- */
  /* по трети экрана имена гостей резались до «Kaido Tamm · …» */
  .gtime { flex-wrap: wrap; gap: 14px 12px; }
  .gtime__month { flex: 1 0 46%; }

  .gtime__who { white-space: normal; }
}

@media (max-width: 420px) {
  /* --- совсем узкие экраны (320px) --- */
  .filter__row,
  .filter__sort,
  .onair__meta,
  .onair__times,
  .scal__send { flex-wrap: wrap; }

  .tday__cards,
  .tcards { grid-template-columns: minmax(0, 1fr); }

  .fmmark { overflow: hidden; }
}

@media (max-width: 560px) {
  /* на узком экране в строке остаются время, название и кнопка */
  .arrow__host,
  .arrow__len,
  .podline__host,
  .podline__len,
  .setrow__dj,
  .setrow__len { display: none; }
}


/* Последняя страховка от горизонтальной прокрутки: если где-то останется
   лишний пиксель, страница всё равно не поедет вбок. clip, а не hidden —
   hidden сделал бы html прокручиваемым и сломал бы прилипание. */
html { overflow-x: clip; }

/* =============================================================================
   42. CONTACT — ЛИНИЯ, АДРЕСА, КАРТА, ПИСЬМО
   Пять полос: живая линия студии с карточками связи, разбор «кому писать»,
   карта-прибор с координатами и радиусами, форма письма с шагами ответа
   и подписка с каналами. Фон полос чередуется paper / panel / card.
   ============================================================================= */
.ctline-sec {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) 0;
  background: var(--paper);
}

/* служебная строка: точка, статус, кто на деске, очередь */
.ctline__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.ctline__open {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: var(--accent);
}

.ctline__desk,
.ctline__queue {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.ctline__queue { margin-left: auto; }

.ctline__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 320px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
}

.ctline__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

.ctline {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(var(--on-dark), .16);
}

/* студийная линия выделена: она открыта прямо сейчас */
.ctline.is-on {
  border-color: rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.ctline__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.ctline__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.ctline.is-on .ctline__label { color: var(--accent); }

/* тег на жёлтой заливке — значит буквы тёмные */
.ctline__tag {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(var(--on-dark), .16);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.ctline.is-on .ctline__tag {
  border-color: transparent;
  background: var(--c-yellow);
  color: var(--on-accent);
}

/* номера и ники не должны выходить за карточку */
.ctline__value {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
  word-break: break-word;
}

.ctline.is-on .ctline__value { color: var(--accent); }

.ctline__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.ctline__hours {
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 42.2 правая колонка: что происходит сейчас --- */
.ctnow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.ctnow__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctnow__quote {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.8vw, 24px);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}

.ctnow__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.ctnow__key {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* значение переносится: «Open · 7 in queue» иначе подрезается */
.ctnow__val {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-align: right;
  color: var(--ink);
}

.ctnow__cta {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
}

.ctnow__cta:hover { text-decoration: underline; }

/* --- 42.3 кому писать --- */
.ctwho {
  padding: 0 var(--gutter);
  background: var(--panel);
}

/* шапка секции: 16px сверху и снизу, шаг 16px — по эталону */
.ctwho__head,
.ctfind__head,
.ctwrite__head,
.ctfollow__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
}

.ctwho__h2,
.ctfind__h2,
.ctwrite__h2,
.ctfollow__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
  text-transform: uppercase;
  color: var(--ink);
}

.ctwho__note,
.ctfind__note,
.ctwrite__note,
.ctfollow__note {
  margin: 0 0 0 auto;
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.ctwho__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.ctdesk {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(var(--on-dark), .16);
  transition: border-color .18s var(--ease);
}

.ctdesk:hover { border-color: var(--accent); }

.ctdesk.is-on { border-color: rgba(255, 212, 0, .5); }

.ctdesk__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.ctdesk__no {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctdesk.is-on .ctdesk__no { color: var(--accent); }

.ctdesk__reply {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.ctdesk__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}

.ctdesk__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.ctdesk__foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.ctdesk__mail {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: normal;
  text-decoration: none;
  color: var(--ink);
  word-break: break-word;
}

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

.ctdesk__who {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 42.4 карта: не иллюстрация, а прибор --- */
.ctfind-sec {
  padding: 0 var(--gutter);
  background: var(--card);
}

/* карта и полоса данных живут под общей линией секции */
.ctfind__body {
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.ctmap {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: 1px solid rgba(var(--on-dark), .16);
  /* штриховка стоит вместо карты: в проде сюда встаёт настоящая */
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--on-dark), .1) 0 9px,
      rgba(var(--on-dark), .16) 9px 18px);
}

.ctmap__bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  background: rgba(8, 8, 9, .72);
}

.ctmap__coords {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

.ctmap__copy {
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

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

.ctmap__live {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* центр карты: два радиуса, перекрестие и плашка студии */
.ctmap__pin {
  position: absolute;
  top: 52%;
  left: 46%;
}

.ctmap__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ctmap__ring--far {
  width: clamp(180px, 22vw, 280px);
  height: clamp(180px, 22vw, 280px);
  border: 1px dashed rgba(var(--on-dark), .22);
}

.ctmap__ring--near {
  width: clamp(104px, 13vw, 160px);
  height: clamp(104px, 13vw, 160px);
  border: 1px solid rgba(255, 212, 0, .35);
}

.ctmap__walk,
.ctmap__bike {
  position: absolute;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  white-space: nowrap;
  color: rgba(var(--on-dark), .45);
}

.ctmap__walk { top: clamp(-150px, -12vw, -96px); left: clamp(-88px, -7vw, -56px); }
.ctmap__bike { top: clamp(-84px, -7vw, -54px); left: clamp(-52px, -4vw, -30px); }

/* перекрестие: две линии и точка с жёлтым ореолом */
.ctmap__cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--c-yellow) 0 0) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--c-yellow) 0 0) 0 50% / 100% 1px no-repeat;
}

.ctmap__cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-yellow);
  box-shadow: 0 0 0 4px rgba(255, 212, 0, .2);
  transform: translate(-50%, -50%);
}

/* плашка жёлтая — значит текст тёмный */
.ctmap__tag {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 4px 8px;
  background: var(--c-yellow);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  white-space: nowrap;
  color: var(--on-accent);
  transform: translate(14px, -42px);
}

.ctmap__where {
  position: absolute;
  bottom: 14px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 32px);
  margin: 0;
}

.ctmap__wlabel,
.ctmap__city {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctmap__street {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.ctmap__act {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  margin: 0;
}

/* кнопка жёлтая — буквы тёмные */
.ctmap__open {
  padding: 10px 16px;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--on-accent);
}

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

.ctmap__hint {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .35);
}

.ctmap__scale {
  position: absolute;
  top: 56px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.ctmap__scale i {
  width: 74px;
  height: 1px;
  background: rgba(var(--on-dark), .45);
}

.ctmap__scale .meta {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* полоса данных под картой: четыре столбца на вертикальных линиях */
.ctfind__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(18px, 2.2vw, 26px);
}

.ctfind {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(12px, 1.6vw, 22px);
  border-right: 1px solid rgba(var(--on-dark), .16);
}

.ctfind:first-child { padding-left: 0; }
.ctfind:last-child { padding-right: 0; border-right: 0; }

.ctfind__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.ctfind__no,
.ctfind__label {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctfind__label.is-on { color: var(--accent); }

.ctfind__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* линия метрики выравнивается по низу, иначе ряд получается рваным */
.ctfind__meta {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--on-dark), .14);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 42.5 письмо в студию --- */
.ctwrite {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.ctwrite__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 320px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.ctform {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  min-width: 0;
}

.ctform__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* подпись и чипсы — одна группа: между ними 10px, а не шаг формы */
.ctform__what {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ctform__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.cttopic {
  padding: 8px 12px;
  border: 1px solid rgba(var(--on-dark), .16);
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .65);
  cursor: pointer;
}

.cttopic:hover { border-color: var(--accent); }

.cttopic.is-on {
  border-color: var(--c-yellow);
  background: rgba(255, 212, 0, .12);
  color: var(--accent);
}

.ctform__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
}

.ctform__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* 200px — ширина колонки в паре имя/почта, в столбик она не уходит */
.ctform__row .ctform__field { flex: 1 1 200px; }

.ctform__field .meta {
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctform__input,
.ctform__area {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .5);
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.ctform__area { resize: vertical; }

.ctform__input::placeholder,
.ctform__area::placeholder { color: rgba(var(--on-dark), .62); }

.ctform__input:focus,
.ctform__area:focus { border-bottom-color: var(--accent); outline: none; }

.ctform__act {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
}

/* кнопка жёлтая — буквы тёмные */
.ctform__send {
  padding: 14px 22px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

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

.ctform__note2 {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctnext {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.ctnext__label {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* каждый шаг отбит линией снизу — как в эталоне */
.ctstep {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.ctstep__no {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

.ctstep__text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.ctnext__foot {
  margin: auto 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 42.6 письмо недели и каналы --- */
.ctfollow {
  padding: 0 var(--gutter) clamp(30px, 3.2vw, 60px);
  background: var(--paper);
}

.ctfollow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 2.6vw, 44px);
  align-items: start;
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.ctletter {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ctletter__top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  margin: 0;
}

.ctletter__name {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.ctletter__when {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: var(--accent);
}

.ctletter__text {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.8vw, 21px);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.ctletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.ctletter__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .5);
  background: none;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.ctletter__input::placeholder { color: rgba(var(--on-dark), .62); }
.ctletter__input:focus { border-bottom-color: var(--accent); outline: none; }

.ctletter__send {
  flex: none;
  padding: 14px 22px;
  border: 0;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
}

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

.ctletter__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--on-dark), .16);
}

/* число не должно ломаться на две строки */
.ctletter__num {
  flex: none;
  font-family: var(--f-num);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--accent);
}

.ctletter__cap {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctsocs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(16px, 1.8vw, 26px);
}

.ctsoc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  text-decoration: none;
}

/* у двух нижних линии нет: ряд закрывает сама секция */
.ctsoc:nth-last-child(-n + 2) { border-bottom-color: transparent; }

.ctsoc:hover { border-bottom-color: var(--accent); }

.ctsoc__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.ctsoc__label {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.ctsoc.is-on .ctsoc__label { color: var(--accent); }

.ctsoc__count {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.ctsoc__handle {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  word-break: break-word;
}

.ctsoc__meta {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* -------------------------------------------------------------------------
   42.7 Contact на телефоне. Блок стоит после настольных правил секции 42:
   в CSS выигрывает тот, кто ниже, и первая попытка сложить страницу из
   секции 41 не работала — её перебивали правила ниже по файлу.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* --- contact: всё в одну колонку --- */
  .ctline__grid,
  .ctwrite__grid,
  .ctfollow__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  /* правые колонки перестают быть колонками — линия слева не нужна */
  .ctnow,
  .ctnext {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid rgba(var(--on-dark), .16);
  }

  .ctline__cards,
  .ctwho__grid { grid-template-columns: minmax(0, 1fr); }

  /* четыре столбца под картой — друг под другом, линии сверху */
  .ctfind__cols { grid-template-columns: minmax(0, 1fr); }

  .ctfind {
    padding: 14px 0 0;
    border-right: 0;
    border-top: 1px solid rgba(var(--on-dark), .16);
  }

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

  /* карта на телефоне выше: квадрат вместо широкой полосы */
  .ctmap { aspect-ratio: 4 / 5; }

  .ctmap__pin { top: 44%; }

  .ctmap__act { position: static; align-items: flex-start; margin-top: 12px; }

  .ctmap__where { position: static; margin-top: auto; padding: 0 16px 14px; }

  .ctmap__scale { display: none; }

  /* адрес и кнопка идут под картой — внутри рамки места нет */
  .ctmap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1 / 1;
  }

  .ctsocs { grid-template-columns: minmax(0, 1fr); }

  .ctsoc:nth-last-child(-n + 2) { border-bottom-color: rgba(var(--on-dark), .14); }
  .ctsoc:last-child { border-bottom-color: transparent; }
}

/* -------------------------------------------------------------------------
   42.8 Линия под полем подписки ложится на линию второй строки каналов.
   В эталоне они расходились на 35px; выравниваем только на широких экранах —
   на телефоне колонки идут друг под другом и равняться не с чем.
   ------------------------------------------------------------------------- */
@media (min-width: 821px) {
  .ctletter__form { margin-top: 34.7px; }
}

/* =============================================================================
   43. PRIVACY — КОРОТКАЯ ВЕРСИЯ, ТАБЛИЦА ХРАНЕНИЯ, ПРАВА
   Восемь полос: сводка с фактами в одну строку, список «чего мы не делаем»,
   таблица того, что хранится и сколько, две cookie без баннера, четыре
   подрядчика, форма запроса прав с предпросмотром письма и журнал версий.
   ============================================================================= */
.pvsum {
  padding: clamp(30px, 3.2vw, 60px) var(--gutter) 0;
  background: var(--paper);
}

.pvsum__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .18);
}

.pvsum__label {
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: var(--accent);
}

.pvsum__note,
.pvsum__ver {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pvsum__ver { margin-left: auto; }

.pvsum__grid {
  display: grid;
  /* колонка шире эталонной: «deletion request» и «answered in 5 days»
     должны читаться в одну строку каждая */
  grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 430px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
}

.pvsum__left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  min-width: 0;
}

.pvsum__lead {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.2vw, 30px);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.pvsum__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

.pvcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(var(--on-dark), .16);
}

/* первая карточка акцентная: с неё начинается вся политика */
.pvcard.is-on {
  border-color: rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.pvcard__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pvcard.is-on .pvcard__label { color: var(--accent); }

.pvcard__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}

.pvcard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* правая колонка: политика в пяти числах */
.pvfacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.pvfacts__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvfacts__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.pvfacts__key {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* значения переносятся: на узком окне «answered in 5 days» иначе режется */
.pvfacts__val {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-align: right;
  color: var(--ink);
}

.pvfacts__val.is-on { color: var(--accent); }

.pvfacts__mail {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--accent);
  word-break: break-word;
}

.pvfacts__mail:hover { text-decoration: underline; }

/* --- 43.2 общая шапка секций --- */
.pvhead {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
}

.pvhead__h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
  text-transform: uppercase;
  color: var(--ink);
}

.pvhead--small .pvhead__h2 { font-size: clamp(20px, 2.2vw, 32px); }

.pvhead__note {
  margin: 0 0 0 auto;
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

/* --- 43.3 чего мы не делаем --- */
.pvnever {
  padding: 0 var(--gutter);
  background: var(--panel);
}

.pvnever__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.pvnev {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(12px, 1.6vw, 22px);
  border-right: 1px solid rgba(var(--on-dark), .16);
}

.pvnev:first-child { padding-left: 0; }
.pvnev:last-child { padding-right: 0; border-right: 0; }

.pvnev__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}

.pvnev__no {
  font-size: 12px;
  letter-spacing: .16em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvnev__word {
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: var(--accent);
}

.pvnev__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--ink);
}

.pvnev__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* --- 43.4 таблица хранения --- */
.pvkeep {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.pvtable__head,
.pvrow {
  display: grid;
  grid-template-columns:
    clamp(150px, 17vw, 230px) minmax(0, 1fr) clamp(110px, 12vw, 150px) clamp(120px, 13vw, 170px);
  gap: clamp(12px, 1.6vw, 24px);
  align-items: baseline;
  margin: 0;
}

/* таблица открывается той же линией, что и другие секции */
.pvtable {
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.pvtable__head {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .28);
}

.pvtable__head .meta {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvrow {
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.pvrow__what {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pvrow__what b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.pvrow.is-on .pvrow__what b { color: var(--accent); }

.pvrow__detail {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvrow__why {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.pvrow__kept,
.pvrow__basis {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.pvrow.is-on .pvrow__kept { color: var(--accent); }

.pvkeep__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  margin: 0;
  padding-top: 14px;
}

.pvkeep__note {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvkeep__cta {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  color: var(--accent);
}

.pvkeep__cta:hover { text-decoration: underline; }

/* --- 43.5 cookie --- */
.pvcookies {
  padding: 0 var(--gutter);
  background: var(--card);
}

.pvcookies__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 340px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.pvcookies__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.pvcook {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 180px) minmax(0, 1fr) clamp(80px, 9vw, 110px);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: baseline;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  line-height: normal;
}

.pvcook__name {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: none;
  color: rgba(var(--on-dark), .65);
  word-break: break-word;
}

.pvcook.is-on .pvcook__name { color: var(--accent); }

.pvcook__text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.pvcook__life {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-align: right;
  color: rgba(var(--on-dark), .5);
}

.pvcookies__after {
  margin: 0;
  padding-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* жёлтая врезка: объяснение, почему баннера нет */
.pvbanner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.pvbanner__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: var(--accent);
}

.pvbanner__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.pvbanner__foot {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 212, 0, .3);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

/* --- 43.6 подрядчики --- */
.pvthird {
  padding: 0 var(--gutter);
  background: var(--panel);
}

.pvthird__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.pvco {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(var(--on-dark), .16);
  transition: border-color .18s var(--ease);
}

.pvco:hover { border-color: var(--accent); }

.pvco__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.pvco__no,
.pvco__where {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvco__where { margin-left: auto; }

.pvco__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}

.pvco__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.pvco__foot {
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--on-dark), .14);
  line-height: normal;
}

.pvco__link {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-decoration: none;
  color: var(--accent);
  word-break: break-word;
}

.pvco__link:hover { text-decoration: underline; }

/* --- 43.7 права: список слева, письмо справа --- */
.pvrights {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.pvrights__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid var(--ink);
}

.pvrights__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pvright {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
  background: none;
  text-align: left;
  cursor: pointer;
}

.pvright:last-child { border-bottom-color: transparent; }

.pvright:hover { border-bottom-color: var(--accent); }

/* галочка на жёлтом — значит знак тёмный */
.pvright__box {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(var(--on-dark), .3);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--on-accent);
}

.pvright.is-on .pvright__box {
  border-color: var(--c-yellow);
  background: var(--c-yellow);
}

.pvright__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pvright__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.pvright.is-on .pvright__title { color: var(--accent); }

.pvright__text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.pvright__sla {
  flex: none;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  white-space: nowrap;
  color: rgba(var(--on-dark), .45);
}

/* предпросмотр письма: человек видит, что именно отправит */
.pvmail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .05);
}

.pvmail__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 212, 0, .3);
}

.pvmail__label {
  font-size: 12px;
  letter-spacing: .2em;
  line-height: normal;
  color: var(--accent);
}

.pvmail__count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvmail__row {
  display: grid;
  grid-template-columns: clamp(58px, 7vw, 74px) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--on-dark), .12);
}

.pvmail__row--body { border-bottom: 0; }

.pvmail__key {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvmail__to,
.pvmail__val,
.pvmail__body {
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}

.pvmail__to { color: var(--accent); word-break: break-word; }

/* тело письма моноширинным — в этом весь приём секции */
.pvmail__body {
  line-height: 1.65;
  color: rgba(var(--on-dark), .65);
}

.pvmail__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 212, 0, .3);
}

/* кнопка жёлтая — буквы тёмные */
.pvmail__open {
  padding: 12px 18px;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
}

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

.pvmail__copy {
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(var(--on-dark), .5);
  cursor: pointer;
}

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

.pvrights__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.pvrights__note {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvrights__dpa {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  color: var(--accent);
}

.pvrights__dpa:hover { text-decoration: underline; }

/* --- 43.8 журнал версий и реквизиты --- */
.pvrec {
  padding: 0 var(--gutter) clamp(30px, 3.2vw, 60px);
  background: var(--paper);
}

.pvrec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.pvrec__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pvrec__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvver {
  display: grid;
  grid-template-columns: clamp(80px, 9vw, 110px) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.pvver__date {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  white-space: nowrap;
  color: rgba(var(--on-dark), .45);
}

.pvver__date.is-on { color: var(--accent); }

.pvver__text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.pvleg {
  display: grid;
  grid-template-columns: clamp(110px, 12vw, 150px) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.pvleg__key {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.pvleg__val {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}

.pvleg__val.is-on { color: var(--accent); }

/* -------------------------------------------------------------------------
   43.9 Privacy на телефоне. Блок стоит после настольных правил секции 43:
   в CSS выигрывает тот, кто ниже по файлу.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .pvsum__grid,
  .pvcookies__grid,
  .pvrights__grid,
  .pvrec__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  /* правая колонка перестаёт быть колонкой — линия слева не нужна */
  .pvfacts {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid rgba(var(--on-dark), .16);
  }

  .pvsum__cards,
  .pvthird__grid { grid-template-columns: minmax(0, 1fr); }

  /* пять колонок «чего мы не делаем» — друг под другом, линии сверху */
  .pvnever__cols { grid-template-columns: minmax(0, 1fr); }

  .pvnev {
    padding: 14px 0 0;
    border-right: 0;
    border-top: 1px solid rgba(var(--on-dark), .16);
  }

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

  /* таблица хранения: заголовки колонок прячем, строка читается сверху вниз */
  .pvtable__head { display: none; }

  .pvrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .pvrow__kept,
  .pvrow__basis { color: rgba(var(--on-dark), .45); }

  .pvcook { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pvcook__life { text-align: left; }

  .pvright { grid-template-columns: 22px minmax(0, 1fr); }
  .pvright__sla { grid-column: 2; }

  .pvmail__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* =============================================================================
   44. TERMS — ПОТОК, ПРАВА, ДЕНЬГИ, ЧЕГО НЕ ОБЕЩАЕМ
   Полосы после короткой версии (она делит разметку с Privacy): что можно и
   о чём спросить, три слоя прав, присланное и модерация, деньги и брони,
   честная реплика об отказе от обещаний. Журнал версий общий с Privacy.
   ============================================================================= */
.tmstream {
  padding: 0 var(--gutter);
  background: var(--panel);
}

.tmstream__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(200px, 20vw, 280px);
  gap: clamp(16px, 2.2vw, 34px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.tmcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tmcol__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmline {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.tmline__sign {
  flex: none;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
}

.tmline--yes .tmline__sign { color: var(--accent); }
.tmline--no .tmline__sign { color: rgba(var(--on-dark), .45); }

.tmline__text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* у правой колонки текст приглушён: это не запрет, а граница */
.tmline--no .tmline__text { color: rgba(var(--on-dark), .58); }

/* жёлтая врезка: запись дома — всегда можно */
.tmtape {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 212, 0, .5);
  background: rgba(255, 212, 0, .06);
}

.tmtape__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: var(--accent);
}

.tmtape__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.tmtape__foot {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 212, 0, .3);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: var(--accent);
}

/* --- 44.2 три слоя прав --- */
.tmrights {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.tmrights__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.tmlayer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 clamp(12px, 1.6vw, 22px);
  border-right: 1px solid rgba(var(--on-dark), .16);
}

.tmlayer:first-child { padding-left: 0; }
.tmlayer:last-child { padding-right: 0; border-right: 0; }

.tmlayer__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.tmlayer__no,
.tmlayer__owner {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmlayer__owner { margin-left: auto; }

.tmlayer__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}

.tmlayer__title.is-on { color: var(--accent); }

.tmlayer__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.tmlayer__meta {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--on-dark), .14);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmrights__foot,
.tmsent__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--on-dark), .14);
}

.tmrights__note {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmrights__cta {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-decoration: none;
  color: var(--accent);
}

.tmrights__cta:hover { text-decoration: underline; }

/* --- 44.3 что вы присылаете --- */
.tmsent {
  padding: 0 var(--gutter);
  background: var(--card);
}

.tmsent__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 340px);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.tmsent__table { min-width: 0; }

.tmsent__head,
.tmsent__row {
  display: grid;
  grid-template-columns: clamp(130px, 15vw, 200px) minmax(0, 1fr) clamp(120px, 13vw, 170px);
  gap: clamp(12px, 1.6vw, 24px);
  align-items: baseline;
  margin: 0;
}

.tmsent__head {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--on-dark), .28);
}

.tmsent__head .meta {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmsent__row {
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--on-dark), .14);
}

.tmsent__what {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.tmsent__row.is-on .tmsent__what { color: var(--accent); }

.tmsent__use {
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.tmsent__pull {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .5);
}

.tmsent__row.is-on .tmsent__pull { color: var(--accent); }

.tmmod {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.tmmod__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmmod__foot {
  margin: auto 0 0;
  padding-top: 11px;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 44.4 деньги и брони --- */
.tmmoney {
  padding: 0 var(--gutter);
  background: var(--panel);
}

.tmmoney__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

.tmcard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(var(--on-dark), .16);
  transition: border-color .18s var(--ease);
}

.tmcard:hover { border-color: var(--accent); }

.tmcard.is-on { border-color: rgba(255, 212, 0, .5); }

.tmcard__top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.tmcard__no,
.tmcard__tag {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmcard__tag { margin-left: auto; }

.tmcard.is-on .tmcard__no { color: var(--accent); }

.tmcard__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}

.tmcard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

.tmcard__meta {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--on-dark), .14);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

/* --- 44.5 чего мы не обещаем --- */
.tmliab {
  padding: 0 var(--gutter);
  background: var(--paper);
}

.tmliab__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 20vw, 280px);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: end;
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 2px solid rgba(var(--on-dark), .5);
}

/* реплика набрана серифом: этим держится вся секция */
.tmliab__quote {
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(24px, 3.2vw, 42px);
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: pretty;
}

.tmuptime {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid rgba(var(--on-dark), .16);
}

.tmuptime__num {
  font-family: var(--f-num);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.tmuptime__label,
.tmuptime__off {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmliab__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(14px, 1.6vw, 18px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(var(--on-dark), .16);
}

.tmrisk {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 clamp(12px, 1.6vw, 22px);
  border-right: 1px solid rgba(var(--on-dark), .16);
}

.tmrisk:first-child { padding-left: 0; }
.tmrisk:last-child { padding-right: 0; border-right: 0; }

.tmrisk__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  color: rgba(var(--on-dark), .45);
}

.tmrisk__label.is-on { color: var(--accent); }

.tmrisk__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--on-dark), .65);
  text-wrap: pretty;
}

/* оговорка обязательна: это юридическая часть, а не украшение */
.tmliab__law {
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--on-dark), .14);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1.5;
  color: rgba(var(--on-dark), .45);
}

.tmrec__note {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1.5;
  color: rgba(var(--on-dark), .45);
}

/* -------------------------------------------------------------------------
   44.6 Terms на телефоне. Блок после настольных правил секции 44.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .tmstream__grid,
  .tmsent__grid,
  .tmliab__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* врезка и модерация перестают быть колонками */
  .tmmod,
  .tmuptime {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid rgba(var(--on-dark), .16);
  }

  .tmmoney__grid { grid-template-columns: minmax(0, 1fr); }

  /* слои прав и риски — друг под другом, линии сверху */
  .tmrights__cols,
  .tmliab__cols { grid-template-columns: minmax(0, 1fr); }

  .tmlayer,
  .tmrisk {
    padding: 14px 0 0;
    border-right: 0;
    border-top: 1px solid rgba(var(--on-dark), .16);
  }

  .tmlayer:first-child,
  .tmrisk:first-child { padding-top: 0; border-top: 0; }

  /* таблица присланного: шапку прячем, строка читается сверху вниз */
  .tmsent__head { display: none; }

  .tmsent__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* даты версий на телефоне идут своей строкой: в колонке 80px они не влезают */
@media (max-width: 820px) {
  .pvver,
  .pvleg { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .pvver__date { white-space: normal; }
}

/* -------------------------------------------------------------------------
   44.7 Ведущие на Shows: девять карточек не влезают в ряд и раньше
   переносились на вторую строку. Теперь ряд один и листается вбок.
   ------------------------------------------------------------------------- */
@media (min-width: 821px) {
  .hsts__grid {
    display: flex;
    gap: clamp(12px, 1.6vw, 26px);
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .hsts__grid .hcard {
    flex: 0 0 clamp(210px, 17vw, 280px);
    scroll-snap-align: start;
  }
}

/* обложка следующей передачи закрывает штриховку целиком */
.oanext__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* выбранная в полосе дня передача и включённое напоминание */
.oaseg.is-picked .oaseg__name { color: var(--accent); }
.oaseg.is-picked .oaseg__bar { background: var(--c-yellow); }

.oanext__remind.is-on { color: var(--accent); }

/* приборные слои поверх карты и кликабельны */
.ctmap__bar,
.ctmap__pin,
.ctmap__where,
.ctmap__act,
.ctmap__scale { z-index: 2; }

/* --- карта квартала: тайлы OSM в тёмно-жёлтой гамме станции --- */
.ctmap__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
}

/* красим только сами тайлы: знак студии и подписи остаются в своём цвете */
.ctmap__canvas .leaflet-tile-pane {
  filter: invert(1) hue-rotate(178deg) saturate(.45) brightness(.82) contrast(1.08) sepia(.35);
}

.ctmap__canvas .leaflet-container { background: #141416; font-family: var(--f-mono); }

/* Управление опущено под верхнюю полосу с координатами: она лежит выше
   по слою и перехватывала нажатие на «+». */
.ctmap__canvas .leaflet-top .leaflet-control-zoom { margin-top: 58px; }

/* элементы управления в стиле станции */
.ctmap__canvas .leaflet-control-zoom a {
  border: 1px solid rgba(var(--on-dark), .2);
  background: rgba(8, 8, 9, .82);
  color: var(--ink);
}

.ctmap__canvas .leaflet-control-zoom a:hover { border-color: var(--c-yellow); color: var(--accent); }

.ctmap__canvas .leaflet-control-attribution {
  background: rgba(8, 8, 9, .72);
  font-size: 12px;
  color: rgba(var(--on-dark), .5);
}

.ctmap__canvas .leaflet-control-attribution a { color: rgba(var(--on-dark), .65); }

/* знак студии: то же перекрестие с точкой и жёлтой плашкой, что было
   нарисовано, но привязанное к координатам дома */
.ctmark { position: relative; }

.ctmark__cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--c-yellow) 0 0) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--c-yellow) 0 0) 0 50% / 100% 1px no-repeat;
}

.ctmark__cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-yellow);
  box-shadow: 0 0 0 4px rgba(255, 212, 0, .2);
  transform: translate(-50%, -50%);
}

/* плашка жёлтая — значит буквы тёмные */
.ctmark__tag {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 4px 8px;
  background: var(--c-yellow);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  transform: translate(14px, -42px);
}

/* подписи радиусов стоят на самих окружностях */
.ctring {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--on-dark), .5);
}

.ctring--foot { color: rgba(255, 212, 0, .7); }

/* =============================================================================
   45. ТЮНЕР: СТРЕЛОЧНЫЕ ИНДИКАТОРЫ
   Правая колонка тюнера показывает либо полосы эквалайзера, либо два
   циферблата. Переключает ссылка в шапке колонки: она же меняет свою
   подпись. Стрелка ходит от -50° до +28° вокруг точки 150,145 внутри
   своей SVG — так же, как в приборе радиотюнера владельца.
   ============================================================================= */
.eq__toggle {
  margin-left: auto;
  /* подпись отодвинута от правого края колонки */
  padding-right: 30px;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}

.eq__toggle:hover { text-decoration: underline; }

/* панель занимает ровно столько, сколько нужно циферблатам: с flex:1 она
   тянулась на остаток колонки и весь тюнер вырастал в высоту */
.vu {
  --vu-gap: clamp(4px, .45vw, 8px);

  display: flex;
  gap: var(--vu-gap);
  overflow: hidden;
  flex: 0 0 auto;
  align-items: flex-start;
  min-width: 0;
  /* свободное место уходит наверх — приборы стоят прямо над строкой VOL */
  margin-top: auto;
  /* правый край вровень с кнопкой play: у неё такой же отступ справа,
     иначе циферблаты выходили за строку громкости */
  padding-right: calc(6.25% - var(--eq-gap-part) - 17px);
}

/* у обеих панелей display перебил бы атрибут hidden — гасим явно */
.vu[hidden],
.eq__bands[hidden] { display: none; }

/* равные половины панели: базис 0 делит остаток после зазора поровну,
   а прежний max-width оставлял справа щель в ползазора */
.vu__box {
  flex: 1 1 0;
  min-width: 0;
}

.vu__dial,
.vu__svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* стрелка двигается скриптом; переход не нужен — ход считает пружина */
.vu__needle { transition: none; }

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

/* на телефоне циферблаты идут друг под другом: вдвоём они ужимаются
   до неразличимых, а шкалу нужно читать */
@media (max-width: 560px) {
  .vu { flex-direction: column; gap: 10px; }
}