Is it possible to prevent text-shadow from overlapping text within the same element (e.g. a h1)? Please see an exaggerated example image below – in my use case I would like the text to be very bright white, but instead the shadow is overlapping it and causing murky grey areas.

I made a reduced test case here to demonstrate: http://codepen.io/approach/pen/LgaIe
Note : I deliberately used a small line-height to highlight this issue