/* Shared navigation, keyboard access and narrow-screen controls. */
[hidden] { display: none !important; }
.site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:22px 5%; background:#070e17; color:#e9f2f6; border-bottom:1px solid #253746; }
.site-header .brand { color:#e9f2f6; font-size:13px; letter-spacing:1.5px; text-decoration:none; white-space:normal; }
.site-header .primary-nav { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; width:auto; font-size:15px !important; }
.primary-nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; color:#b7cad7; text-decoration:none; line-height:1.4; }
.primary-nav a:hover, .primary-nav a[aria-current] { color:#ddf77b; text-decoration:underline; text-underline-offset:6px; }
.primary-nav a.listen-action { background:#ddf77b; color:#07121b; padding:12px 22px; font-weight:700; border:1px solid #ddf77b; }
.primary-nav a.listen-action:hover, .primary-nav a.listen-action[aria-current] { color:#07121b; text-decoration:underline; }
.context-nav { display:flex; flex-wrap:wrap; gap:4px 22px; margin:20px 0; font-size:15px !important; }
.context-nav a { display:inline-flex; align-items:center; min-height:44px; color:#8ce3dd; text-decoration:underline; text-underline-offset:5px; line-height:1.5; }
main > .context-nav { max-width:1160px; margin:16px auto 0; padding-inline:6%; }
.skip-link { position:fixed; inset-inline-start:16px; top:12px; z-index:1000; padding:12px 20px; transform:translateY(-180%); background:#ddf77b; color:#07121b; font:700 16px/1.5 Arial,sans-serif; text-decoration:underline; }
.skip-link:focus { transform:none; }
:focus-visible { outline:3px solid #ddf77b !important; outline-offset:4px; box-shadow:0 0 0 5px #07121b; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tools { flex-wrap:wrap; align-items:end; }
.tools label { display:grid; gap:8px; min-width:0; flex:1 1 180px; color:#b7cad7; font-size:15px; }
.tools input, .tools select { width:100%; min-width:0; max-width:100%; min-height:44px; font-size:16px; }
.purchase-explainer { color:#b7cad7; font-size:16px; line-height:1.7; max-width:760px; margin:18px 0 26px; }
.cover img, img.cover { height:auto; }
.flight-cross { color:#94a8b9; }
.sample-dock input[type="range"], .sample-dock button { min-height:44px; }
.sample-dock .sample-toggle, .sample-dock .sample-close { min-width:44px; }
.sample-dock .sample-info, .sample-dock .sample-timeline { min-width:0; }
.sample-title, .sample-message, .album h3, .video-caption h2 { overflow-wrap:anywhere; }
main { min-width:0; }
audio { max-width:100%; }
@media (max-width:760px) {
  .site-header { gap:16px; padding:18px 6%; }
  .site-header .primary-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; font-size:16px !important; }
  .primary-nav a { min-height:48px; justify-content:flex-start; padding:10px 12px; white-space:normal; overflow-wrap:anywhere; }
  .primary-nav a.listen-action { justify-content:center; padding:10px 12px; }
  .tools { width:100%; }
  .tools label { flex-basis:100%; }
  .sample-dock { max-height:calc(100dvh - 32px); overflow:auto; }
  .track > .text-button { white-space:normal; }
  dialog { width:calc(100% - 24px); max-width:900px; max-height:calc(100dvh - 24px); overflow:auto; }
  .track { overflow-wrap:anywhere; }
  .context-nav { font-size:16px !important; gap:4px 18px; }
  .studio-heading, .studio-footer { flex-wrap:wrap; }
  .stamp .stamp-licensing:last-child { display:block; white-space:normal; }
}
@media (max-width:430px) {
  .hero h1 { font-size:clamp(42px,13vw,56px); line-height:1.04; }
  .video-intro h1 { font-size:clamp(40px,12vw,52px); overflow-wrap:anywhere; }
  .hero-actions .cta { max-width:100%; white-space:normal; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}