Fix winter olympics nav styles (#15353)

There are two visual bugs in the new Winter Olympics header:

1. The mobile height of `116px` is being applied at all breakpoints.
2. The `phablet` image is being used at the `tablet` breakpoint and
above, rather than the separate images designed for those breakpoints.

The styles to apply the correct heights and images exist in the source
code, but they're not being built into the output CSS correctly. This is
happening due to fields being overridden when composing styles with
object spread syntax. The solution is to use Emotion's `css` function to
apply composition instead.

More details
------------

The issue is with styles being applied to the `nav` element
specifically, as that's where both the height and background image are
configured. The main nav styles have two fields used to apply different
heights using media queries: `from.tablet` and `from.desktop`. In
isolation this works.

However, the styles for the background images are merged into the nav
styles using object spread syntax. These also contain `from.tablet` and
`from.desktop` fields, and because they are spread after the earlier
fields, they override them. This deletes the earlier height styles and
they do not appear in the output CSS, leaving only the mobile height.

The resulting object does now contain entries for all five background
images. However, the order is important, as later media queries will
override earlier ones. In the original background images object the
fields are defined in increasing size order, `mobileLandscape` up to
`desktop`, but merging the objects *changes* this order.

When two JS objects are merged, any keys that appear only in the second
object will appear after any keys from the first object in the result.
However, if any fields are shared between the two objects, the
**values** from the second object override those in the first, but the
**keys** retain their original position in the result.

In the nav styles this means that when the following merge occurs:

```ts
const navStyles = {
    [from.tablet]: "tablet height",
    [from.desktop]: "tablet height",
};

const backgroundImageStyles = {
    [from.mobileLandscape]: "background image",
    [from.phablet]: "background image",
    [from.tablet]: "background image",
    [from.desktop]: "background image",
};

const result = { ...navStyles, ...backgroundImageStyles };
```

the resulting object looks like this:

```ts
const result = {
    [from.tablet]: "background image",
    [from.desktop]: "background image",
    [from.mobileLandscape]: "background image",
    [from.phablet]: "background image",
};
```

The values from the second object are all there, but their order has
been rearranged due to the presence of some of the same keys in the
first object. This means that the phablet media query will appear _last_
in the output CSS. As these are all "min-width" queries, they all apply
at the wider breakpoints, so the one that appears last takes precedence.

When Emotion's `css` function is used instead it applies a different
algorithm for composing styles, and ensures that they all appear in the
output in the expected order.

Author: JamieB-gu

dotcom-rendering/src/components/DirectoryPageNav.stories.tsx

@@ -31,3 +31,9 @@ export const OtherCompetition = {
 		pageId: 'football/premierleague/table',
 	},
 } satisfies Story;
+
+export const WinterOlympics = {
+	args: {
+		pageId: 'sport/winter-olympics-2026',
+	},
+} satisfies Story;

dotcom-rendering/src/components/DirectoryPageNav.tsx

@@ -119,19 +119,21 @@ export const DirectoryPageNav = ({ pageId, pageTags }: Props) => {
 
 	const { textColor, backgroundColor } = config;
 
-	const nav = css({
-		backgroundColor,
-		'&': css(grid.paddedContainer),
-		alignContent: 'space-between',
-		height: 116,
-		[from.tablet]: {
-			height: 140,
-		},
-		[from.desktop]: {
-			height: 150,
+	const nav = css(
+		{
+			backgroundColor,
+			'&': css(grid.paddedContainer),
+			alignContent: 'space-between',
+			height: 116,
+			[from.tablet]: {
+				height: 140,
+			},
+			[from.desktop]: {
+				height: 150,
+			},
 		},
-		...backgroundImageStyles(config.backgroundImages),
-	});
+		backgroundImageStyles(config.backgroundImages),
+	);
 
 	const largeLinkStyles = css({
 		...headlineBold24Object,