/* Shared work-page refinements. Load after the work's existing stylesheets. */
/* Preserve the reference top inset explicitly after removing the stray body BOM. */
html[data-interlude-work] body{
  padding-top:22.4px
}
html[data-interlude-work] body.immersive{
  padding-top:0
}
html[data-interlude-work] .site-work-nav{
  margin:2px 0 9px
}
html[data-interlude-work] .intro{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  padding:32px 0 26px
}
html[data-interlude-work] .intro h1{
  font-size:clamp(53px,5.7vw,83px);
  font-weight:400;
  line-height:1;
  letter-spacing:-3px;
  margin:6px 0 12px
}
html[data-interlude-work] .intro .title-key{
  font-size:.62em;
  letter-spacing:-.035em;
  white-space:nowrap
}
html[data-interlude-work="mahler-symphony-2-bernstein-1987"] .intro .title-key{
  display:block;
  margin-top:7px
}
html[data-interlude-work] .intro .intro-meta{
  flex:0 0 auto;
  min-width:270px;
  max-width:none;
  text-align:right;
  margin-top:0;
  padding-bottom:4px
}
html[data-interlude-work] .intro .performer-row{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:9px;
  margin-bottom:15px
}
html[data-interlude-work] .intro .performer-label{
  font-size:14px;
  letter-spacing:0;
  color:#92988f
}
html[data-interlude-work] .intro .performer-en{
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.045em;
  white-space:nowrap;
  color:var(--gold);
  margin:0
}
html[data-interlude-work] .intro .recording-facts{
  font-size:14px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:0;
  color:#a4a89f;
  text-align:right;
  margin:0
}
html[data-interlude-work] .intro .recording-facts>div{
  font:inherit;
  color:inherit;
  margin:0;
  padding:0
}
/* The live orchestral score uses the same paper as the other work pages. */
.mahler-score-profile .live-score-section .score-box{
  --score-paper:#e2d9bf;
  --score-ink:#201e1a;
  background-color:var(--score-paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='223' height='211'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size:223px 211px;
  border-color:#beb18f;
  box-shadow:inset 0 0 16px rgba(101,83,43,.035);
  color:var(--score-ink)
}
.mahler-score-profile .live-score-section .mahler-score-status{
  background:var(--score-paper,#e2d9bf)
}
.mahler-score-profile .score-bottom-tools{
  margin-top:14px
}
.mahler-score-profile .score-fullscreen-toggle{
  margin-left:auto
}
/* Solo score frames keep the existing reading width and engraving scale. */
.solo-score-viewport:not(.score-fullscreen-active):not(:fullscreen){
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  align-self:start;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.solo-score-viewport:not(.score-fullscreen-active):not(:fullscreen)>.score-scroll{
  flex:1 1 0;
  min-height:0;
  height:auto;
  max-height:none
}
.solo-score-viewport:not(.score-fullscreen-active):not(:fullscreen)>.score-caption{
  flex:none
}
/* The HUD follows the actual playback bar height in every work. */
html[data-interlude-work] .immersive .stage-hud{
  bottom:var(--immersive-hud-bottom,144px)
}
/* Playback controls keep their readable size in the immersive viewport. */
.immersive .transport-main,.immersive .transport-mini,.immersive .transport-options{
  flex-shrink:0
}
.immersive .transport-main>.play,.immersive .transport-mini>button{
  flex-shrink:0
}
.immersive .time{
  white-space:nowrap;
  flex:none
}
.immersive .stage-movement{
  min-width:0;
  line-height:1.5
}
.immersive .stage-movement small{
  line-height:1.6;
  margin-top:7px
}
.immersive .transport-mini button{
  width:34px;
  height:36px
}
.immersive .transport-mini .ico{
  width:20px;
  height:20px
}
.immersive .speed{
  min-width:64px;
  min-height:34px;
  font-size:12px
}
@media(max-width:1020px){
  html[data-interlude-work] .intro h1{
    line-height:.96
  }
}
@media(max-width:760px){
  html[data-interlude-work] .intro{
    padding:23px 0 21px;
    align-items:center
  }
  html[data-interlude-work] .intro h1{
    font-size:54px;
    letter-spacing:-2px;
    margin:5px 0 9px
  }
  html[data-interlude-work] .intro .title-key{
    font-size:.54em;
    letter-spacing:-.025em;
    margin-top:9px
  }
  html[data-interlude-work] .intro .intro-meta{
    min-width:0;
    max-width:155px
  }
  html[data-interlude-work] .intro .performer-label{
    font-size:12px
  }
  html[data-interlude-work] .intro .performer-en{
    font-size:13px
  }
  html[data-interlude-work] .intro .recording-facts{
    font-size:12px
  }
  .immersive .transport{
    gap:12px
  }
  .immersive .transport-main{
    gap:10px
  }
  .immersive .transport-main>.play{
    width:42px;
    height:42px
  }
  .immersive .time{
    font-size:12px;
    letter-spacing:.3px
  }
  .immersive .time span{
    margin-left:5px
  }
}
@media(max-width:600px){
  html[data-interlude-work] .intro{
    display:block;
    padding:23px 0
  }
  html[data-interlude-work] .intro h1{
    font-size:clamp(40px,11vw,56px)
  }
  html[data-interlude-work] .intro .title-key{
    display:block
  }
  html[data-interlude-work] .intro .intro-meta{
    max-width:none;
    text-align:left;
    margin-top:18px
  }
  html[data-interlude-work] .intro .performer-row{
    justify-content:flex-start;
    margin-bottom:10px
  }
  html[data-interlude-work] .intro .recording-facts{
    text-align:left;
    line-height:1.85
  }
}
@media(max-width:360px){
  .immersive .transport-main{
    flex-basis:100%;
    justify-content:space-between
  }
  .immersive .transport-options{
    margin-left:auto
  }
}