/* Шрифты лежат на сайте (src/fonts), без обращений к Google */
@font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/onest-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/onest-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-display: swap; font-weight: 900; src: url(/fonts/unbounded-cyrillic-900-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-display: swap; font-weight: 900; src: url(/fonts/unbounded-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --red — фирменный красный для кругов «играть», линий, крупных цифр и заголовков.
   --red-t — красный для обычного текста и ссылок (контраст не ниже 4,5:1 к фону),
   --red-btn — фон кнопок с белой надписью (белый на нём — 4,9:1); --red-t даёт 4,5:1 и на бледно-красном --red-soft. Новые красные надписи красить --red-t. */
/* Цвета. Светлая тема — по умолчанию; тёмная включается атрибутом data-theme="dark" у <html>:
   его ставит строчка в <head> (scripts/build.mjs, THEME_TAG) по настройке устройства или по выбору в подвале.
   --bg — фон страницы, --card — всплывающие окна и мини-плеер, --pop — тёмные плашки (куки, подсказки). */
:root {
  --red: #e2483d; --red-soft: #fdeceb; --ink: #23201d; --soft: #75706b; --line: #eeeae6; --hover: #f8f6f4;
  --bg: #fff; --bg0: rgba(255,255,255,0); --card: #fff; --mini: rgba(255,255,255,.97); --pop: #23201d; --foot: #75706b;
  --red-t: #c8382e; --red-btn: #cf3b30;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --red: #e5544a; --red-soft: #33191a; --ink: #f2eeea; --soft: #a39c95; --line: #34302c; --hover: #26221f;
  --bg: #171513; --bg0: rgba(23,21,19,0); --card: #24211e; --mini: rgba(40,36,33,.97); --pop: #2f2b28; --foot: #8f8881;
  --red-t: #ec6a60; --red-btn: #cf3b30;
  color-scheme: dark;
}
#prg {
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 Onest, system-ui, -apple-system, sans-serif;
  text-align: left; padding: 40px 0 160px; -webkit-font-smoothing: antialiased;
}
#prg *, #prg-player * { box-sizing: border-box; }
#prg button { font: inherit; color: inherit; }
#prg a { color: inherit; }
#prg .w { max-width: 680px; margin: 0 auto; padding: 0 20px; }
#prg :focus-visible, #prg-player :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Шапка */
#prg .head { display: grid; grid-template-columns: 112px 1fr; gap: 24px; align-items: center; }
/* На обложке кольцо занимает ~72% ширины, вокруг много красного поля — приближаем, чтобы кольцо почти касалось края круга */
#prg .ava-w { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--red-soft); display: block; }
#prg .ava { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.3); }
#prg h1 { margin: 0; font: 900 34px/1 Unbounded, Onest, sans-serif; letter-spacing: -.01em; }
/* Длинные слова в заголовках (например, «Метаконсультирование») переносятся, а не вылезают за край телефона */
#prg h1, #prg h2, #prg .ttl b, #prg .others b { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
/* «подкаст» мелко прописными над названием на главной — часть h1, чтобы поисковики читали «подкаст Пироги» */
#prg .head h1 .kick { display: block; margin: 0 0 6px; font: 600 12px/1 Onest, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
#prg .lead { margin: 8px 0 0; color: var(--soft); max-width: 50ch; }
/* ведущие прямо в описании: фото размером с букву, не отрывается от имени при переносе */
#prg .lead .person { white-space: nowrap; color: var(--ink); font-weight: 500; text-decoration: none; }
#prg .lead a.person:hover { color: var(--red-t); }
#prg .lead .person img { width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; background: var(--line); vertical-align: -0.28em; margin-right: 0.3em; }
#prg .stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
#prg .stats li { font-size: 14px; color: var(--soft); }
#prg .stats b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: proportional-nums; letter-spacing: -.02em; }
#prg .acts { display: flex; gap: 10px; margin-top: 24px; }
#prg .btn { border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
#prg .btn svg { width: 14px; height: 14px; flex: none; }
#prg .btn .m { display: none; }
#prg .btn.main { background: var(--red-btn); color: #fff; }
#prg .btn.sec { background: var(--hover); }
#prg .btn.sec[aria-expanded="true"] { background: var(--red-soft); color: var(--red-t); }
#prg .subs { display: none; margin-top: 14px; flex-wrap: wrap; gap: 8px; }
#prg .subs.open { display: flex; }
#prg .lnk { display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px 7px 9px; border-radius: 999px; background: var(--hover); text-decoration: none; font-size: 14px; }
#prg .lnk:hover { background: var(--red-soft); color: var(--red-t); }
#prg .lnk small { color: var(--soft); font-size: 13px; }
#prg .len-m { display: none; font-style: normal; }
#prg .sub-more { display: contents; }
#prg .sub-more[hidden] { display: none; }
#prg .lnk.more-btn { border: 0; cursor: pointer; font: inherit; font-size: 14px; color: var(--soft); padding: 7px 14px; }
#prg .lnk img { width: 18px; height: 18px; border-radius: 5px; flex: none; display: block; }

/* Сезоны */
#prg .bar { position: sticky; top: 0; z-index: 4; background: var(--bg); margin: 40px -20px 0; padding: 0 20px; border-bottom: 1px solid var(--line); }
#prg .tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
#prg .tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 0 12px; font-weight: 600; font-size: 17px; color: var(--soft); cursor: pointer; }
#prg .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
/* числа у вкладок не показываем: общий счётчик выпусков есть выше, а «2» и «1» у видео и статей только подчёркивают, что их мало */
#prg .tab sup { display: none; }
#prg .seasons { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 0 14px; }
#prg .seawrap { position: relative; }
#prg .seawrap[hidden] { display: none; }
#prg .seasons.drag { cursor: grabbing; user-select: none; }
#prg .seasons.drag .sea { cursor: grabbing; }
#prg .sea-arr { display: none; position: absolute; top: 12px; bottom: 14px; z-index: 1; width: 56px; border: 0; padding: 0; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }
#prg .sea-arr.l { left: 0; text-align: left; background: linear-gradient(90deg, var(--bg) 45%, var(--bg0)); }
#prg .sea-arr.r { right: 0; text-align: right; background: linear-gradient(270deg, var(--bg) 45%, var(--bg0)); }
#prg .sea-arr:hover { color: var(--red-t); }
@media (hover: hover) and (pointer: fine) {
  #prg .seawrap.can-l .sea-arr.l, #prg .seawrap.can-r .sea-arr.r { display: block; }
}
#prg .seasons::-webkit-scrollbar { display: none; }
#prg .sea { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; }
#prg .sea[aria-pressed="true"] { border-color: var(--red); background: var(--red-soft); color: var(--red-t); }
#prg .faces { display: inline-flex; }
#prg .faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); background: var(--line); }
#prg .faces img + img { margin-left: -9px; }

/* Список */
#prg .group { margin-top: 36px; }
#prg .group h2 { margin: 0; font: 900 21px/1.15 Unbounded, Onest, sans-serif; }
#prg .group .who { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--soft); font-size: 14px; }
#prg .group .who .faces img { width: 28px; height: 28px; }
#prg .about { margin: 12px 0 0; font-size: 16px; max-width: 60ch; }
#prg .group > .about { color: var(--soft); }   /* описания сезонов — серым (10.10.2026) */
#prg .note { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--hover); font-size: 16px; }
#prg .note b { font-weight: 600; }
#prg ol { list-style: none; margin: 14px 0 0; padding: 0; }
#prg .ep { border-top: 1px solid var(--line); }
#prg .ep:last-child { border-bottom: 1px solid var(--line); }
#prg .row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; }
#prg .play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--red); color: #fff !important; display: grid; place-items: center; cursor: pointer; padding: 0; }
#prg .play svg { width: 15px; height: 15px; }
#prg .play[disabled] { background: var(--line); color: var(--soft) !important; cursor: default; }
#prg .ttl { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 0; }
#prg .ttl b { display: block; font-weight: 600; font-size: 17px; line-height: 1.35; }
#prg .ttl span { display: block; margin-top: 2px; font-size: 14px; color: var(--soft); }
#prg .ep.cur .ttl b { color: var(--red-t); }
/* метка «Архив · 2018» у самых первых выпусков (шкала шрифтов: 13 — мелкие пометки) */
#prg .ttl .arch-tag { display: inline-block; margin: 0 8px 2px 0; padding: 1px 8px; border-radius: 999px; background: var(--red-soft); color: var(--red-t); font-style: normal; font-weight: 600; font-size: 13px; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
#prg .len { font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* «Ещё N выпусков» под свёрнутым сезоном; отступ — как у названий выпусков */
#prg .sea-more { display: block; width: 100%; min-height: 48px; padding: 12px 0 12px 58px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--red-t); font-weight: 600; font-size: 16px; cursor: pointer; }
#prg .sea-more::after { content: ' ↓'; }
#prg .sea-more[aria-expanded="true"]::after { content: ' ↑'; }
#prg .sea-more:hover { background: var(--hover); }
#prg ol:has(+ .sea-more) .ep:last-child { border-bottom: 0; }
#prg .prog { height: 3px; background: var(--line); border-radius: 2px; margin-top: 8px; max-width: 200px; }
#prg .prog i { display: block; height: 100%; background: var(--red); border-radius: 2px; }

/* Раскрытый выпуск */
#prg .more { display: none; padding: 0 0 22px 58px; }
#prg .ep.open .more { display: block; }
#prg .desc { font-size: 16px; overflow-wrap: anywhere; }
#prg .desc p { margin: 0 0 8px; }
#prg .desc a { color: var(--red-t); }
#prg .more h3, #prg .more h2.lbl { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: var(--soft); }
#prg .chap { display: grid; grid-template-columns: 58px 1fr; width: 100%; text-align: left; background: none; border: 0; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: 16px; }
#prg .chap:hover { background: var(--hover); }
#prg .desc.about { margin: 8px 0 12px; }
#prg .more-about { margin: 10px 0 14px; }
#prg .more-about .about { max-width: none; font-size: inherit; margin: 6px 0 0; }
#prg .more-about .about p { margin: 0 0 12px; line-height: 1.55; }
#prg .desc.about p { margin: 0 0 12px; line-height: 1.55; }
#prg .mentions { margin: 0; padding: 0; list-style: none; }
#prg .mentions li { padding: 6px 0; font-size: 16px; line-height: 1.5; border-top: 1px solid var(--line); }
#prg .mentions li:first-child { border-top: 0; }
#prg .mentions b { font-weight: 600; }
#prg .tr summary { cursor: pointer; color: var(--red-t); font-weight: 500; font-size: 16px; padding: 6px 0; list-style: none; }
#prg .tr summary::-webkit-details-marker { display: none; }
#prg .tr summary::after { content: ' ↓'; }
#prg .tr[open] summary::after { content: ' ↑'; }
#prg .tr-body { padding-top: 8px; }
#prg .tr-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
#prg .tr-body b { font-weight: 600; }
#prg .tc { background: none; border: 0; padding: 0 2px 0 0; cursor: pointer; color: var(--red-t); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
#prg .tc:hover { text-decoration: underline; }
#prg .chap span { color: var(--red-t); font-variant-numeric: tabular-nums; font-weight: 500; }
#prg .links { display: flex; flex-wrap: wrap; gap: 8px; }
#prg .video { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000 center/cover no-repeat; border: 0; width: 100%; padding: 0; cursor: pointer; display: block; }
#prg .video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l11-6.5a1 1 0 0 0 0-1.72l-11-6.5A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E") 50% 50%/26px no-repeat; }
#prg .video.on::after { display: none; }
#prg .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#prg .muted { color: var(--soft); font-size: 14px; }
/* Видео: свежее крупно, остальные сеткой по два; открытое видео разворачивается на всю ширину */
#prg .vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 28px 20px; margin-top: 28px; }
#prg .vids[hidden] { display: none; }
#prg .vcard { min-width: 0; scroll-margin-top: 80px; }
#prg .vcard.big, #prg .vcard.open, #prg .vmore { grid-column: 1 / -1; }
#prg .vcard:not(.big):not(.open) .video { border-radius: 12px; }
#prg .vcard:not(.big):not(.open) .video::after { width: 44px; height: 44px; background-size: 18px; }
#prg .vcard h3 { margin: 12px 0 2px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#prg .vcard:not(.big):not(.open) h3 { margin-top: 10px; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#prg .vcard p { margin: 0; font-size: 14px; color: var(--soft); }
#prg .vcard:not(.big):not(.open) p { font-size: 13px; }
@media (max-width: 560px) {
  #prg .vids { gap: 22px 12px; }
  #prg .vcard:not(.big):not(.open) h3 { font-size: 14px; }
  #prg .vcard:not(.big):not(.open) .video::after { width: 36px; height: 36px; background-size: 15px; }
}
#prg .vmore h2 { margin: 0 0 12px; font: 900 21px/1.15 Unbounded, Onest, sans-serif; }
#prg .state { padding: 48px 0; text-align: center; color: var(--soft); }

@media (max-width: 560px) {
  #prg { padding-top: 28px; }
  /* описание на телефоне — под обложкой и названием на всю ширину: в узкой колонке рядом с обложкой
     оно рвалось на пять строк и каждое имя с фото падало на свою строку (решение 10.10.2026) */
  #prg .head { grid-template-columns: 76px 1fr; gap: 16px; row-gap: 14px; }
  #prg .head > div { display: contents; }
  #prg .head h1 { align-self: center; padding-right: 48px; }
  /* описание ушло под обложку — рядом с ней место только для названия, поэтому «Пироги» крупнее */
  #prg .head h1 { font-size: clamp(28px, 9.4vw, 38px); }
  #prg .ava-w { width: 76px; height: 76px; }
  #prg h1 { font-size: 26px; }
  #prg .group h2 { font-size: 19px; }
  #prg .lead { font-size: 16px; grid-column: 1 / -1; margin: 0; max-width: none; text-wrap: pretty; }
  #prg .stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px 22px; margin-top: 22px; }
  #prg .stats b { font-size: 19px; }
  #prg .acts .btn { flex: 1; justify-content: center; padding: 12px 14px; white-space: nowrap; }
  #prg .btn .d { display: none; }
  #prg .btn .m { display: inline; }
  #prg .tabs { gap: 24px; }
  #prg .row { grid-template-columns: 44px 1fr; }
  #prg .len-m { display: inline; }
  #prg .len { display: none; }
  #prg .more { padding-left: 0; }
}

/* Плеер: мини внизу и полноэкранный, как в стриминге */
#prg-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; color: var(--ink); font: 16px/1.4 Onest, system-ui, sans-serif; text-align: left; transform: translateY(110%); transition: transform .25s ease; }
#prg-player.show { transform: none; }
#prg-player button { font: inherit; color: inherit; }
#prg-player .c { border: 0; background: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
#prg-player .c svg { width: 22px; height: 22px; }

#prg-player .mini { position: relative; max-width: 680px; margin: 0 auto 10px; width: calc(100% - 20px); display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 8px 8px 8px; background: var(--mini); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; box-shadow: 0 6px 28px rgba(35,32,29,.16); cursor: pointer; overflow: hidden; }
#prg-player .mini img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--red-soft); display: block; }
#prg-mTitle { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#prg-mSub { font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#prg-player .mini .c.main { width: 44px; height: 44px; background: var(--red); color: #fff; }
#prg-player .mini .c.main svg { width: 16px; height: 16px; }
#prg-player .mbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
#prg-player .mbar b { display: block; height: 100%; width: 0; background: var(--red); }

#prg-player .full { position: fixed; inset: 0; z-index: 99991; overflow-y: auto; overscroll-behavior: contain; color: #fff;
  background: linear-gradient(180deg, #9c3027 0%, #6b1f19 55%, #3a110e 100%);
  transform: translateY(100%); visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s .32s; }
#prg-player.open .full { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
#prg-player .fi { max-width: 440px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom)); min-height: 100%; display: flex; flex-direction: column; }
#prg-player .ftop { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 0 -10px; }
#prg-fSeason { text-align: center; font-size: 14px; font-weight: 600; opacity: .85; }
#prg-player .fcover { width: 100%; max-width: 380px; aspect-ratio: 1; margin: 16px auto 0; border-radius: 18px; object-fit: cover; display: block; background: rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(60,10,5,.45); touch-action: pan-y; }
#prg-player .fmeta { margin-top: 28px; }
#prg-pTitle { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; }
#prg-pSub { margin: 6px 0 0; font-size: 16px; opacity: .8; }
#prg-pChap { margin: 4px 0 0; font-size: 16px; font-weight: 500; min-height: 21px; }
#prg-pSeek { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 26px 0 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right, #fff var(--p, 0%), rgba(255,255,255,.3) var(--p, 0%)); outline-offset: 6px; }
#prg-pSeek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
#prg-pSeek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; }
#prg-pSeek::-moz-range-track { background: transparent; }
#prg-player .ftime { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; opacity: .8; font-variant-numeric: tabular-nums; }
#prg-player .fctl { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 18px; margin-top: 18px; }
#prg-player .fctl .c { width: 52px; height: 52px; color: #fff; }
#prg-player .fctl .c svg { width: 34px; height: 34px; }
#prg-player .fctl .c.main { width: 76px; height: 76px; background: #fff; color: #e2483d; }
#prg-player .fctl .c.main svg { width: 28px; height: 28px; }
#prg-speed { justify-self: start; width: auto !important; min-width: 52px; padding: 0 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.16) !important; height: 36px !important; font-weight: 600 !important; font-size: 14px !important; }
#prg-share { justify-self: end; }
#prg-share svg { width: 24px !important; height: 24px !important; }
#prg-toast { text-align: center; font-size: 14px; min-height: 20px; margin-top: 10px; opacity: 0; transition: opacity .2s; }
#prg-toast.on { opacity: .9; }
#prg-player .fchap { margin-top: 18px; }
#prg-player .fchap h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; opacity: .7; }
#prg-player .fchap button { display: grid; grid-template-columns: 56px 1fr; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; margin: 0 -10px; width: calc(100% + 20px); border-radius: 10px; cursor: pointer; font-size: 16px; line-height: 1.35; }
#prg-player .fchap button span { opacity: .75; font-variant-numeric: tabular-nums; }
#prg-player .fchap button.on { background: rgba(255,255,255,.16); font-weight: 600; }
#prg-player .fchap button.on span { opacity: 1; }
#prg-player :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* На компьютере развёрнутый плеер — карточка поверх затемнённой страницы, а не красное полотно на весь экран.
   Щелчок мимо карточки или Esc — свернуть (closeFull в src/app.js) */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  #prg-player .full { background: rgba(20, 12, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; display: grid; place-items: center; padding: 4vh 24px; cursor: pointer; }
  #prg-player .fi { cursor: auto; width: 100%; max-width: 440px; min-height: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 28px 28px;
    border-radius: 24px; background: linear-gradient(180deg, #9c3027 0%, #6b1f19 55%, #3a110e 100%); box-shadow: 0 30px 80px rgba(0,0,0,.4); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
  #prg-player .fcover { max-width: 280px; margin-top: 8px; }
  #prg-player .fmeta { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #prg-player, #prg-player .full { transition: none !important; }
}

/* ===== Добавлено для отдельного сайта ===== */
html, body { margin: 0; background: var(--bg); }
#prg .permalink { margin: 14px 0 0; font-size: 16px; }
#prg .permalink a { color: var(--red-t); text-decoration: none; font-weight: 500; }
#prg .permalink a:hover { text-decoration: underline; }
#prg .permalink.top { margin: 0 0 12px; }
#prg .permalink.top a { display: inline-block; padding: 7px 14px; border: 1px solid var(--red); border-radius: 999px; font-size: 14px; }
#prg .permalink.top a:hover { background: var(--red-btn); color: #fff; text-decoration: none; }

/* Страница выпуска */
#prg .crumb { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
#prg .crumb img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--red-soft); }
#prg .crumb span { font: 900 18px/1 Unbounded, Onest, sans-serif; }
#prg .crumb:hover span { color: var(--red-t); }
#prg .epage { margin-top: 32px; }
#prg .epage .kicker { margin: 0; color: var(--soft); font-size: 14px; }
#prg .epage h1 { margin: 8px 0 0; font-size: 30px; line-height: 1.15; }
#prg .epage .ep, #prg .epage .ep:last-child { border: 0; }
#prg .epage .row { grid-template-columns: 56px 1fr; padding: 20px 0 4px; }
#prg .epage .row .play { width: 56px; height: 56px; }
#prg .epage .row .info { color: var(--soft); font-size: 14px; }
#prg .epage .more { display: block; padding: 0 0 8px; }
/* Комментарии */
#prg .cm { margin-top: 48px; scroll-margin-top: 20px; }
#prg .cm h2 { margin: 0 0 16px; font: 900 21px/1.15 Unbounded, Onest, sans-serif; }
#prg .cm h2 sup { font: 600 13px Onest, sans-serif; color: var(--soft); margin-left: 4px; vertical-align: 6px; }
#prg .cm-empty { color: var(--soft); margin: 16px 0 0; }
#prg .cm-new { margin-bottom: 8px; }
#prg .cm-thread { border-top: 1px solid var(--line); padding: 16px 0 4px; }
#prg .cm-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding-bottom: 12px; border-radius: 12px; transition: background .6s; }
#prg .cm-item.cm-hl { background: var(--red-soft); }
#prg .cm-kids { margin-left: 48px; }
#prg .cm-kids .cm-item { grid-template-columns: 28px 1fr; }
#prg .cm-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--red-soft); display: block; }
#prg .cm-kids .cm-ava { width: 28px; height: 28px; }
#prg .cm-ava-t { display: grid; place-items: center; color: var(--red-t); font-weight: 700; font-size: 14px; }
#prg .cm-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
#prg .cm-head b { font-weight: 600; }
#prg .cm-head span { color: var(--soft); font-size: 13px; }
#prg .cm-body { margin-top: 2px; overflow-wrap: anywhere; }
#prg .cm-body a { color: var(--red-t); }
#prg .cm-acts { display: flex; gap: 16px; margin-top: 4px; }
#prg .cm-acts button, #prg .cm-me button, #prg .cm-open { background: none; border: 0; padding: 0; cursor: pointer; color: var(--soft); font-size: 14px; }
#prg .cm-acts button:hover, #prg .cm-me button:hover, #prg .cm-open:hover { color: var(--red-t); }
#prg .cm-open { font-size: 16px; font-weight: 500; color: var(--red-t); padding: 4px 0 12px; }
#prg .cm-del p { grid-column: 1 / -1; margin: 0; color: var(--soft); font-size: 14px; font-style: italic; }
#prg .cm-form { margin: 4px 0 16px; }
#prg .cm-form textarea { width: 100%; resize: vertical; min-height: 64px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--bg); }
#prg .cm-form textarea:focus { outline: none; border-color: var(--red); }
#prg .cm-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
#prg .cm-me { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--soft); }
#prg .cm-me .cm-ava { width: 22px; height: 22px; font-size: 11px; }
#prg .cm-send { border: 0; border-radius: 999px; padding: 9px 18px; background: var(--red-btn); color: #fff; font-weight: 600; cursor: pointer; }
#prg .cm-send:disabled { opacity: .6; cursor: default; }
#prg .cm-cancel { border: 0; background: none; color: var(--soft); cursor: pointer; margin-right: 8px; }
#prg .cm-err { margin: 8px 0 0; color: var(--red-t); font-size: 14px; }
#prg .cm-login { margin: 4px 0 16px; padding: 16px; border-radius: 16px; background: var(--hover); }
#prg .cm-login p { margin: 0 0 12px; color: var(--soft); font-size: 16px; }
#prg .cm-logins { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#prg .cm-ya { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 12px; border-radius: 20px; border: 0; background: #000; color: #fff; font-weight: 500; font-size: 16px; cursor: pointer; }
#prg .cm-ya:hover { background: #333; }
#prg .cm-tg { min-height: 40px; display: flex; align-items: center; }
#prg .cm-tg iframe { color-scheme: light; }
@media (max-width: 560px) { #prg .cm-kids { margin-left: 24px; } }

#prg .others { margin-top: 48px; }
#prg .others h2 { margin: 0 0 6px; font: 900 21px/1.15 Unbounded, Onest, sans-serif; }
#prg .others a { display: block; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
#prg .others a:hover b { color: var(--red-t); }
#prg .others b { display: block; font-weight: 600; }
#prg .others small { color: var(--soft); font-size: 14px; }
#prg .others h3 { margin: 22px 0 4px; font-size: 14px; font-weight: 600; color: var(--soft); }
/* Соседние выпуски сезона: две карточки в ряд, на телефоне — друг под другом */
#prg .epnav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
#prg .epnav a { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
#prg .epnav a:hover { border-color: var(--red); }
#prg .epnav small { display: block; margin-bottom: 4px; }
#prg .epnav .nx { grid-column: 2; text-align: right; }
@media (max-width: 560px) {
  #prg .epnav { grid-template-columns: 1fr; }
  #prg .epnav .nx { grid-column: auto; text-align: left; }
}
#prg .all-link { display: inline-block; margin-top: 20px; color: var(--red-t); font-weight: 600; text-decoration: none; }
#prg .all-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }
/* страница архива /archive/ */
#prg .arch + #prg-list .group { margin-top: 18px; }
#prg .arch + #prg-list > .about { margin-top: 18px; }

/* Список для поисковиков и людей без JavaScript, пока плеер не загрузился */
#prg .seo-list { list-style: none; padding: 0; margin: 14px 0 0; }
#prg .seo-list li { border-top: 1px solid var(--line); padding: 12px 0; }
#prg .seo-list a { text-decoration: none; font-weight: 600; }
#prg .seo-list small { display: block; color: var(--soft); font-weight: 400; font-size: 14px; }

@media (max-width: 560px) {
  #prg .epage h1 { font-size: 24px; }
}

/* Приложение и уведомления */
#prg .appbox { display: contents; }
#prg .appbox[hidden] { display: none; }
#prg .lnk.app { border: 0; cursor: pointer; font: inherit; font-size: 14px; color: inherit; }
#prg .lnk.app svg { flex: none; }
#prg .lnk.app[aria-pressed="true"] { background: var(--red-soft); color: var(--red-t); }
#prg .epage .appbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#prg-say { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); max-width: calc(100% - 32px); background: var(--pop); color: #fff; font: 500 16px/1.4 Onest, system-ui, sans-serif; padding: 12px 18px; border-radius: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1000; text-align: center; }
#prg-say.on { opacity: 1; transform: translate(-50%, 0); }
/* окно выше плеера (#prg-player 99990) и его полного вида (99991) */
.sheet { position: fixed; inset: 0; z-index: 99995; background: rgba(35, 32, 29, .45); display: flex; align-items: flex-end; justify-content: center; padding: 16px; font: 16px/1.5 Onest, system-ui, sans-serif; color: var(--ink); }
.sheet-in { background: var(--card); border-radius: 22px; padding: 24px 22px 20px; max-width: 440px; width: 100%; max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; margin-bottom: env(safe-area-inset-bottom); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.sheet-in h3 { margin: 0 0 8px; font: 900 19px/1.2 Unbounded, Onest, sans-serif; }
.sheet-in p { margin: 0 0 10px; }
.sheet-in ol { margin: 0 0 12px; padding-left: 22px; }
.sheet-in li { margin: 6px 0; }
.sheet-in .muted { color: var(--soft); font-size: 14px; }
.sheet-in .btn { width: 100%; justify-content: center; margin-top: 6px; border: 0; border-radius: 999px; padding: 13px 22px; font: 600 16px Onest, system-ui, sans-serif; background: var(--red-btn); color: #fff; cursor: pointer; }
@media (min-width: 600px) { .sheet { align-items: center; } }
.sheet-in.wide { max-width: 560px; }
.sheet-vid { position: relative; aspect-ratio: 16 / 9; margin: 6px 0 14px; border-radius: 14px; overflow: hidden; background: #000; }
.sheet-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sheet-in .btn svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.sheet-in .btn.sec { background: transparent; color: var(--soft); margin-top: 2px; padding: 10px 22px; }
/* Напоминание «можно установить как приложение» — полоска над мини-плеером */
#prg-hint { max-width: 680px; width: calc(100% - 20px); margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 14px; background: var(--pop); color: #fff; font-size: 14px; line-height: 1.35; box-shadow: 0 6px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
#prg-hint.on { opacity: 1; transform: none; }
#prg-hint span { flex: 1; min-width: 0; }
#prg-hint button { flex: none; border: 0; cursor: pointer; border-radius: 999px; padding: 7px 14px; background: var(--red-btn); color: #fff; font-weight: 600; font-size: 14px; }
#prg-hint button.x { background: none; color: rgba(255,255,255,.7); padding: 4px 10px; font-size: 20px; font-weight: 400; line-height: 1; }
/* Строчка «Один день с „Пирогами“ в телефоне» под кнопками на главной: заметно, но тихо */
#prg .appvid { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
#prg .appvid[hidden] { display: none; }
#prg .appvid .av-i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red-soft); color: var(--red-t); transition: background .15s, color .15s; }
#prg .appvid .av-i svg { margin-left: 2px; }
#prg .appvid .av-t { color: var(--soft); }
#prg .appvid { line-height: 1.35; }
#prg .appvid .av-t { display: block; font-size: 13px; }
@media (hover: hover) { #prg .appvid:hover .av-i { background: var(--red-btn); color: #fff; } #prg .appvid:hover .av-x { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); } }

/* Скачанные выпуски (только в установленном приложении) */
#prg .dlbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#prg .dlbox .lnk.on { background: var(--red-soft); color: var(--red-t); }
#prg-dl { justify-self: end; color: inherit; }
#prg-dl[hidden] { display: none; }
#prg-dl svg { width: 24px !important; height: 24px !important; }
#prg-dl.done { opacity: .9; }
#prg-dl .pct { font: 600 13px Onest, system-ui, sans-serif; }
#prg .dls { padding: 8px 0 24px; }
#prg .dls-sum { margin: 14px 0 8px; color: var(--soft); font-size: 14px; }
#prg .dls ul { list-style: none; margin: 0 0 16px; padding: 0; }
#prg .dls li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
#prg .dls li a { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
#prg .dls li b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#prg .dls li span { display: block; color: var(--soft); font-size: 14px; margin-top: 2px; }
#prg .dls-note { font-size: 13px; margin-top: 14px; }
#prg .dls .play { flex: none; }

/* Плашка о куки и страница о данных */
#prg-cookie { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 999; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: var(--pop); color: #fff; font: 14px/1.4 Onest, system-ui, sans-serif; padding: 12px 12px 12px 16px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
#prg-cookie p { margin: 0; flex: 1; }
#prg-cookie a { color: #fff; }
#prg-cookie .ck-btns { flex: none; display: flex; gap: 8px; }
#prg-cookie button { flex: none; border: 0; border-radius: 999px; padding: 9px 16px; background: #fff; color: #23201d; font: 600 14px Onest, system-ui, sans-serif; cursor: pointer; }
#prg-cookie button.ck-no { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
/* Плашка стоит у нижнего края; когда появляется мини-плеер — поднимается над ним */
body:has(#prg-player.show) #prg-cookie { bottom: calc(82px + env(safe-area-inset-bottom)); }
/* На телефоне — компактнее: мельче текст, ниже кнопки, меньше отступы */
@media (max-width: 520px) {
  #prg-cookie { left: 8px; right: 8px; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 10px 12px; font-size: 13px; line-height: 1.35; border-radius: 14px; }
  #prg-cookie .ck-btns > * { flex: 1; }
  #prg-cookie button { padding: 9px 12px; font-size: 14px; }
  body:has(#prg-player.show) #prg-cookie { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
#prg .policy p { line-height: 1.55; }
#prg .policy a { color: var(--red-t); }
#prg .policy a.lnk { color: inherit; }
#prg .policy a.lnk:hover { color: var(--red-t); }

/* Галочка согласия перед входом в комментарии */
#prg .cm-agree { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--soft); cursor: pointer; }
#prg .cm-agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); }
#prg .cm-agree a { color: var(--red-t); }
#prg .cm-ya:disabled { opacity: .35; cursor: not-allowed; }

/* Подвал со ссылками на документы */
.sitefoot { max-width: 680px; margin: 16px auto 0; padding: 20px 20px calc(120px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 14px/1.6 Onest, system-ui, sans-serif; color: var(--foot); }
.sitefoot p { margin: 0 0 4px; }
/* Ссылки подвала: строки по смыслу, между ссылками точка; нажимаемая зона выше самого текста */
.sitefoot .fl { display: flex; flex-wrap: wrap; margin: 0; }
.sitefoot .fl a, .sitefoot .fl button { display: inline-block; padding: 5px 0; }
.sitefoot .fl > * + *::before, .sitefoot .fl > [data-theme-wrap] button::before { content: '·'; display: inline-block; padding: 0 8px; text-decoration: none; color: var(--foot); }
.sitefoot .fl > [data-theme-wrap]::before { content: none; }
@media (max-width: 560px) {
  .sitefoot .fl { flex-direction: column; align-items: flex-start; }
  .sitefoot .fl > * + *::before, .sitefoot .fl > [data-theme-wrap] button::before { content: none; }
}
/* короткие ссылки (разделы, площадки) и на телефоне идут в строку (без точек, чтобы точка не повисла в начале строки), длинные — столбиком */
@media (max-width: 560px) {
  .sitefoot .fl.row { flex-direction: row; column-gap: 18px; }
}
.sitefoot a, .sitefoot button { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sitefoot button { background: none; border: 0; padding: 0; cursor: pointer; }
.sitefoot a:hover, .sitefoot button:hover { color: var(--ink); }
#prg .policy h2 { margin: 28px 0 10px; font: 600 19px/1.3 Onest, sans-serif; }
#prg .policy h3 { margin: 22px 0 8px; font-size: 16px; }
#prg .policy ul, #prg .policy ol { padding-left: 22px; line-height: 1.55; }
#prg .policy li { margin: 4px 0; }
#prg .policy .meta { color: var(--soft); font-size: 14px; }
#prg .policy .linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--red-t); text-decoration: underline; cursor: pointer; }
#prg .policy code { font-size: 13px; background: var(--hover); padding: 1px 5px; border-radius: 4px; }

/* Блок об агентстве Daruma Audio на главной — спокойный, без призывов */
#prg .studio { margin: 56px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); color: var(--soft); font-size: 16px; line-height: 1.55; }
#prg .studio p { margin: 0 0 8px; }
.studio-2 { margin-top: 28px; }
#prg .studio b { color: var(--ink); font-weight: 600; }
#prg .studio-k { font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--soft); }
#prg .studio a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
#prg .studio a:hover { color: var(--red-t); border-color: var(--red); }

/* Поделиться с этого места */
#prg-player .fi { position: relative; }
#prg-player .fctl { position: relative; }
/* Меню открывается прямо над кнопкой «Поделиться» — там всегда видно, листать не нужно */
.shmenu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5; display: flex; flex-direction: column; gap: 6px; background: var(--card); color: var(--ink); border-radius: 16px; padding: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.25); min-width: 220px; }
.shmenu button { border: 0; background: none; text-align: left; padding: 12px 14px; border-radius: 10px; font: 600 16px Onest, system-ui, sans-serif; color: inherit; cursor: pointer; }
.shmenu button:hover { background: var(--hover); }
.shmenu button.no { color: var(--soft); font-weight: 500; }
#prg .from { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 18px; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--red-soft); color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
#prg .from svg { width: 16px; height: 16px; flex: none; color: var(--red-t); }
#prg .from b { color: var(--red-t); }

/* Вопрос ведущим */
#prg .asklink { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 4px 0; border: 0; background: none; color: var(--soft); font: inherit; font-size: 16px; cursor: pointer; }
#prg .asklink:hover { color: var(--red-t); }
#prg .asklink svg { flex: none; }
#prg .askbox p { margin: 0 0 10px; }
.askf textarea, .askf input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: 16px/1.4 Onest, system-ui, sans-serif; color: var(--ink); background: var(--bg); resize: vertical; }
.askf textarea:focus, .askf input:focus { outline: 2px solid #e2483d; outline-offset: -1px; border-color: transparent; }
.askf .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.askf .err { color: var(--red-t); font-size: 14px; margin: 0 0 6px; min-height: 0; }
.askf .err:empty { display: none; }
.askf .btn.sec { background: var(--hover); color: var(--ink); }
.askf .small { font-size: 13px; margin-top: 12px; }
.askf .small a { color: inherit; }
.askf .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--soft); margin: 2px 0 12px; }
.askf .agree input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: #e2483d; }
.askf .agree a { color: inherit; }

/* Обновление жестом «потянуть вниз» (только в установленном приложении) */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: contain; } }
#prg-pull { position: fixed; left: 50%; top: env(safe-area-inset-top, 0px); z-index: 5; width: 52px; height: 52px; border-radius: 50%;
  background: var(--card); box-shadow: 0 2px 12px rgba(35, 32, 29, .16); overflow: hidden;
  transform: translate(-50%, 0) scale(.5); transform-origin: 50% 50%; opacity: 0; pointer-events: none; }
#prg-pull img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#prg-pull.spin img { animation: prg-pull-spin .9s linear infinite; }
@keyframes prg-pull-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #prg-pull.spin img { animation-duration: 2.4s; } }

/* Блог: карточки статей (вкладка «Блог» на главной и /blog/) и страница статьи */
#prg .blist { margin-top: 28px; }
#prg .blist[hidden] { display: none; }
#prg .bcard { display: block; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
#prg .bcard:last-of-type { border-bottom: 1px solid var(--line); }
#prg #prg-blog .bcard:first-child { border-top: 0; padding-top: 0; }
#prg .bcard small { display: block; color: var(--soft); font-size: 14px; }
#prg .bcard b { display: block; margin: 6px 0 6px; font: 900 21px/1.2 Unbounded, Onest, sans-serif; }
#prg .bcard .bc-t > span { display: block; color: var(--soft); font-size: 16px; }
#prg .bcard:hover b { color: var(--red-t); }
#prg .epage .about { color: var(--soft); }
#prg .bpost .kicker a { color: var(--red-t); text-decoration: none; font-weight: 600; }
#prg .bpost h1 { font-size: 32px; }
#prg .btoc { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
#prg .btoc p { flex-basis: 100%; margin: 0 0 2px; color: var(--soft); font-size: 14px; }
#prg .btoc a { padding: 6px 13px; border-radius: 999px; background: var(--hover); text-decoration: none; font-size: 14px; }
#prg .btoc a:hover { background: var(--red-soft); color: var(--red-t); }
#prg .btext { margin-top: 28px; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
#prg .btext p { margin: 0 0 14px; }
#prg .btext .lead-p { font-size: 19px; line-height: 1.5; margin-bottom: 8px; }
#prg .btext h2 { margin: 44px 0 4px; padding-top: 22px; border-top: 2px solid var(--red); font: 900 21px/1.2 Unbounded, Onest, sans-serif; scroll-margin-top: 20px; }
#prg .btext h3 { margin: 26px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; }
#prg .btext ul { padding-left: 22px; margin: 0 0 14px; }
#prg .btext a { color: var(--red-t); }
#prg .bcta { margin-top: 40px; padding: 20px; border-radius: 16px; background: var(--red-soft); }
#prg .bcta p { margin: 0 0 14px; font-size: 16px; }
#prg .bcta .btn { display: inline-flex; text-decoration: none; }
@media (max-width: 560px) {
  #prg .bpost h1 { font-size: 24px; }
  #prg .bcard b { font-size: 18px; }
  #prg .btext { font-size: 16px; }
  #prg .btext .lead-p { font-size: 17px; }
  #prg .btext h2 { font-size: 19px; margin-top: 36px; }
  #prg .btext h3 { font-size: 17px; }
}
#prg .bimg { margin: 10px 0 14px; }
#prg .bimg img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; background: var(--hover); }
#prg .btext .bbook { float: right; width: 112px; margin: 2px 0 10px 16px; }
#prg .btext .bbook img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 4px 8px 8px 4px; box-shadow: 0 4px 14px rgba(0,0,0,.28); background: var(--hover); }
#prg .btext h2, #prg .btext h3 { clear: both; }
#prg .btext hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 24px; }
#prg .btext .blinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
#prg .btext .blinks .lnk { color: var(--ink); padding: 6px 14px; font-size: 14px; }
#prg .btext .blinks .lnk:hover { color: var(--red-t); }
#prg .btext .bcredit { margin-top: 28px; color: var(--soft); font-size: 13px; }
#prg .btext .bwho { display: flex; align-items: center; margin: 0 0 10px; color: var(--soft); font-size: 14px; }
#prg .btext .bwho img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); background: var(--line); }
#prg .btext .bwho img + img { margin-left: -8px; }
#prg .btext .bwho span { margin-left: 8px; }
#prg .btext .bep { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; color: var(--soft); font-size: 14px; line-height: 1.35; }
#prg .btext .bep a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
#prg .btext .bep a:hover { color: var(--red-t); border-color: var(--red-soft); }
#prg .bep-play { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--red-soft); color: var(--red-t) !important; cursor: pointer; }
#prg .bep-play:hover { background: var(--red); color: #fff !important; }
/* видимый кружок 30 px, а попасть пальцем можно в 44 px */
#prg .bep-play::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
#prg .bep-play svg { display: block; width: 14px; height: 14px; margin: 0; }
#prg .btext .bep .bep-t { margin-left: 4px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
#prg .btext .bep a.bep-t { color: var(--soft); border-bottom: 1px dotted var(--line); }
#prg .btext .bep a.bep-t:hover { color: var(--red-t); }
#prg .bcover { margin: 22px 0 0; }
#prg .bcover img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 16px; background: var(--hover); }
#prg .bcard.wcover { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; }
#prg .bcard.wcover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; background: var(--hover); }
#prg .bcard .bc-t { display: block; min-width: 0; color: var(--ink); }
@media (max-width: 560px) {
  #prg .bcard.wcover { grid-template-columns: 1fr; gap: 12px; }
}

/* Шапка внутренних страниц: логотип и разделы сайта */
#prg .top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
#prg .menu { display: flex; gap: 22px; font-size: 16px; font-weight: 600; }
#prg .menu a { padding: 6px 0 5px; border-bottom: 2px solid transparent; color: var(--soft); text-decoration: none; white-space: nowrap; }
#prg .menu a:hover { color: var(--ink); }
#prg .menu a.on { color: var(--ink); border-bottom-color: var(--red); }
@media (max-width: 560px) {
  #prg .top { gap: 10px 20px; }
  #prg .menu { gap: 20px; }
}
/* Узкие телефоны: пункты меню должны влезать в одну строку (см. ниже, пять пунктов) */
@media (max-width: 400px) { #prg .menu { gap: 16px; font-size: 15px; } }
@media (max-width: 359px) {
  #prg .menu { gap: 14px; font-size: 14px; }
  #prg .acts .btn { padding: 12px 10px; font-size: 15px; }
  #prg .mk .mk-nums li { padding: 14px 12px; }
  #prg .mk .mk-nums b { font-size: 18px; overflow-wrap: anywhere; }
  #prg .mk .mk-exi { grid-template-columns: 40px minmax(0, 1fr) 64px; gap: 10px; padding-left: 10px; padding-right: 10px; }
  /* большой плеер: пять кнопок управления в одну строку */
  #prg-player .fi { padding-left: 16px; padding-right: 16px; }
  #prg-player .fctl { gap: 8px; }
  #prg-player .fctl .c { width: 44px; height: 44px; }
  #prg-player .fctl .c.main { width: 64px; height: 64px; }
}
/* Пять пунктов меню («Слушать», «Смотреть», «Читать», «Играть», «О подкасте») в одну строку: чем уже экран, тем мельче шрифт и теснее промежутки.
   gap — наименьший промежуток, остальное место раздаёт space-between. На совсем узких (до 340) меню прокручивается вбок. */
@media (max-width: 500px) { #prg .menu { gap: 14px; font-size: 15px; justify-content: space-between; } }
@media (max-width: 415px) { #prg .menu { gap: 12px; font-size: 14px; } }
@media (max-width: 389px) { #prg .menu { gap: 6px; letter-spacing: -.01em; } }
@media (max-width: 340px) { #prg .menu { gap: 12px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } #prg .menu::-webkit-scrollbar { display: none; } }

/* Страница «Такой страницы нет» */
#prg .nf .about { margin-top: 12px; }
#prg .nf-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
#prg .nf-acts .btn { text-decoration: none; }

/* Служебные ссылки в описании выпуска: кнопки-плашки вместо сырых адресов */
#prg .desc .dlinks { margin: 12px 0 10px; }
#prg .desc .dlinks .lnk { color: var(--ink); text-align: left; }
#prg .desc .dlinks .lnk:hover { color: var(--red-t); }
#prg .desc .dk { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--soft); }
#prg .desc .dk + .dlinks { margin-top: 0; }
#prg .desc .dnote { margin: 12px 0 0; font-size: 14px; color: var(--soft); }
#prg .desc .dnote a { color: inherit; }
#prg .desc .dnote a:hover { color: var(--red-t); }

/* Таймер сна в большом плеере */
#prg-player .fextra { position: relative; display: flex; justify-content: center; margin-top: 16px; }
#prg-player .pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
#prg-player .pill svg { width: 16px; height: 16px; flex: none; }
#prg-player .pill.on { background: #fff; color: #7a231c; }
.shmenu.sl { right: auto; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); min-width: 200px; }

/* Тёмная тема: мелочи, которым мало одних переменных */
:root[data-theme="dark"] #prg-player .mini { box-shadow: 0 6px 28px rgba(0,0,0,.5); }
:root[data-theme="dark"] #prg-cookie, :root[data-theme="dark"] #prg-say { box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
:root[data-theme="dark"] .sheet { background: rgba(0,0,0,.6); }
:root[data-theme="dark"] #prg .lnk img { background: #fff; }

/* Переключатель темы вверху страницы: луна в светлой теме, солнце в тёмной */
#prg .thm { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--hover); color: var(--ink); cursor: pointer; }
@media (hover: hover) { #prg .thm:hover { background: var(--red-soft); color: var(--red-t); } }
#prg .thm svg { width: 20px; height: 20px; display: block; }
#prg .thm .sun, :root[data-theme="dark"] #prg .thm .moon { display: none; }
:root[data-theme="dark"] #prg .thm .sun { display: block; }
#prg .top .menu { margin-left: auto; }
#prg .tools { display: flex; align-items: center; gap: 8px; }
#prg .head { position: relative; }
#prg .head .thm { position: absolute; top: 0; right: 0; }
@media (max-width: 560px) {
  #prg .top .tools { order: 2; margin-left: auto; }
  #prg .top .menu { order: 3; width: 100%; margin-left: 0; }
  #prg .head h1 { padding-right: 48px; }
}
/* В установленном приложении значка нет: там тема следует за телефоном (кнопка «Тема» в подвале остаётся) */
@media (display-mode: standalone) {
  #prg .thm { display: none; }
  #prg .head h1 { padding-right: 0; }
}
:root.in-app #prg .thm { display: none; }
:root.in-app #prg .head h1 { padding-right: 0; }

/* Рекламодателям: /mediakit/ (собирает scripts/build.mjs, цифры — content/mediakit.json) */
#prg .mk .mk-lead { font-size: 18px; line-height: 1.5; margin: 14px 0 0; }
#prg .mk .mk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
#prg .mk .mk-acts .btn { text-decoration: none; font-size: 16px; }
#prg .mk .mk-acts .btn.main { color: #fff; }
#prg .mk .mk-nums { list-style: none; padding: 0; margin: 32px 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#prg .mk .mk-nums li { margin: 0; background: var(--hover); border-radius: 16px; padding: 18px 18px 16px; }
#prg .mk .mk-nums b { display: block; font: 900 30px/1.05 Unbounded, Onest, sans-serif; color: var(--red); letter-spacing: -.01em; }
#prg .mk .mk-nums span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--soft); }
/* глубина прослушивания: плеер, закрашенный до среднего значения */
#prg .mk .mk-dp { border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: grid; grid-template-columns: 72px 1fr; gap: 14px 16px; align-items: center; margin: 14px 0 0; }
#prg .mk img.mk-dp-cv { object-fit: cover; display: block; }
#prg .mk .mk-dp-cv { width: 72px; height: 72px; border-radius: 14px; background: var(--red); color: #fff; display: grid; place-items: center; font: 900 32px Unbounded, Onest, sans-serif; }
#prg .mk .mk-dp-t b { display: block; font-size: 17px; line-height: 1.25; }
#prg .mk .mk-dp-t small { color: var(--soft); font-size: 14px; }
#prg .mk .mk-dp-big { font: 900 36px/1 Unbounded, Onest, sans-serif; color: var(--red); margin-top: 6px; }
#prg .mk .mk-dp-pl, #prg .mk .mk-dp-s { grid-column: 1 / -1; }
#prg .mk .mk-dp-bar { position: relative; height: 10px; border-radius: 5px; background: var(--line); margin: 6px 0 8px; }
#prg .mk .mk-dp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: var(--red); animation: mk-dp-go 1.6s cubic-bezier(.2, .7, .2, 1) both; }
#prg .mk .mk-dp-bar i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--red); box-sizing: border-box; }
#prg .mk .mk-dp-tm { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
#prg .mk .mk-dp-s { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--soft); font-size: 14px; }
#prg .mk .mk-nums.mk-dp-nums { margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
@keyframes mk-dp-go { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { #prg .mk .mk-dp-bar i { animation: none; } }
@media print { #prg .mk .mk-dp-bar i { animation: none; } }
@media (min-width: 640px) { #prg .mk .mk-dp { grid-template-columns: 96px 1fr; padding: 20px; } #prg .mk .mk-dp-cv { width: 96px; height: 96px; font-size: 44px; border-radius: 16px; } #prg .mk .mk-nums.mk-dp-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#prg .mk h2 { font: 900 22px/1.2 Unbounded, Onest, sans-serif; margin: 40px 0 14px; }
#prg .mk h3 { margin: 18px 0 10px; font-size: 16px; }
#prg .mk .mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
#prg .mk .mk-grid h3:first-child { margin-top: 0; }
#prg .mk .mk-bars { list-style: none; padding: 0; margin: 0; }
#prg .mk .mk-bars li { display: grid; grid-template-columns: minmax(96px, 38%) 1fr 40px; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; line-height: 1.25; }
#prg .mk .mk-bt { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
#prg .mk .mk-bt i { display: block; height: 100%; background: var(--red); border-radius: 5px; }
#prg .mk .mk-bars b { text-align: right; font-variant-numeric: tabular-nums; }
#prg .mk .mk-split { height: 14px; border-radius: 7px; background: var(--soft); overflow: hidden; }
#prg .mk .mk-split i { display: block; height: 100%; background: var(--red); }
#prg .mk .mk-split-l { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 14px; }
#prg .mk .mk-one { margin: 0; font-size: 16px; }
#prg .mk .mk-one b { font: 900 22px/1 Unbounded, Onest, sans-serif; color: var(--red); margin-right: 4px; }
#prg .mk .mk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#prg .mk .mk-cards section { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
#prg .mk .mk-cards h3 { margin: 0 0 6px; }
#prg .mk .mk-cards p { margin: 0; font-size: 16px; color: var(--soft); }
@media (min-width: 640px) { #prg .mk .mk-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } #prg .mk .mk-nums li { padding: 16px 14px 14px; } #prg .mk .mk-nums b { font-size: 22px; white-space: nowrap; } }
@media (max-width: 560px) {
  #prg .mk .mk-grid, #prg .mk .mk-cards { grid-template-columns: 1fr; }
  #prg .mk .mk-nums b { font-size: 26px; }
}
/* Печать и «Сохранить в PDF»: только сама страница, без шапки, подвала, плеера и плашек */
@media print {
  @page { margin: 14mm; }
  #prg .top, .sitefoot, #prg-player, #prg-cookie, #prg-say, #prg .mk-acts, #prg .all-link { display: none !important; }
  #prg { padding: 0; background: #fff; color: #23201d; }
  #prg .mk .mk-nums li { background: #f8f6f4; }
  #prg .mk h2 { break-after: avoid; }
  #prg .mk .mk-grid, #prg .mk .mk-cards section, #prg .mk .mk-bars, #prg .mk .mk-nums { break-inside: avoid; }
  #prg .mk a { text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print {
  :root[data-theme="dark"] { --red: #e2483d; --red-soft: #fdeceb; --ink: #23201d; --soft: #75706b; --line: #eeeae6; --hover: #f8f6f4; --bg: #fff; --card: #fff; --red-t: #c8382e; --red-btn: #cf3b30; --foot: #75706b; color-scheme: light; }
}
/* /mediakit/: обложка — фрагмент видео последнего выпуска без звука, по кругу; ведущие */
#prg .mk .mk-cover { position: relative; margin: 0 0 24px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #23201d center / cover no-repeat; }
#prg .mk .mk-cover iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
#prg .mk .mk-cover figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: 14px; }
#prg .mk .mk-cover figcaption a { color: #fff; text-decoration: none; font-weight: 500; }
#prg .mk .mk-hosts { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
#prg .mk .mk-hosts li { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; margin: 0; }
#prg .mk .mk-hosts img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--red-soft); display: block; }
#prg .mk .mk-hosts b { font-size: 17px; }
#prg .mk .mk-hosts p { margin: 4px 0 0; color: var(--soft); font-size: 16px; }
@media (max-width: 560px) { #prg .mk .mk-cover { border-radius: 14px; margin: 0 -4px 20px; } #prg .mk .mk-hosts li { grid-template-columns: 72px 1fr; gap: 14px; } #prg .mk .mk-hosts img { width: 72px; height: 72px; } }
@media print { #prg .mk .mk-cover iframe, #prg .mk .mk-cover figcaption { display: none; } }
/* /mediakit/: мнения слушателей */
#prg .mk .mk-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
#prg .mk .mk-quotes figure { margin: 0; background: var(--hover); border-radius: 16px; padding: 18px 18px 16px; break-inside: avoid; }
#prg .mk .mk-quotes blockquote { margin: 0; font-size: 16px; line-height: 1.5; position: relative; padding-top: 22px; }
#prg .mk .mk-quotes blockquote::before { content: "«"; position: absolute; top: -10px; left: -2px; font: 900 40px/1 Unbounded, Onest, sans-serif; color: var(--red); }
#prg .mk .mk-quotes figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#prg .mk .mk-qa { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); color: var(--red-t); font-weight: 700; font-size: 14px; }
#prg .mk .mk-quotes figcaption b { display: block; font-size: 16px; line-height: 1.2; }
#prg .mk .mk-quotes figcaption small { display: block; color: var(--soft); font-size: 13px; line-height: 1.3; }
@media (max-width: 560px) { #prg .mk .mk-quotes { grid-template-columns: 1fr; } }
/* карточки отзывов одной высоты: текст до 6 строк, длинные обрезаются, «Читать полностью» раскрывает */
#prg .mk .mk-quotes blockquote { padding-top: 30px; min-height: calc(30px + 16px * 1.5 * 6); }
#prg .mk .mk-quotes blockquote::before { top: 0; left: -2px; }
#prg .mk .mk-quotes .long blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; max-height: calc(30px + 16px * 1.5 * 6); }
#prg .mk .mk-quotes .long.open blockquote { display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: none; }
#prg .mk .mk-more { display: block; border: 0; background: none; padding: 0; margin: 6px 0 0; height: 21px; color: var(--red-t); font-size: 14px; font-weight: 600; cursor: pointer; }
#prg .mk .mk-quotes figure:not(.long) blockquote { margin-bottom: 27px; }
@media print { #prg .mk .mk-more { display: none; } #prg .mk .mk-quotes .long blockquote { display: block; max-height: none; -webkit-line-clamp: unset; } }
/* /mediakit/: видны первые отзывы, остальные — по кнопке «Ещё N отзывов»; цены */
#prg .mk .mk-quotes:not(.all) .mk-extra { display: none; }
#prg .mk .mk-allq { margin-top: 10px; font-size: 16px; }
#prg .mk .mk-cards section.mk-price { border-color: var(--red); }
#prg .mk .mk-cards .mk-pt { margin: 0 0 8px; font-size: 14px; color: var(--soft); }
#prg .mk .mk-cards .mk-pp { margin: 0 0 8px; font: 900 26px/1.1 Unbounded, Onest, sans-serif; color: var(--red); }
#prg .mk .mk-cards section p:not([class]) { color: var(--ink); }
@media (min-width: 561px) { #prg .mk .mk-cards { grid-template-columns: repeat(3, 1fr); } }
@media print { #prg .mk .mk-quotes .mk-extra { display: block; } #prg .mk .mk-allq { display: none; } }
#prg .mk .mk-quotes { align-items: stretch; }
#prg .mk .mk-quotes figure { display: flex; flex-direction: column; }
#prg .mk .mk-quotes figure:not(.long) blockquote { margin-bottom: 0; }
#prg .mk .mk-quotes figcaption { margin-top: auto; padding-top: 14px; }
#prg .mk .mk-quotes:not(.all) .mk-extra { display: none; }
/* /mediakit/: примеры интеграций — красная кнопка, полоска перемотки, время */
#prg .mk .mk-ex { display: grid; grid-template-columns: 1fr; gap: 10px; }
#prg .mk .mk-exi { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 92px; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
#prg .mk .mk-exi.on { border-color: var(--red); }
#prg .mk .mk-exm { min-width: 0; }
#prg .mk .mk-exm b { display: block; font-size: 16px; line-height: 1.25; }
#prg .mk .mk-exm small { display: block; color: var(--soft); font-size: 13px; margin-top: 2px; }
#prg .mk .mk-bar { position: relative; height: 16px; margin-top: 6px; cursor: pointer; }
#prg .mk .mk-bar::before, #prg .mk .mk-bar i { content: ""; position: absolute; left: 0; top: 6px; height: 4px; border-radius: 2px; }
#prg .mk .mk-bar::before { right: 0; background: var(--line); }
#prg .mk .mk-bar i { width: 0; background: var(--red); }
#prg .mk .mk-t { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; align-self: start; padding-top: 2px; }
@media (max-width: 560px) { #prg .mk .mk-exi { grid-template-columns: 40px minmax(0, 1fr) 76px; gap: 12px; } }
@media print { #prg .mk .mk-bar, #prg .mk .mk-exi .play { display: none; } #prg .mk .mk-exi { grid-template-columns: 1fr auto; } }

/* карточки цен: заголовок, длительность, цена и описание на одном уровне во всех карточках */
#prg .mk .mk-cards { grid-auto-rows: auto; }
@media (min-width: 561px) {
  #prg .mk .mk-cards { grid-template-rows: repeat(4, auto); row-gap: 0; }
  #prg .mk .mk-cards section.mk-price { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
}
#prg .mk .mk-cards .mk-pp-s { font: 700 19px/1.5 Onest, sans-serif; white-space: nowrap; }

/* Нажимаемая зона больше видимой: прозрачная рамка вокруг мелких кнопок и ссылок (до 44 пикселей по высоте).
   Внешний вид не меняется. Не ставить на элементы, где ::after уже занят. */
#prg .sea, #prg .lnk, #prg .thm, #prg .menu a, #prg .permalink a, #prg .all-link, #prg .btoc a { position: relative; }
#prg .sea::after, #prg .lnk::after, #prg .thm::after, #prg .menu a::after, #prg .permalink a::after, #prg .all-link::after, #prg .btoc a::after { content: ""; position: absolute; left: 0; right: 0; }
#prg .sea::after { top: -3px; bottom: -3px; }
#prg .lnk::after { top: -4px; bottom: -4px; }
#prg .thm::after { inset: -2px; }
#prg .menu a::after { top: -4px; bottom: -4px; }
#prg .permalink a::after, #prg .all-link::after { top: -10px; bottom: -10px; }
#prg .btoc a::after { top: -4px; bottom: -4px; }

/* Поиск по сайту: значок лупы (в шапке страниц и в строке вкладок на главной) и окно поиска (блок «поиск» в src/app.js) */
#prg .sbtn { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--hover); color: var(--ink); cursor: pointer; }
@media (hover: hover) { #prg .sbtn:hover { background: var(--red-soft); color: var(--red-t); } }
#prg .sbtn svg { width: 19px; height: 19px; display: block; }
#prg .sbtn { position: relative; }
#prg .sbtn::after { content: ""; position: absolute; inset: -2px; }
#prg .bar .tabs-s { position: absolute; top: 7px; right: 20px; width: 38px; height: 38px; background: none; }
#prg .bar .tabs { padding-right: 46px; }
@media (max-width: 400px) { #prg .bar .tabs { gap: 18px; } }
@media (max-width: 370px) { #prg .bar .tabs { gap: 14px; padding-right: 40px; } #prg .bar .tab { font-size: 16px; } #prg .bar .tabs-s { right: 14px; } }
@media (max-width: 340px) { #prg .bar .tab sup { display: none; } }
/* в приложении бывает четвёртая вкладка «Скачанные»: на узком экране вкладки прокручиваются вбок, лупа остаётся на месте */
@media (max-width: 480px) {
  #prg .bar .tabs:has([data-tab="game"]) { overflow-x: auto; scrollbar-width: none; gap: 14px; }
  #prg .bar .tabs:has([data-tab="game"]) .tab { font-size: 16px; }
  #prg .bar .tabs:has([data-tab="game"])::-webkit-scrollbar { display: none; }
  #prg .bar .tabs:has([data-tab="game"]) .tab { flex: none; margin-bottom: 0; }
  #prg .bar .tabs:has([data-tab="game"]) ~ .tabs-s { background: var(--bg); box-shadow: -10px 0 10px var(--bg); }
}
/* четыре вкладки («Слушать», «Смотреть», «Читать», «Играть») на узких телефонах: чуть теснее, на самых узких — шрифт 15 (исключение из шкалы, как в меню) */
@media (max-width: 400px) { #prg .bar .tabs:has([data-tab="game"]) { gap: 12px; } }
@media (max-width: 370px) { #prg .bar .tabs:has([data-tab="game"]) .tab { font-size: 15px; } }

html.srch-on { overflow: hidden; }
:is(#prg-search, #prg-pick) { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink);
  font: 16px/1.5 Onest, system-ui, -apple-system, sans-serif; text-align: left; -webkit-font-smoothing: antialiased; }
:is(#prg-search, #prg-pick)[hidden] { display: none; }
:is(#prg-search, #prg-pick) * { box-sizing: border-box; }
:is(#prg-search, #prg-pick) button { font: inherit; color: inherit; }
:is(#prg-search, #prg-pick) :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
:is(#prg-search, #prg-pick) input:focus-visible { outline: 0; }
:is(#prg-search, #prg-pick) .sw { max-width: 680px; margin: 0 auto; padding: 0 20px calc(140px + env(safe-area-inset-bottom)); }
:is(#prg-search, #prg-pick) .sbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 0 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
:is(#prg-search, #prg-pick) .sfield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--hover); border: 2px solid transparent; }
:is(#prg-search, #prg-pick) .sfield:focus-within { border-color: var(--red); background: var(--bg); }
:is(#prg-search, #prg-pick) .sfield svg { width: 20px; height: 20px; flex: none; color: var(--soft); }
:is(#prg-search, #prg-pick) input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 500 18px/1.2 Onest, system-ui, sans-serif; padding: 0; -webkit-appearance: none; appearance: none; }
:is(#prg-search, #prg-pick) input::placeholder { color: var(--soft); opacity: 1; }
:is(#prg-search, #prg-pick) input::-webkit-search-cancel-button { display: none; }
:is(#prg-search, #prg-pick) .sclear { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--line); font-size: 22px; line-height: 1; cursor: pointer; }
:is(#prg-search, #prg-pick) .sclose { flex: none; border: 0; background: none; padding: 8px 2px; font-weight: 600; color: var(--soft); cursor: pointer; }
:is(#prg-search, #prg-pick) .sclose:hover { color: var(--ink); }
:is(#prg-search, #prg-pick) .snote { margin: 22px 0 0; color: var(--soft); }
:is(#prg-search, #prg-pick) .schips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
:is(#prg-search, #prg-pick) .schips button { border: 0; border-radius: 999px; background: var(--hover); padding: 7px 14px; font-size: 14px; cursor: pointer; }
:is(#prg-search, #prg-pick) .schips button:hover { background: var(--red-soft); color: var(--red-t); }
:is(#prg-search, #prg-pick) .scount { margin: 18px 0 4px; font-size: 14px; color: var(--soft); }
:is(#prg-search, #prg-pick) .slist { list-style: none; margin: 0; padding: 0; }
:is(#prg-search, #prg-pick) .shit { padding: 16px 0; border-bottom: 1px solid var(--line); }
:is(#prg-search, #prg-pick) .shit > a { display: block; text-decoration: none; color: inherit; }
:is(#prg-search, #prg-pick) .shit > a b { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; }
:is(#prg-search, #prg-pick) .shit > a:hover b { color: var(--red-t); }
:is(#prg-search, #prg-pick) .slbl { display: block; margin-top: 3px; font-size: 14px; color: var(--soft); }
:is(#prg-search, #prg-pick) .sblog .slbl { color: var(--red-t); }
:is(#prg-search, #prg-pick) .ssn { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; }
:is(#prg-search, #prg-pick) mark { background: var(--red-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
:is(#prg-search, #prg-pick) .schap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }
:is(#prg-search, #prg-pick) .schap button { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; border: 0; border-radius: 12px; background: none; padding: 5px 10px 5px 4px; text-align: left; font-size: 16px; line-height: 1.4; cursor: pointer; }
:is(#prg-search, #prg-pick) .schap button:hover { background: var(--hover); }
:is(#prg-search, #prg-pick) .schap svg { flex: none; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--red); color: #fff; margin-top: -1px; }
:is(#prg-search, #prg-pick) .schap .st { flex: none; font-weight: 600; color: var(--red-t); font-variant-numeric: tabular-nums; }
:is(#prg-search, #prg-pick) .schap .sfrom0 { font-weight: 600; }
:is(#prg-search, #prg-pick) .smore { display: block; margin: 20px auto 0; border: 0; border-radius: 999px; background: var(--hover); padding: 11px 22px; font-weight: 600; cursor: pointer; }
@media (max-width: 560px) {
  :is(#prg-search, #prg-pick) .sw { padding-left: 16px; padding-right: 16px; }
  :is(#prg-search, #prg-pick) .sbar { padding-top: calc(10px + env(safe-area-inset-top)); gap: 8px; }
  :is(#prg-search, #prg-pick) .sfield { height: 46px; }
  :is(#prg-search, #prg-pick) input { font-size: 17px; }
}

/* «Подобрать выпуск»: карточка на главной (data-pick) и окно с вопросами (блок «подобрать выпуск» в src/app.js).
   Окно устроено как окно поиска и берёт его оформление выше; здесь — только своё. */
/* Карточка Телеграм-канала в ленте выпусков (tgCard в src/app.js) */
#prg .tgcard { list-style: none; padding: 14px 0; border-top: 1px solid var(--line); }
#prg .tgcard a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--red-soft); color: inherit; text-decoration: none; }
#prg .tgcard a > svg { flex: none; width: 36px; height: 36px; }
#prg .tgcard .tg-t { flex: 1; min-width: 0; }
#prg .tgcard b { display: block; font-size: 17px; line-height: 1.3; }
#prg .tgcard .tg-s { display: block; margin-top: 2px; font-size: 14px; color: var(--soft); }
#prg .tgcard .pk-go { flex: none; border-radius: 999px; background: var(--red-btn); color: #fff; padding: 9px 16px; font-weight: 600; font-size: 14px; }
@media (hover: hover) { #prg .tgcard a:hover .pk-go { filter: brightness(1.08); } }
@media (max-width: 420px) { #prg .tgcard a { padding: 12px 12px 12px 14px; gap: 10px; } #prg .tgcard a > svg { width: 32px; height: 32px; } #prg .tgcard .pk-go { padding: 8px 12px; } }
#prg .pickcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 22px; padding: 16px 18px 16px 20px;
  border: 0; border-radius: 20px; background: var(--red-soft); text-align: left; cursor: pointer; }
#prg .pickcard b { display: block; font-size: 17px; line-height: 1.3; }
#prg .pickcard .pk-s { display: block; margin-top: 2px; font-size: 14px; color: var(--soft); }
#prg .pickcard .pk-go { flex: none; border-radius: 999px; background: var(--red-btn); color: #fff; padding: 9px 16px; font-weight: 600; font-size: 14px; }
@media (hover: hover) { #prg .pickcard:hover .pk-go { filter: brightness(1.08); } }
@media (max-width: 420px) { #prg .pickcard { padding: 14px 14px 14px 16px; gap: 12px; } #prg .pickcard .pk-go { padding: 8px 13px; } }
#prg-pick .pbar h2 { flex: 1; margin: 0; font: 900 22px/1.2 Unbounded, Onest, sans-serif; letter-spacing: -.01em; }
#prg-pick .pbar { min-height: 64px; }
#prg-pick .pintro { margin: 16px 0 0; color: var(--soft); }
#prg-pick .pq { margin-top: 18px; }
#prg-pick .pk { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--soft); }
#prg-pick .pch { display: flex; flex-wrap: wrap; gap: 8px; }
#prg-pick .pch button { border: 2px solid transparent; border-radius: 999px; background: var(--hover); padding: 7px 14px; font-size: 16px; line-height: 1.3; cursor: pointer; }
@media (hover: hover) { #prg-pick .pch button:hover { background: var(--red-soft); color: var(--red-t); } }
#prg-pick .pch button[aria-pressed="true"] { background: var(--red-soft); border-color: var(--red); color: var(--red-t); font-weight: 600; }
#prg-pick .pres { margin-top: 12px; border-top: 1px solid var(--line); }
#prg-pick .pjump { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 2; border: 0; border-radius: 999px;
  background: var(--red-btn); color: #fff; padding: 12px 22px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; }
#prg-pick .pjump[hidden] { display: none; }
@media (max-width: 560px) { #prg-pick .pbar h2 { font-size: 19px; } #prg-pick .pch button { padding: 6px 12px; } }

/* ---------- ведущие: /hosts/ и /hosts/<ключ>/ ---------- */
#prg .hhead { display: flex; align-items: center; gap: 22px; margin: 18px 0 0; }
#prg .hhead h1 { margin: 0; }
#prg .hphoto { flex: none; width: 144px; height: 144px; border-radius: 50%; object-fit: cover; background: var(--line); }
#prg .hph-empty, #prg .hc-ph.hph-empty { display: grid; place-items: center; color: var(--soft); font: 900 40px/1 Unbounded, Onest, sans-serif; }
#prg .hrole { margin: 8px 0 0; font-size: 16px; color: var(--ink); }
#prg .hseas { margin: 4px 0 0; font-size: 14px; color: var(--soft); }
#prg .hostp .btext > .lead-p { margin-top: 24px; }
#prg .hlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
#prg .hlist-big { margin-top: 28px; border-bottom: 1px solid var(--line); }
#prg a.hcard { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
#prg .hcard > span { min-width: 0; }
#prg .hcard b { display: block; font-weight: 600; font-size: 17px; }
#prg .hcard small { display: block; color: var(--soft); font-size: 14px; }
#prg .hcard:hover b { color: var(--red-t); }
#prg .hc-ph { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--line); }
#prg .hc-ph.hph-empty { font-size: 24px; }
@media (max-width: 640px) {
  #prg .hhead { gap: 16px; }
  #prg .hphoto { width: 96px; height: 96px; }
  #prg .hlist { grid-template-columns: 1fr; }
  #prg .hc-ph { width: 56px; height: 56px; }
}

/* ---------- игра «Поймай пирожок» (вкладка «Играть», код — блок «игра» в src/app.js) ----------
   Поле — один SVG 120×100, цвета только переменными, чтобы работали обе темы. Цвет самих пирожков от темы не зависит. */
#prg .game { margin-top: 28px; max-width: 480px; }
#prg .game[hidden] { display: none; }
#prg .gm-pick h2 { margin: 0 0 10px; font: 900 21px/1.15 Unbounded, Onest, sans-serif; }
#prg .gm-pick p { margin: 0 0 14px; }
#prg .gm-pick .gm-q { margin: 22px 0 10px; font-weight: 600; font-size: 17px; }
#prg .gm-pks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#prg .gm-pk { display: grid; justify-items: center; gap: 2px; padding: 18px 10px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--hover); text-align: center; cursor: pointer; }
#prg .gm-pk img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--line); }
#prg .gm-pk b { margin-top: 8px; font-size: 17px; }
#prg .gm-pk small { font-size: 14px; color: var(--soft); }
@media (hover: hover) { #prg .gm-pk:hover { border-color: var(--red); background: var(--red-soft); } }
#prg .gm-pick .gm-note, #prg .gm-hint { margin: 16px 0 0; font-size: 14px; color: var(--soft); }
#prg .gm-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
#prg .gm-st { display: flex; gap: 22px; margin-right: auto; }
#prg .gm-st span { display: grid; line-height: 1.15; }
#prg .gm-st small { font-size: 13px; color: var(--soft); }
#prg .gm-st b { font: 900 21px/1.2 Unbounded, Onest, sans-serif; }
#prg .gm-lv { display: flex; gap: 6px; }
#prg .gm-lf { width: 16px; height: 16px; border: 2px solid var(--line); border-radius: 50%; }
#prg .gm-lf.on { background: var(--red); border-color: var(--red); }
#prg .gm-btn[hidden] { display: none; }
#prg .gm-btn { position: relative; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--hover); font-weight: 600; font-size: 14px; cursor: pointer; }
#prg .gm-btn::after, #prg .gm-foot button::after { content: ""; position: absolute; inset: -6px; }
#prg .gm-field { position: relative; border-radius: 16px; overflow: hidden; }
#prg .gm-svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#prg .gm-bg { fill: var(--hover); }
#prg .gm-bgimg { transition: filter .2s; }
:root[data-theme="dark"] #prg .gm-bgimg { filter: brightness(.78) saturate(.9); }
#prg .gm-ch { fill: none; stroke: #8f5b3b; stroke-width: 2.2; stroke-linecap: round; }
#prg .gm-ch2 { fill: none; stroke: #cf9370; stroke-width: .8; stroke-linecap: round; }
#prg .gm-pk1 { fill: #a96d4b; }
#prg .gm-pk2 { fill: #cf9370; }
#prg .gm-br { fill: #8f5b3b; }
#prg .gm-shadow { fill: rgba(40,20,10,.22); }
#prg #prg-gm-who { transition: transform .09s ease-out; }
#prg .gm-legs rect { fill: #2b2522; }
#prg .gm-torso { fill: var(--gm-shirt); }
#prg .gm-arm { fill: none; stroke: var(--gm-shirt); stroke-width: 3.4; stroke-linecap: round; }
#prg .gm-hand { fill: #f0c9a8; }
#prg .gm-plus { font: 900 6px Unbounded, Onest, sans-serif; fill: var(--red-btn); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 1.4px; stroke-linejoin: round; animation: gm-plus .7s ease-out forwards; }
@keyframes gm-plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-9px); } }
#prg .gm-plate { fill: #fff; stroke: #cf3b30; stroke-width: .8; }
#prg .gm-plate2 { fill: #f9d9d6; }
#prg .gm-pl { transform-box: fill-box; transform-origin: center; }
#prg .gm-pl.gm-hit { animation: gm-hit .22s ease-out; }
@keyframes gm-hit { 0% { transform: scale(1.25, 1.6); } 100% { transform: none; } }
#prg .gm-avbg { fill: #f3dcd8; }
#prg .gm-avt { font: 900 10px Unbounded, Onest, sans-serif; fill: #75706b; }
#prg .gm-avr { fill: none; stroke: #fff; stroke-width: 1.3; }
#prg .gm-pie { transition: transform var(--gm-tick, 800ms) linear; }
#prg .gm-pie.gm-fall { opacity: 0; transition: transform .6s ease-in, opacity .6s; }
#prg .gm-cr { fill: #d98c4a; stroke: #9c5524; stroke-width: .7; }
#prg .gm-sl { fill: none; stroke: #8a4a1c; stroke-width: .7; stroke-linecap: round; }
#prg .gm-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: rgba(255,255,255,.9); }
:root[data-theme="dark"] #prg .gm-ov { background: rgba(23,21,19,.9); }
#prg .gm-ov[hidden] { display: none; }
#prg .gm-ov h3 { margin: 0; font: 900 19px/1.25 Unbounded, Onest, sans-serif; }
#prg .gm-ov p { margin: 0; }
#prg .gm-ov .gm-rec { color: var(--red-t); font-weight: 600; }
#prg .gm-ovb { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#prg .gm-foot { margin: 8px 0 0; }
#prg .gm-foot button { position: relative; padding: 8px 0; border: 0; background: none; color: var(--red-t); font-size: 14px; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) { #prg .gm-pick h2 { font-size: 19px; } #prg .gm-pk img { width: 80px; height: 80px; } #prg .gm-st b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { #prg .gm-pie, #prg #prg-gm-who { transition: none; } #prg .gm-pl.gm-hit, #prg .gm-plus { animation: none; } }