/* Shared typography, texture, navigation and sound button follow sound garden. */
.bn-field {
    background: radial-gradient(58vmax 42vmax at 50% 42%, rgba(160, 112, 74, 0.09), transparent 65%);
    opacity: 0.55;
    transition: opacity 800ms ease;
}
html.snd-on .bn-field { opacity: 1; }
.bn-stage { padding-top: 10vh; }
.bn-stage .dc-title { letter-spacing: 0.12em; text-indent: 0.12em; }
.bn-stage .dc-lead { margin-bottom: 30px; }
.bn-landscape {
    position: relative;
    width: min(320px, 80%);
    height: 55px;
    margin: 0 auto 32px;
    overflow: hidden;
}
.bn-landscape span {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 80px;
    border: 1px solid rgba(160, 112, 74, 0.25);
    border-radius: 50%;
    transform: rotate(-4deg);
    transition: border-color 800ms ease;
}
.bn-landscape span:nth-child(2) { top: 10px; transform: rotate(3deg); }
.bn-landscape span:nth-child(3) { top: 20px; }
.bn-landscape span:nth-child(4) { top: 30px; transform: rotate(3deg); }
.bn-landscape span:nth-child(5) { top: 40px; }
html.snd-on .bn-landscape span { border-color: rgba(190, 145, 100, 0.55); }
.bn-stage .dc-controls { margin-bottom: 26px; }
.bn-volume {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(300px, 100%);
    margin: 0 auto 24px;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.7rem;
}
.bn-volume input { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.bn-volume input:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.bn-volume output { width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
.bn-status { font-family: var(--font-body); letter-spacing: 0.05em; line-height: 1.8; min-height: 3.6em; }
.bn-note { margin-top: 14px; font-family: var(--font-body); font-size: 0.68rem; font-weight: 300; line-height: 2; color: var(--muted); }
.bn-related { justify-content: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 36px; }
.bn-related a { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.04em; }
@media (max-width: 680px) {
    .bn-stage { padding-top: 9vh; }
    .bn-stage .dc-title { font-size: clamp(2.2rem, 9vw, 3.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    .bn-field, .bn-landscape span { transition: none; }
}