@layer defaults {
	@font-face {
		font-family: 'Larken';
		src: url('/holding/fonts/larken/Larken-Light.woff2') format('woff2');
		font-weight: normal; font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Roundo';p
		src: url('/holding/fonts/roundo/Roundo-Regular.woff2') format('woff2');
		font-weight: normal; font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Roundo';
		src: url('/holding/fonts/roundo/Roundo-Medium.woff2') format('woff2');
		font-weight: bold; font-style: normal;
		font-display: swap;
	}

	:root {
		--font-family-primary   : "Roundo", "Helvetica Neue", Helvetica, Arial, sans-serif;
		--font-family-headings  : "Larken", "Helvetica Neue", Helvetica, Arial, sans-serif;

		--colour-white:  hsl(0,   100%, 100%); /* ffffff */
		--colour-black:  hsl(0,   100%, 0%);   /* 000000 */
		--colour-grey-1: hsl(200, 9%, 74%);    /* b7bfc3 */
		--colour-blue-1: hsl(209, 53%, 24%);   /* 1d3f5e */
		--colour-blue-2: hsl(205, 52%, 29%);   /* 245272 */
	}
}

@layer design {
	:where(.skiplink) {
		position: absolute; inset: 0 0 auto 0;
		padding: 0.5em;
		background-color: var(--colour-black); color: var(--colour-white);
		text-decoration: underline;
		clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
		transition: clip-path, var(--very-fast);

		&:focus {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}

	:where(.brandStrip) {
		--_blockPadding: 10px;

		display: flex; justify-content: center; padding-block: var(--_blockPadding);
		background-color: var( --colour-grey-1 );

		img {
			display: block;
			width: min( 260px, 40vw ); height: auto;
		}
	}

	:where(.pageContext) {
		--_gap: 2rem;
		display: grid;

		& > * {
			grid-area: 1/1;
		}

		& > img {
			height: auto; min-height: 100%; width: 100%;
			object-fit: cover;
		}

		.textWrapper {
			padding: var(--_gap);
			display: grid; justify-content: center; align-items: center;
		}

		.text {
			& > * {
				text-align: center;
				max-width: 34em; margin-inline: auto;

				&:not(:first-child) {
					margin-block-start: var(--_gap);
				}
			}
		}

		:where(
			hgroup,
			.description
		) {
			color: var(--colour-grey-1);
			font-size: var(--font-size-promoted);
		}

		:where(.actions) {
			display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center;
		}
	}

	:where(.textByImage) {
		--_gap: 2rem;

		.wrapper {
			& > img {
				height: auto; min-height: 100%; width: 100%;
				object-fit: cover;
			}
		}

		.textWrapper {
			padding: var(--_gap);
			display: grid; justify-content: center; align-items: center;
			background: url("/holding/images/drop-grey.svg") 50% 50% / auto 80% no-repeat;
		}

		.text {
			& > * {
				text-align: center;
				max-width: 34em; margin-inline: auto;

				&:not(:first-child) {
					margin-block-start: var(--_gap);
				}
			}
		}

		&[data-block-colour='grey'] {
			background-color: var(--colour-grey-1); color: var(--colour-blue-1);

			h2:before {
				background-image: url("/holding/images/drop-blue.svg");
			}
		}
		&[data-block-colour='blue'] {
			background-color: var(--colour-blue-1); color: var(--colour-grey-1);

			.textWrapper {
				background-image: url("/holding/images/drop-blue.svg");
			}
			h2:before {
				background-image: url("/holding/images/drop-grey.svg");
			}
		}

		@media screen and (min-width: 38em) {
			.wrapper {
				display: grid; grid-template-columns: 1fr 1fr;
			}

			.text > * {
				text-align: left;
			}

			&[data-image-position='right'] {
				img          { order: 2; }
				.textWrapper { order: 1; }
			}
		}

		@media screen and (min-width: 62em) {
			h2:before {
				content: "";
				display: block; width: 1.2em; aspect-ratio: 1 / 1.3829243697; margin-block-end: 1em;
				background: inherit 50% 50% / contain no-repeat;
			}
		}
	}

	main > img {
		display: block; width: 100%;
	}

	footer {
		--_blockPadding: 3em;

		padding-block: var(--_blockPadding);
		background-color: var(--colour-blue-2); color: var(--colour-grey-1);
		text-align: center;

		& > * + * {
			margin-block-start: 1em;
		}

		img {
			width: 190px;
		}

		.sm ul {
			display: flex; justify-content: center;

			svg {
				display: block; width: 1.8em; height: 1.8em;

				:is(path,circle) {
					fill: var(--colour-grey-1);
				}
			}
		}
	}

	@media screen and (min-width: 38em) {
		:where(.brandStrip) {
			--_blockPadding: 20px;
		}
	}

	@media screen and (min-width: 62em) {
		:where(.brandStrip) {
			--_blockPadding: 30px;
		}

		:where(.pageContext) {
			--_gap: 3rem;
		}
	}
}