/* v331 — Shared horizontal center for the five Work disciplines.
   The old work-section padding reserves a left rail (3vw + 152px) but
   has only 3.5vw on the right. Center header, tabs and editorial layouts
   against #work's real content viewport instead of this asymmetric area.
   Keep the rail, artwork sizes, masks and existing scroll layout intact. */
@media(min-width:761px){
  html body #views #work:is(
    [data-cat="animation2d"],
    [data-cat="animation3d"],
    [data-cat="art2d"],
    [data-cat="storyboard"],
    [data-cat="projects"]
  ){
    --od-work-balanced-shift:calc((clamp(22px,3.5vw,75px) - var(--padL)) / 2);
  }

  /* Keep the header's previous positioning unchanged. */
  html body #views #work[data-cat] > .work-section > .work-topline{
    left:var(--od-work-balanced-shift,0px)!important;
    right:auto!important;
  }

  /* A sticky inset (left) is a boundary, not a reliable visual shift.
     Translate the menu relative to its naturally centered auto margins. */
  html body #views #work[data-cat] > .work-section > .od-work-common-bar{
    left:auto!important;
    right:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:translateX(var(--od-work-balanced-shift,0px))!important;
  }

  /* Art 2D's gallery was centered only within the padded section. */
  html body #views #work[data-cat="art2d"] > .work-section #odArt2dGallery{
    left:var(--od-work-balanced-shift)!important;
    right:auto!important;
  }

  /* Projects has no dedicated centering observer. Its entire showcase,
     including Groove, Devotus and Personal, follows the same viewport center. */
  html body #views #work[data-cat="projects"] > .work-section > .od-projects-showcase{
    left:var(--od-work-balanced-shift)!important;
    right:auto!important;
  }

  /* Animation and Storyboard are already corrected by the reel-centering
     script. This variable acts only as its pre-measurement CSS fallback. */
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="storyboard"])
    .od-animation-reels,
  html body #views #work[data-cat="storyboard"] .od-storyboard-showcase{
    left:var(--od-reel-center-offset,var(--od-work-balanced-shift))!important;
  }
}
/* Mobile Work pages use symmetric 4vw padding and need no correction. */