/* Свой проигрыватель вместо стороннего.
   Записи лежат у нас в site/audio, чужих скриптов и брендинга нет.

   Оформление — из той же системы, что билеты афиши: бумага, краска, моношрифт.
   Никаких кнопок громкости и перемотки: голос слушают целиком, а лишние
   органы управления на странице о театре только шумят. */

.aud {
    --aud-h: 34px;                       /* высота кружка = высота строки */
    display: flex; align-items: center; gap: 14px;
    max-width: 620px;
    font-family: var(--f-mono, ui-monospace, monospace);
    color: var(--ink, #221f18);
}

/* Кнопка — тонкий контур, как вырубка на билете. Заливки нет: пятно на
   светлой бумаге читалось бы тяжелее, чем контур. */
.aud__play {
    flex: 0 0 auto;
    width: var(--aud-h); height: var(--aud-h);
    display: grid; place-items: center;
    border: 1.5px solid currentColor; border-radius: 50%;
    background: none; color: inherit; cursor: pointer;
    padding: 0; opacity: .75;
    transition: opacity .18s ease, transform .18s ease;
}
.aud__play:hover { opacity: 1; }
.aud__play:active { transform: scale(.94); }
.aud__play:focus-visible { outline: 2px solid var(--red, #b60000); outline-offset: 3px; }

/* Треугольник и пауза рисуем фигурами, а не символами: шрифтовые «▶» и «❚❚»
   в разных системах разного кегля и сидят на разной высоте. */
.aud__play i { display: block; width: 11px; height: 12px; background: currentColor; }
.aud__play i { clip-path: polygon(1px 0, 100% 50%, 1px 100%); }        /* играть */
.aud.is-playing .aud__play i {
    clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0,
                       66% 0, 100% 0, 100% 100%, 66% 100%);            /* пауза */
}

.aud__body { flex: 1 1 auto; min-width: 0; }

.aud__name {
    display: block; margin: 0 0 7px;
    font-size: 10px; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; opacity: .55;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.aud__line { display: flex; align-items: center; gap: 12px; }

/* Дорожка — волосяная линия. Высота у полосы 2px, но нажимаемая область
   вокруг неё 16px: иначе в неё не попасть ни пальцем, ни мышью. */
.aud__track {
    position: relative; flex: 1 1 auto; height: 16px; cursor: pointer;
    touch-action: none;
}
.aud__track::before {
    content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px;
    background: currentColor; opacity: .18;
}
.aud__fill {
    position: absolute; left: 0; top: 7px; height: 2px; width: 0;
    background: var(--red, #b60000);
}
.aud__knob {
    position: absolute; top: 3px; left: 0; width: 10px; height: 10px;
    margin-left: -5px; border-radius: 50%;
    background: var(--red, #b60000);
    opacity: 0; transition: opacity .15s ease;
}
.aud__track:hover .aud__knob,
.aud__track:focus-visible .aud__knob,
.aud.is-playing .aud__knob { opacity: 1; }
.aud__track:focus-visible { outline: 2px solid var(--red, #b60000); outline-offset: 4px; border-radius: 2px; }

.aud__time {
    flex: 0 0 auto; font-size: 11px; letter-spacing: .06em;
    opacity: .5; font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 480px) {
    .aud { gap: 11px; }
    .aud__name { font-size: 9px; letter-spacing: .13em; }
}

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