Refactor section/series labelling on article pages

Update design of section and series labelling on article pages (including interactive and tonal variants), examples of which follow. The design becomes more consistent, and fixes situations in which the current implementation has broken down.

Standard article (desktop) before:
![screen shot 2014-09-22 at 15 06 58](https://cloud.githubusercontent.com/assets/813383/4357502/ca3913ea-4262-11e4-8200-7e88638e0581.png)

Standard article (desktop) after:
![screen shot 2014-09-22 at 15 07 22](https://cloud.githubusercontent.com/assets/813383/4357504/cf0a0244-4262-11e4-8887-b108554bff90.png)

Standard article (mobile) before:
![screen shot 2014-09-22 at 15 08 02](https://cloud.githubusercontent.com/assets/813383/4357508/e40a0ffe-4262-11e4-97b2-0a10ba087e1e.png)

Standard article (mobile) after:
![screen shot 2014-09-22 at 15 07 46](https://cloud.githubusercontent.com/assets/813383/4357510/e6dc472e-4262-11e4-98dd-a75d423c6e27.png)

Feature tone before:
![screen shot 2014-09-22 at 15 10 47](https://cloud.githubusercontent.com/assets/813383/4357517/efda2d8c-4262-11e4-9076-d9ff0b39283e.png)

Feature tone after:
![screen shot 2014-09-22 at 15 11 06](https://cloud.githubusercontent.com/assets/813383/4357523/f8d66df6-4262-11e4-8db9-c9c4c2675ba8.png)

Football clock watch before (very broken):
![screen shot 2014-09-22 at 15 08 45](https://cloud.githubusercontent.com/assets/813383/4357527/fe84b92e-4262-11e4-80a4-58301bf2f1b8.png)

Football clock watch after (fixed):
![screen shot 2014-09-22 at 15 08 33](https://cloud.githubusercontent.com/assets/813383/4357531/06d225b2-4263-11e4-934f-a6b71abc0452.png)
good to use a space here (`$gs-baseline / 2`) to distinguish operators from strings (e.g. `guss-colour`) but not a blocker