/* A compact, automatic layout for the same listening field on small screens. */
@media (max-width:640px) {
  .site-header .identity-line {
    display:block;
    min-height:200px;
  }
  .site-header #noise-instrument {
    position:absolute;
    top:28px;
    left:0;
    width:100%;
    max-width:none;
    margin:0;
    transform:none;
  }
  .site-header .noise-colors {
    position:absolute;
    top:0;
    right:0;
    width:108px;
    margin:0;
  }
  .site-header .noise-actions {
    position:absolute;
    top:38px;
    left:28%;
    width:112px;
    margin:0;
    flex-wrap:nowrap;
  }
  .site-header #noise-instrument .noise-level { width:112px; }
  .site-header #noise-instrument .noise-request,
  .site-header .sound-request { font-size:9px; line-height:1.5; }
  .site-header .noise-request::before,
  .site-header .sound-request::before { inset:-7px 0; }
  .site-header #noise-instrument .noise-level,
  .site-header .sound-stop .sound-level {
    height:24px;
    touch-action:pan-y pinch-zoom;
  }
  .site-header #noise-instrument .noise-level { margin-top:0; }
  .site-header .sound-stop .sound-level { margin-top:4px; }
  .site-header .sound-tones { left:calc(100% - 100px); top:112px; }
  .site-header .sound-choir {
    left:min(calc(var(--noise-request-end,calc(28% + 72px)) + 20px),calc(100% - 100px)) !important;
    top:174px;
  }
  .site-header nav {
    display:grid;
    grid-template-columns:max-content max-content max-content;
    column-gap:26px;
    row-gap:10px;
    margin-top:14px;
    line-height:1.5;
  }
  .site-header nav .listening-nav { grid-column:1 / -1; }
  .top-field { padding-bottom:28px; }
  .top-field .header-work-filter { padding:18px 0 18px; }
  .header-work-filter .filters {
    padding-left:0;
    column-gap:22px;
    row-gap:10px;
    line-height:1.4;
  }
  .header-work-filter .filters button { white-space:nowrap; }
  main#main {
    scroll-padding-top:22px;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y pinch-zoom;
  }
  .inline-audio__button {
    flex-basis:36px;
    width:36px;
    height:36px;
    touch-action:manipulation;
  }
  .inline-audio__seek,
  .inline-audio__volume { height:28px; touch-action:pan-y pinch-zoom; }
  .inline-audio__time { font-size:10px; }
  .track-heading .track-duration,
  .composer-years,
  .repertoire-movements { font-size:10.5px; }
  .page { padding-top:44px; padding-bottom:64px; }
  #works-page { padding-top:0; }
}
@media (max-width:380px) {
  .header-work-filter .filters { column-gap:16px; }
}
@media(max-width:360px) {
  .site-header .noise-colors { top:44px; }
  .site-header .sound-tones { top:118px; }
}

/* A narrow crescendo replaces the flat tracks without moving header controls. */
.site-header #noise-instrument .noise-level,
.site-header #noise-instrument .noise-morph,
.site-header .sound-stop .sound-level,
.site-header .sound-stop .sound-intensity {
  background:center/100% 7px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 7' preserveAspectRatio='none'%3E%3Cpath d='M1 3.5L109 1M1 3.5L109 6' fill='none' stroke='%238a8a8a' stroke-width='.65' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.site-header .noise-level::-webkit-slider-runnable-track,
.site-header .noise-morph::-webkit-slider-runnable-track,
.site-header .sound-level::-webkit-slider-runnable-track { background:transparent; }
.site-header .noise-level::-moz-range-track,
.site-header .noise-morph::-moz-range-track,
.site-header .sound-level::-moz-range-track { background:transparent; }