@layer layout {

	.wrap {
		width: min(100% - (var(--gutter) * 2), var(--wrap-max));
		margin-inline: auto;
	}

	.band {
		background: var(--bg);
		color: var(--fg);
		padding-block: var(--space-xl);
	}

	.band--hero {
		padding-block: var(--space-2xl) var(--space-xl);
	}

	.band--intro {
		padding-block: var(--space-2xl) var(--space-l);
	}

	.band--slot { padding-block: var(--space-m); }

	.band + .band { padding-block-start: var(--space-xl); }

	.flow > * + * { margin-block-start: var(--space-m); }

	.u-sr-only:not(:focus):not(:active) {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* For screen readers only: the homepage text fade keeps the whole sentence here once */
	.sr {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}

	/* A line of the faded text, as the browser wrapped it */
	.split .line { display: block; width: max-content; max-width: 100%; white-space: nowrap; }

	.skip-link:focus {
		position: absolute;
		inset-block-start: var(--space-xs);
		inset-inline-start: var(--space-xs);
		z-index: 100;
		padding: var(--space-xs) var(--space-s);
		background: var(--paper);
		color: var(--ink-900);
	}
}