/* ── Radio Player Wave Animation ──────────────────────── */
@keyframes wave {
    0%, 100% { height: 6px; }
    50%       { height: 22px; }
}

.wave-bar {
    height: 6px;
    animation: wave 1s ease-in-out infinite;
}

@keyframes hero-wave {
    0%, 100% { height: 8px; }
    50%       { height: 40px; }
}

.hero-wave-bar {
    height: 8px;
    animation: hero-wave 1.2s ease-in-out infinite;
}

/* ── Line Clamp ───────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Prose ────────────────────────────────────────────── */
.prose p       { margin-bottom: 1em; }
.prose h2      { font-size: 1.25rem; font-weight: 700; margin-bottom: .5em; }
.prose ul      { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.prose a       { color: #ab8b40; text-decoration: underline; }

/* ── Smooth scroll ───────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Player bar progress strip ───────────────────────── */
#playerBar {
    transition: box-shadow 0.3s;
}
#playerBar.playing {
    box-shadow: 0 -2px 20px rgba(171, 139, 64, 0.2);
}

/* ── Visualizer hidden when not playing ──────────────── */
#visualizer .wave-bar {
    animation-play-state: paused;
}
#visualizer.active .wave-bar {
    animation-play-state: running;
}

/* ── Focus visible ring ──────────────────────────────── */
:focus-visible {
    outline: 2px solid #ab8b40;
    outline-offset: 2px;
}