/* v187 page-local: center the deck title on the true viewport midpoint,
   not in the leftover space between unequal header flanks.
   Loaded only by /2d/ and /viewing-room/. Does not change shared #jf-hdr60 CSS. */

html body.hdr60-page #jf-hdr60{
  position:sticky!important;
}

html body.hdr60-page #jf-hdr60 .h60-center{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:var(--h60-bottom)!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  max-width:calc(100% - 2 * max(var(--h63-left-width), calc(var(--h60-clockw) + 36px)) - 2 * var(--h60-pad) - 16px)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-end!important;
  z-index:1!important;
  pointer-events:none;
  grid-column:auto!important;
}

html body.hdr60-page #jf-hdr60 .h60-center .h61-deck-label{
  pointer-events:auto;
  max-width:100%!important;
  text-align:center!important;
}

/* Keep left/right flanks in their grid columns once the center item is out of flow,
   and above the title so Back / CONTACT stay reachable if space is tight. */
html body.hdr60-page #jf-hdr60 .h60-left{
  grid-column:1!important;
  position:relative!important;
  z-index:2!important;
}
html body.hdr60-page #jf-hdr60 .h60-right{
  grid-column:3!important;
  position:relative!important;
  z-index:2!important;
}

/* Phone stacked-label vertical slot matches the discs (unchanged from shared CSS). */
@media (max-width:600px) and (orientation:portrait){
  html body.hdr60-page #jf-hdr60 .h60-center{
    height:var(--h60-disc)!important;
    align-items:center!important;
    align-self:auto!important;
  }
}