/* Content geometry: 4px spacing and baseline units. Chrome retains its scale. */
@layer blocks {
	:where(.brief, .principles, .chapter, .key-figures, .focus-areas, .criteria, .introduction, .gallery, .feature, .quote, .people, .marquee, .contact, .services, .pair, .story, .divider, .enquiry, .posts, .insights-index, .article) {
		--container: 80rem;
		--gutter: var(--space-6);
		--grid-gap: var(--space-6);
		--section-gap: var(--space-10);
		--type-h2-size: 1.875rem;
		--type-h2-line: 2.5rem;
		--type-editorial-title: 1.25rem;
		--type-editorial-line: 1.75rem;
		--type-statement: 1.375rem;
		--type-statement-line: 2.25rem;
		--type-fact: 2rem;
		--type-fact-line: 2.5rem;
		--type-numeral: 2.75rem;
		--type-numeral-line: 3rem;
		font-size: var(--type-body-size);
		line-height: var(--type-body-line);
	}

	/* Text links: small burgundy capitals with a chevron, no underline. */
	:where(.brief, .principles, .chapter, .key-figures, .focus-areas, .criteria, .introduction, .gallery, .feature, .quote, .people, .marquee, .contact, .services, .pair, .story, .divider, .enquiry, .posts, .insights-index, .article) .arrow-link {
		--arrow-link-pad: var(--space-3);
	}

	:where(.brief, .principles, .chapter, .key-figures, .focus-areas, .criteria, .introduction, .gallery, .feature, .quote, .people, .marquee, .contact, .services, .pair, .story, .divider, .enquiry, .posts, .insights-index, .article) .arrow-link:hover {
		text-decoration: none;
	}

	/*
	 * Section spacing. Every block (except the opener) carries data-space,
	 * set per block in the editor ("Abstand": Klein / Normal / Gross,
	 * default Normal) and padded by the matching step from
	 * tokens/layout.css: --space-section-sm | -md | -lg.
	 *
	 * Neighbours on the same surface share one gap instead of adding both
	 * paddings: the later block drops its top padding, and the earlier one
	 * keeps the larger of the two steps below it. A change of surface keeps
	 * both paddings, so each colour field is padded on its own.
	 *
	 * data-flush marks a block that manages its own edges (e.g. the opener):
	 * nothing is shared across it.
	 */
	.site-main > [data-space] {
		--block-space: var(--space-section-md);

		padding-block: var(--block-space);
	}

	.site-main > [data-space="sm"] {
		--block-space: var(--space-section-sm);
	}

	.site-main > [data-space="lg"] {
		--block-space: var(--space-section-lg);
	}

	.site-main > [data-theme="default"]:not([data-flush]) + [data-theme="default"][data-space]:not([data-flush]),
	.site-main > [data-theme="stone"]:not([data-flush]) + [data-theme="stone"][data-space]:not([data-flush]),
	.site-main > [data-theme="ink"]:not([data-flush]) + [data-theme="ink"][data-space]:not([data-flush]) {
		padding-top: 0;
	}

	.site-main > [data-theme="default"][data-space]:not([data-flush]):has(+ [data-theme="default"][data-space="md"]:not([data-flush])),
	.site-main > [data-theme="stone"][data-space]:not([data-flush]):has(+ [data-theme="stone"][data-space="md"]:not([data-flush])),
	.site-main > [data-theme="ink"][data-space]:not([data-flush]):has(+ [data-theme="ink"][data-space="md"]:not([data-flush])) {
		padding-bottom: max(var(--block-space), var(--space-section-md));
	}

	.site-main > [data-theme="default"][data-space]:not([data-flush]):has(+ [data-theme="default"][data-space="lg"]:not([data-flush])),
	.site-main > [data-theme="stone"][data-space]:not([data-flush]):has(+ [data-theme="stone"][data-space="lg"]:not([data-flush])),
	.site-main > [data-theme="ink"][data-space]:not([data-flush]):has(+ [data-theme="ink"][data-space="lg"]:not([data-flush])) {
		padding-bottom: max(var(--block-space), var(--space-section-lg));
	}

	@media (min-width: 48rem) {
		:where(.brief, .principles, .chapter, .key-figures, .focus-areas, .criteria, .introduction, .gallery, .feature, .quote, .people, .marquee, .contact, .services, .pair, .story, .divider, .enquiry, .posts, .insights-index, .article) {
			--gutter: var(--space-12);
			--grid-gap: var(--space-8);
			--section-gap: var(--space-12);
			--type-h2-size: 2.25rem;
			--type-h2-line: 2.75rem;
			--type-statement: 1.5rem;
			--type-statement-line: 2.5rem;
			--type-editorial-title: 1.375rem;
			--type-editorial-line: 2rem;
		}
	}

	@media (min-width: 64rem) {
		:where(.brief, .principles, .chapter, .key-figures, .focus-areas, .criteria, .introduction, .gallery, .feature, .quote, .people, .marquee, .contact, .services, .pair, .story, .divider, .enquiry, .posts, .insights-index, .article) {
			--gutter: var(--space-16);
			--section-gap: var(--space-16);
			--type-h2-size: 2.5rem;
			--type-h2-line: 3rem;
			--type-statement: 1.625rem;
			--type-statement-line: 2.5rem;
			--type-fact: 2.25rem;
			--type-fact-line: 2.75rem;
			--type-numeral: 3.25rem;
			--type-numeral-line: 3.5rem;
		}
	}

	[data-review] { position: relative; }
	[data-review]::after {
		content: attr(data-review);
		position: absolute;
		right: var(--space-2);
		bottom: var(--space-2);
		z-index: 40;
		padding: var(--space-1) var(--space-2);
		background: rgb(0 0 0 / 0.72);
		color: #fff;
		font: 500 0.75rem/1rem ui-monospace, monospace;
		pointer-events: none;
	}
}