/* The controls sit directly on the photograph's dark area, without a container. */
.hero-audio {
    position: absolute;
    right: var(--page-gutter);
    bottom: clamp(48px, 7svh, 88px);
    width: min(39vw, 530px);
    color: #dce2e8;
}
.hero-audio-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-left: 64px; }
.hero-audio-heading h2 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.hero-audio-model { margin: 0; color: #a8b2bf; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.hero-audio-transport { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.hero-audio-play { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid #dce2e866; border-radius: 50%; background: #ffffff05; color: #f2f5f7; cursor: pointer; transition: background 150ms, border-color 150ms; }
.hero-audio-play .audio-play-icon { margin-left: -2px; }
.hero-audio-play .audio-pause-icon, .hero-audio.is-playing .audio-play-icon { display: none; }
.hero-audio.is-playing .audio-pause-icon { display: block; }
.hero-audio-wave { position: relative; flex: 1; min-width: 0; height: 44px; }
.hero-audio-wave svg { display: block; width: 100%; height: 100%; }
.hero-wave-line { stroke: #c4cedb24; stroke-width: 1; }
.hero-wave-base { fill: #c5cfda; opacity: .45; }
.hero-wave-played { fill: #ee9a8f; opacity: .85; }
.hero-audio-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.hero-audio-seek::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.hero-audio-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1px; height: 100%; background: transparent; }
.hero-audio-seek::-moz-range-track { height: 100%; background: transparent; }
.hero-audio-seek::-moz-range-thumb { width: 1px; height: 100%; border: 0; background: transparent; }
.hero-audio-seek:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 3px; }
.hero-audio-time { display: flex; flex: none; flex-direction: column; gap: 6px; width: 30px; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.hero-audio-time span:last-child { color: #8795a6; font-size: 10px; }
.hero-audio-native { display: block; width: 100%; height: 44px; margin-top: 12px; }
.hero-audio-caption { margin: 6px 0 0 64px; color: #a8b2bf; font-size: 10px; line-height: 1.5; }
.hero-audio-caption a { color: inherit; text-decoration: underline; text-decoration-color: #a8b2bf55; text-underline-offset: 3px; }
.hero-audio-caption a:hover { color: #eef2f6; }
.hero-audio [data-audio-status]:not(.sr-only) { margin: 10px 0 0 64px; color: #ffb4ab; font-size: 11px; line-height: 1.5; }
.hero-audio[aria-busy="true"] .hero-audio-play { border-style: dashed; }
@media (hover: hover) {
    .hero-audio-play:hover { background: #ffffff12; border-color: #ffffffb3; }
}
@media (min-width: 1024px) and (max-height: 740px) {
    .hero { min-height: max(620px, 100svh, 50vw); }
    .hero-audio { bottom: 36px; }
}
@media (max-width: 1023px), (max-aspect-ratio: 1/1) {
    .hero-audio { position: relative; inset: auto; width: min(530px, calc(100% - var(--page-gutter) * 2)); margin: -10px auto 36px; }
    .hero-content { margin-top: 0; }
}
@media (max-width: 767px) {
    .hero { --hero-photo-height: clamp(280px, 42svh, 390px); }
    .hero-audio { margin-top: -8px; margin-bottom: 32px; }
    .hero-audio-heading { margin-left: 56px; gap: 8px; flex-wrap: wrap; }
    .hero-audio-heading h2 { font-size: 12px; }
    .hero-audio-transport { gap: 12px; margin-top: 8px; }
    .hero-audio-play { width: 44px; height: 44px; }
    .hero-audio-caption { margin-left: 56px; }
    .hero-audio [data-audio-status]:not(.sr-only) { margin-left: 56px; }
}
@media (min-width: 601px) and (max-width: 1023px) and (max-height: 500px) and (min-aspect-ratio: 3/2) {
    .hero { display: flex; flex-direction: column; }
    .hero-visual, .hero::after { height: max(360px, 100svh); bottom: auto; }
    .hero-content { order: 1; min-height: max(360px, 100svh); }
    .hero-audio { order: 2; margin: 16px auto 32px; }
}