Update visuallyhidden styles

Noticed that the words were being read out of order in VoiceOver
and updated the CSS to the current recommendation in a similar
github issue.

Specifically, this comment:
https://github.com/h5bp/html5-boilerplate/issues/1985#issuecomment-394096182

For completeness, here is the updated class.

```
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto; /* new - was 1px */
    margin: 0; /* new - was -1px */
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}
```

web/src/styles.js

@@ -117,12 +117,12 @@ export const focusRing = css`
 export const visuallyhidden = css`
   border: 0;
   clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
+  height: auto;
+  margin: 0;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
+  white-space: nowrap;
 `
 
 export const visuallyhiddenMobile = css`