/* Эхо — онлайн-радио. Kinetic/editorial, signal-red, ровно 3 кегля, тени вместо бордеров. */
:root{
  --paper:#faf6f0; --paper-2:#f2ebdf; --card:#fffdf9;
  --ink:#1a1610; --ink-2:#5f564b; --ink-3:#776d5f;
  --line:#e8dccb;
  --red:#e11836; --red-ink:#a50f27; --red-tint:#fbe4e7;
  --dark:#1a1712; --dark-2:#2a251d; --on-dark:#f3ece1; --on-dark-2:#b8ab99;
  --fs-s:.875rem; --fs-m:1.125rem; --fs-l:clamp(2.9rem,7.4vw,5.4rem);
  --r1:6px; --r2:8px; --r3:12px; --r4:18px;
  --sh-1:0 1px 2px rgba(41,29,10,.06), 0 2px 8px rgba(41,29,10,.05);
  --sh-2:0 4px 14px rgba(41,29,10,.10), 0 16px 40px rgba(41,29,10,.12);
  --sh-red:0 6px 20px rgba(225,24,54,.30);
  --dur:.16s; --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:var(--paper);color:var(--ink);
  font:400 var(--fs-s)/1.55 "Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:96px}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:var(--r1)}
img{max-width:100%}
.ic{display:inline-block;background:currentColor;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.ic-play{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E")}
.ic-pause{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E")}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,44px);
  position:sticky;top:0;z-index:20;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand-mark{width:30px;height:30px}
.brand-mark .bar{fill:var(--red)}
.brand-text{font-weight:800;font-size:var(--fs-m);letter-spacing:.16em}
.brand-text b{color:var(--red)}
.search{flex:1 1 auto;max-width:420px;margin-left:auto;position:relative}
.search input{width:100%;font:inherit;font-size:var(--fs-s);color:var(--ink);background:var(--card);border:0;border-radius:999px;padding:9px 16px 9px 38px;box-shadow:var(--sh-1)}
.search input::placeholder{color:var(--ink-3)}
.search::before{content:"";position:absolute;left:14px;top:50%;width:15px;height:15px;transform:translateY(-50%);background:var(--ink-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat}
.topbar-link{font-size:var(--fs-s);color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap;flex:0 0 auto;padding:6px 4px}
.topbar-link:hover{color:var(--red-ink)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);
  align-items:center;padding:clamp(26px,5vw,60px) clamp(16px,4vw,44px) clamp(22px,3vw,36px);max-width:1220px;margin:0 auto}
.hero-copy{position:relative;z-index:2}
.kicker{margin:0 0 14px;font-size:var(--fs-s);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red-ink)}
.hero h1{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:800;font-size:var(--fs-l);line-height:.96;letter-spacing:-.015em;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--red)}
.hero .sub{margin:20px 0 0;max-width:44ch;font-size:var(--fs-s);color:var(--ink-2);line-height:1.65}

/* карточка «в эфире» — доминантный объект */
.feat{position:relative;z-index:2;background:var(--card);border-radius:var(--r4);box-shadow:var(--sh-2);padding:20px;display:flex;flex-direction:column}
.feat-head{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);font-weight:700;color:var(--ink-2)}
.feat-dot{width:9px;height:9px;border-radius:999px;background:var(--ink-3)}
.feat.live .feat-dot{background:var(--red);box-shadow:0 0 0 4px var(--red-tint);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.feat-art{position:relative;height:clamp(150px,20vw,196px);margin:14px 0 16px;border-radius:var(--r3);overflow:hidden;
  background:radial-gradient(120% 140% at 18% 0%,#ff2b48 0,var(--red) 45%,var(--red-ink) 100%);display:flex;align-items:flex-end;justify-content:center}
.feat-initial{position:absolute;left:16px;top:6px;font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(3rem,8vw,5rem);color:rgba(255,255,255,.20);line-height:1;user-select:none}
.feat-eq{display:flex;align-items:flex-end;gap:5px;height:64%;width:78%;padding-bottom:14px}
.feat-eq i{flex:1;background:rgba(255,255,255,.92);border-radius:3px 3px 0 0;height:30%}
.feat.live .feat-eq i{animation:eq 1s var(--ease) infinite alternate}
.feat-eq i:nth-child(2){animation-delay:.12s;height:70%}
.feat-eq i:nth-child(3){animation-delay:.28s;height:45%}
.feat-eq i:nth-child(4){animation-delay:.06s;height:92%}
.feat-eq i:nth-child(5){animation-delay:.34s;height:55%}
.feat-eq i:nth-child(6){animation-delay:.20s;height:78%}
.feat-eq i:nth-child(7){animation-delay:.40s;height:38%}
@keyframes eq{to{height:100%}}
@media (prefers-reduced-motion:reduce){.feat-eq i,.np-eq i,.row-eq i,.eq-hero i{animation:none!important}}
.feat-name{font-family:"Playfair Display",serif;font-weight:800;font-size:var(--fs-m);line-height:1.1}
.feat-tags{margin-top:4px;font-size:var(--fs-s);color:var(--ink-3)}
.feat-play{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:var(--fs-s);font-weight:700;cursor:pointer;border:0;border-radius:999px;padding:12px 22px;background:var(--red);color:#fff;box-shadow:var(--sh-red);transition:transform var(--dur)}
.feat-play:hover{transform:translateY(-2px)}
.feat-play .ic{width:16px;height:16px;color:#fff}

/* ---------- жанры ---------- */
.genres{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.genres::-webkit-scrollbar{display:none}
.chip{font:inherit;font-size:var(--fs-s);font-weight:600;white-space:nowrap;cursor:pointer;color:var(--ink-2);background:var(--paper-2);border:0;border-radius:999px;padding:8px 15px;transition:color var(--dur),background var(--dur)}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper)}

/* ---------- список-чарт ---------- */
main{padding:6px clamp(16px,4vw,44px) 40px;max-width:1220px;margin:0 auto}
.row-head{display:flex;align-items:baseline;gap:12px;margin:20px 2px 12px}
.row-head h2{margin:0;font-size:var(--fs-m);font-weight:800}
.count{font-size:var(--fs-s);color:var(--ink-3)}
.list{list-style:none;margin:0;padding:0;background:var(--card);border-radius:var(--r3);box-shadow:var(--sh-1);overflow:hidden}
.row{display:grid;grid-template-columns:44px 30px 1fr auto;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;border-top:1px solid var(--line);transition:background var(--dur)}
.row:first-child{border-top:0}
.row:hover{background:var(--paper-2)}
.row.playing{background:linear-gradient(90deg,var(--red-tint),transparent 60%)}
.row-n{font-family:"Playfair Display",serif;font-weight:700;font-size:var(--fs-m);color:var(--ink-3);text-align:center}
.row.playing .row-n{color:var(--red-ink)}
.row-ind{width:26px;height:26px;display:grid;place-items:center}
.row-ind .ic-play{width:16px;height:16px;color:var(--ink-3);opacity:0;transition:opacity var(--dur)}
.row:hover .row-ind .ic-play{opacity:1}
.row-eq{display:none;align-items:flex-end;gap:2px;height:16px;width:18px}
.row-eq i{width:3px;background:var(--red);border-radius:2px;height:40%}
.row.playing .row-ind .ic-play{display:none}
.row.playing .row-eq{display:flex}
.row.playing .row-eq i{animation:eq .9s var(--ease) infinite alternate}
.row.playing .row-eq i:nth-child(2){animation-delay:.15s;height:85%}
.row.playing .row-eq i:nth-child(3){animation-delay:.3s;height:55%}
.row.playing .row-eq i:nth-child(4){animation-delay:.1s;height:95%}
.row-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.row-name{font-size:var(--fs-m);font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-tags{font-size:var(--fs-s);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-genre{font-size:var(--fs-s);color:var(--ink-2);font-weight:600;background:var(--paper-2);border-radius:999px;padding:4px 12px;white-space:nowrap}
.row.playing .row-genre{background:#fff;color:var(--red-ink)}
.state{padding:32px 2px;color:var(--ink-3);font-size:var(--fs-s)}

/* ---------- футер ---------- */
.site-foot{max-width:1220px;margin:0 auto;padding:28px clamp(16px,4vw,44px) 40px;border-top:1px solid var(--line)}
.foot-links{display:flex;flex-wrap:wrap;gap:14px 22px;margin:0 0 14px;list-style:none;padding:0}
.foot-links a{font-size:var(--fs-s);color:var(--ink-2);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--red-ink)}
.foot-note{margin:0;font-size:var(--fs-s);color:var(--ink-2);max-width:70ch;line-height:1.6}
.foot-op{color:var(--ink-2)}

/* ---------- sticky-плеер ---------- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px clamp(16px,4vw,44px);background:var(--dark);color:var(--on-dark);box-shadow:0 -8px 30px rgba(41,29,10,.22)}
.player[data-empty="true"]{opacity:.62}
.pp{flex:0 0 auto;width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;background:var(--red);box-shadow:var(--sh-red);display:grid;place-items:center;transition:transform var(--dur)}
.pp:hover{transform:scale(1.05)}
.pp:disabled{background:var(--dark-2);box-shadow:none;cursor:default}
.pp .ic{width:18px;height:18px;color:#fff}
.np{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
.np-eq{display:flex;align-items:flex-end;gap:2px;height:20px;width:20px;flex:0 0 auto;opacity:.35}
.player.playing .np-eq{opacity:1}
.np-eq i{width:3px;background:var(--red);border-radius:2px;height:30%}
.player.playing .np-eq i{animation:eq .9s var(--ease) infinite alternate}
.np-eq i:nth-child(2){animation-delay:.15s;height:80%}
.np-eq i:nth-child(3){animation-delay:.3s;height:50%}
.np-eq i:nth-child(4){animation-delay:.1s;height:95%}
.np-text{min-width:0}
.np-name{font-size:var(--fs-m);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-meta{font-size:var(--fs-s);color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vol{flex:0 0 auto;display:flex;align-items:center;gap:8px;width:130px}
.ic-vol{width:18px;height:18px;flex:0 0 auto;background:var(--on-dark-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat}
.vol input{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(var(--red),var(--red)) 0/80% 100% no-repeat var(--dark-2)}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer}
.vol input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:999px;background:#fff;cursor:pointer}

/* ---------- cookie / 152-ФЗ ---------- */
.consent{position:fixed;left:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);bottom:104px;z-index:40;max-width:560px;margin:0 auto;background:var(--card);color:var(--ink);border-radius:var(--r3);box-shadow:var(--sh-2);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.consent[hidden]{display:none}
.consent p{margin:0;flex:1 1 260px;font-size:var(--fs-s);color:var(--ink-2);line-height:1.55}
.consent a{color:var(--red-ink);font-weight:600;text-decoration:none}
.consent button{font:inherit;font-size:var(--fs-s);font-weight:700;cursor:pointer;border:0;border-radius:999px;padding:9px 20px;background:var(--red);color:#fff;box-shadow:var(--sh-red)}

/* ---------- под-страницы ---------- */
.page{max-width:1220px;margin:0 auto}
.btn-red{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:var(--fs-s);font-weight:700;text-decoration:none;color:#fff;background:var(--red);border-radius:999px;padding:11px 22px;box-shadow:var(--sh-red);transition:transform var(--dur)}
.btn-red:hover{transform:translateY(-2px)}
.btn-red::after{content:"";width:16px;height:16px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.doc-hero{padding:clamp(26px,5vw,64px) clamp(16px,4vw,44px) clamp(10px,2vw,20px);display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:end}
.doc-hero .kicker{color:var(--red-ink)}
.doc-hero h1{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:800;font-size:var(--fs-l);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.doc-hero h1 em{font-style:italic;color:var(--red)}
.doc-hero .lead{margin:16px 0 0;max-width:52ch;font-size:var(--fs-s);color:var(--ink-2);line-height:1.65}
.doc-hero .cta{margin-top:20px}
.doc-hero .hero-visual{display:flex;align-items:flex-end;justify-content:flex-end}
.eq-hero{display:flex;align-items:flex-end;gap:6px;height:130px;max-width:180px;width:100%;margin-left:auto}
.eq-hero i{flex:1;background:linear-gradient(var(--red),var(--red-ink));border-radius:3px 3px 0 0;height:40%;animation:eq 1.1s var(--ease) infinite alternate}
.eq-hero i:nth-child(2){animation-delay:.18s;height:70%}
.eq-hero i:nth-child(3){animation-delay:.36s;height:45%}
.eq-hero i:nth-child(4){animation-delay:.10s;height:90%}
.eq-hero i:nth-child(5){animation-delay:.28s;height:55%}
.eq-hero i:nth-child(6){animation-delay:.44s;height:35%}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding:16px clamp(16px,4vw,44px) 8px}
.feature{background:var(--card);border-radius:var(--r3);padding:20px 20px 22px;box-shadow:var(--sh-1)}
.feature .fk{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r2);background:var(--red-tint);color:var(--red-ink);margin-bottom:14px}
.feature .fk svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature h3{margin:0;font-size:var(--fs-m);font-weight:700}
.feature p{margin:6px 0 0;font-size:var(--fs-s);color:var(--ink-2);line-height:1.55}
.info{padding:20px clamp(16px,4vw,44px) 8px;max-width:820px}
.info h2{font-size:var(--fs-m);font-weight:800;margin:24px 0 8px}
.info p{font-size:var(--fs-s);color:var(--ink-2);line-height:1.65;margin:0}
.info a{color:var(--red-ink);font-weight:600;text-decoration:none}
.info a:hover{text-decoration:underline}
.doc-wrap{padding:clamp(20px,4vw,40px) clamp(16px,4vw,44px) 8px}
.doc-card{max-width:800px;margin:0 auto;background:var(--card);border-radius:var(--r3);box-shadow:var(--sh-2);padding:clamp(24px,4vw,48px)}
.doc-card h1{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.01em;margin:0 0 6px;overflow-wrap:break-word;hyphens:auto}
.doc-card .upd{font-size:var(--fs-s);color:var(--ink-3);margin:0 0 26px}
.doc-card h2{font-size:var(--fs-m);font-weight:800;margin:28px 0 8px}
.doc-card p,.doc-card li{font-size:var(--fs-s);color:var(--ink-2);line-height:1.68}
.doc-card a{color:var(--red-ink);font-weight:600}
.doc-card ul{padding-left:20px;margin:8px 0}

/* ---------- адаптив ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:22px}
    .doc-hero{grid-template-columns:1fr}.doc-hero .hero-visual{display:none}
}
@media (max-width:560px){
  .row{grid-template-columns:34px 24px 1fr;gap:10px;padding:13px 14px}
  .row-genre{display:none}
  .vol{width:44px}.vol input,.ic-vol{display:none}
}