.stemmen-page .stemmen-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 4px;
}
.stemmen-page .stemmen-hero img {
    filter: sepia(.24) saturate(.8);
}
.stemmen-page .stemmen-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 72% 28%, rgba(235, 151, 97, .3), transparent 68%), linear-gradient(135deg, rgba(112, 43, 48, .22), rgba(208, 136, 91, .12));
    mix-blend-mode: soft-light;
}
.tuning-resonance {
    scroll-margin-top: 130px;
    position: relative;
    width: min(1120px, calc(100vw - 48px));
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin: 0 0 5rem;
    padding: clamp(28px, 5vw, 68px);
    box-sizing: border-box;
    overflow: hidden;
    color: #faede1;
    background: radial-gradient(ellipse at 85% 40%, #512027 0, #291619 45%, #191415 85%);
    border: 1px solid #6c4140;
}
.tuning-resonance::before { content: ''; position: absolute; top: 0; left: 7%; right: 7%; height: 1px; background: linear-gradient(90deg, transparent, #d99976, transparent); }
.tuning-resonance-copy { position: relative; z-index: 1; }
.tuning-eyebrow { display: block; color: #e6b393; font-size: .65rem; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 1.8rem; }
.tuning-resonance h1 { color: #faede1; font-size: clamp(2.5rem, 4.2vw, 3.9rem); line-height: 1.07; letter-spacing: -.025em; margin: 0 0 1.4rem; }
.stemmen-page .tuning-resonance p { color: #dcc7bd; font-size: .95rem; line-height: 1.85; margin: 0 0 1rem; }
.stemmen-page .tuning-resonance .tuning-subtitle { color: #edb18e; font-family: Georgia, serif; font-style: italic; font-size: 1.35rem; line-height: 1.5; margin-bottom: 1.8rem; }
.tuning-signature { display: block; margin-top: 1.8rem; color: #f2d0b5; font-family: Georgia, serif; font-style: italic; font-size: 1.3rem; }
.tuning-art { margin: 0 -2rem 0 0; text-align: center; }
.tuning-orbit { width: 100%; aspect-ratio: 1; }
.tuning-orbit svg { display: block; width: 100%; height: 100%; }
.tuning-canvas { display: none; width: 100%; height: 100%; }
.has-canvas .tuning-canvas { display: block; }
.has-canvas .tuning-orbit svg { display: none; }
.tuning-guide { fill: none; stroke: #e4ac88; stroke-opacity: .13; stroke-width: .6; }
.tuning-curve { transform-origin: 300px 300px; fill: none; stroke: url(#tuning-copper); stroke-width: .65; opacity: .72; animation: tuning-turn 100s linear infinite; animation-play-state: paused; }
.tuning-curve-1 { opacity: .4; animation-duration: 135s; animation-direction: reverse; }
.tuning-curve-2 { opacity: .25; animation-duration: 170s; }
.tuning-resonance.is-moving .tuning-curve { animation-play-state: running; }
.tuning-art figcaption span { display: block; color: #e4b69c; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; }
.tuning-art figcaption .tuning-phases { display: flex; justify-content: center; align-items: center; gap: .7em; flex-wrap: wrap; }
.tuning-phase { padding: .55em 0; border-bottom: 1px solid transparent; transition: color .45s ease, text-shadow .45s ease, border-color .45s ease; }
.tuning-resonance[data-phase="grondtoon"] [data-phase-label="grondtoon"],
.tuning-resonance[data-phase="boventonen"] [data-phase-label="boventonen"],
.tuning-resonance[data-phase="samenspel"] [data-phase-label="samenspel"] {
    color: #fff1d9; text-shadow: 0 0 12px #f6a56aa6; border-bottom-color: #efa979;
}
@media (prefers-reduced-motion: reduce) { .tuning-phase { transition: none; } }
.tuning-art figcaption small { display: block; color: #bca29a; font-size: .66rem; margin-top: .7rem; }
.tuning-motion { margin-top: 1rem; border: 0; background: transparent; color: #e4b69c; font: inherit; font-size: .7rem; padding: .6rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tuning-motion:focus-visible { outline: 2px solid #f4c6a4; outline-offset: 3px; }
@keyframes tuning-turn { to { transform: rotate(360deg); } }
@media (max-width: 740px) {
    .tuning-resonance { grid-template-columns: 1fr; width: calc(100vw - 32px); margin-bottom: 3rem; }
    .tuning-art { margin: 1rem auto 0; width: min(100%, 440px); }
    .tuning-resonance h1 { max-width: 470px; }
}
@media (prefers-reduced-motion: reduce) { .tuning-curve { animation: none; } .tuning-motion { display: none; } }
