@layer components {
	/* ── Editorial Homepage Theme Variables & Canvas ── */
	body.home,
	.home .nice-main,
	.nice-landing {
		background-color: var(--nice-canvas) !important;
		color: var(--nice-black);
		border-radius: 0;
	}

	/* ── Gateway previews ── */
	/*
	 * Auto-fit rather than a fixed three-column track: unpublishing one preview
	 * has to leave the remaining two reading as a deliberate pair, not as a
	 * three-column grid with a hole in it.
	 */
	.nice-gateway-projects {
		background: var(--nice-canvas);
		border-bottom: 1px solid var(--nice-subtle-border);
	}

	.nice-gateway-projects__grid {
		box-sizing: border-box;
		display: grid;
		gap: 1.5rem;
		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
		margin-inline: auto;
		max-width: 75rem;
		padding-block: 1.5rem 3rem;
		width: 100%;
	}

	.nice-gateway-project {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.nice-gateway-project__media {
		aspect-ratio: 16 / 9;
		background: var(--nice-surface-container);
		border: 1px solid var(--nice-subtle-border);
		margin-bottom: 0.5rem;
		overflow: hidden;
	}

	.nice-gateway-project__media img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.nice-gateway-project__title {
		color: var(--nice-black);
		font-family: var(--nice-font-heading);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.1;
		margin: 0;
	}

	.nice-gateway-project__summary {
		color: var(--nice-muted);
		font-family: var(--nice-font-body);
		font-size: 1rem;
		line-height: 1.45;
		margin: 0;
	}

	.nice-gateway-project__link {
		margin-top: auto;
		padding-top: 0.5rem;
	}

	/* ── Section 01: Hero ── */
	/*
	 * Dark, like the Events and Studio heroes, so the floating bar has something
	 * to float over on all three sites.
	 *
	 * Those two heroes are dark because a photograph sits under a 48% veil. The
	 * gateway has no hero image of its own, and borrowing a division's would
	 * quietly pick a side, so this is the same flat ground with no image over
	 * it. Deliberately not a gradient: check-theme.mjs bans them outright, and
	 * the flat editorial surface is the point of the system rather than an
	 * omission.
	 */
	.nice-landing-hero {
		background: var(--nice-black);
		color: var(--nice-surface-container-low);
		overflow: hidden;
		position: relative;
	}

	.nice-landing-hero__inner {
		position: relative;
		z-index: 1;
	}

	.nice-landing-hero__inner {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		justify-content: center;
		margin-inline: auto;
		max-width: 75rem;
		min-height: 420px;
		padding: 6rem 1.25rem 1.5rem;
		width: 100%;
	}

	@media (min-width: 48rem) {
		.nice-landing-hero__inner {
			min-height: 400px;
			padding: 6.5rem 2.5rem 2rem;
		}
	}

	.nice-landing-hero__overline {
		align-items: center;
		display: flex;
		gap: 0.625rem;
	}

	.nice-pip {
		background: var(--nice-red);
		border-radius: 50%;
		display: inline-block;
		flex-shrink: 0;
		height: 0.375rem;
		width: 0.375rem;
	}

	.nice-overline-text {
		/* Muted against the dark ground rather than the old cream one. */
		color: color-mix(in srgb, var(--nice-surface-container-low) 70%, transparent);
		font-family: var(--nice-font-label);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.nice-landing-hero__statement {
		max-width: 64rem;
	}

	.nice-hero-headline {
		color: var(--nice-surface-container-low) !important;
		font-family: var(--nice-font-heading) !important;
		font-size: 2.5rem !important;
		font-weight: 500 !important;
		letter-spacing: 0 !important;
		line-height: 0.92 !important;
		margin: 0 !important;
		overflow-wrap: anywhere;
		text-wrap: balance;
		text-transform: uppercase;
	}

	@media (min-width: 48rem) {
		.nice-hero-headline {
			font-size: 4rem !important;
		}
	}

	.nice-hero-support {
		color: color-mix(in srgb, var(--nice-surface-container-low) 82%, transparent);
		font-family: var(--nice-font-body);
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 1.4;
		margin: 0;
		max-width: 36rem;
	}

	@media (min-width: 48rem) {
		.nice-hero-support {
			font-size: 1.5rem;
		}
	}

	/* ── Sections 02 & 03: Editorial Visual Doors ── */
	.nice-doors-section {
		background: var(--nice-canvas);
		border-bottom: 1px solid var(--nice-subtle-border);
		position: relative;
	}

	.nice-doors-grid {
		box-sizing: border-box;
		display: grid;
		gap: 1rem;
		grid-template-columns: minmax(0, 1fr);
		margin-inline: auto;
		max-width: 60rem;
		padding-block: 1.5rem;
		padding-inline: 0;
		width: calc(100% - 2.5rem);
	}

	@media (min-width: 48rem) {
		.nice-doors-grid {
			width: calc(100% - 5rem);
		}
	}

	@media (min-width: 64rem) {
		.nice-doors-grid {
			gap: 1.5rem;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			padding-block: 2rem 3rem;
		}
	}

	.nice-door {
		background: var(--nice-surface-container-low);
		border: 1px solid var(--nice-subtle-border);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 1.5rem;
		position: relative;
		transition: background-color var(--wp--custom--motion--duration-normal) var(--wp--custom--motion--easing);
	}

	@media (min-width: 48rem) {
		.nice-door {
			padding: 2rem;
		}
	}

	@media (min-width: 64rem) {
		.nice-door {
			padding: 2rem;
		}
	}

	.nice-door:hover {
		background: var(--nice-surface-container-low);
	}

	.nice-door__media {
		aspect-ratio: 16 / 9;
		background: var(--nice-surface-container);
		border: 1px solid var(--nice-subtle-border);
		box-sizing: border-box;
		margin-bottom: 1.5rem;
		overflow: hidden;
		width: 100%;
	}

	/*
	 * The division imagery stays in full colour at rest. Desaturating it until
	 * hover hid the one thing the card is there to show, and left the two
	 * divisions reading as a single grey block on first paint.
	 */
	.nice-door__media img {
		height: 100%;
		object-fit: cover;
		transition: transform var(--wp--custom--motion--duration-image-hover) var(--wp--custom--motion--easing);
		width: 100%;
	}

	.nice-door:hover .nice-door__media img,
	.nice-door:focus-within .nice-door__media img {
		transform: scale(1.018);
	}

	.nice-door__body {
		flex-grow: 1;
		margin-bottom: 0.5rem;
	}

	/*
	 * The title now leads the card, above the image, so its margins belong to
	 * that position rather than to a block sitting under the picture.
	 */
	.nice-door__title {
		color: var(--nice-black) !important;
		font-family: var(--nice-font-heading) !important;
		font-size: 2.5rem !important;
		font-weight: 500 !important;
		letter-spacing: 0 !important;
		line-height: 0.95 !important;
		margin-block-end: 1.25rem !important;
		margin-block-start: 0 !important;
		text-transform: uppercase;
	}

	.nice-door__description {
		color: var(--nice-muted);
		font-family: var(--nice-font-body);
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.45;
		margin: 0;
		max-width: 32rem;
	}

	.nice-door__action {
		padding-top: 0;
	}

	/*
	 * The whole card is the link. The overlay belongs to the anchor rather than
	 * to a click handler, so it stays a real link: cmd-click and middle-click
	 * open a new tab, the status bar shows the destination, and there is still
	 * exactly one focusable thing in the card rather than a card and a link
	 * announced separately.
	 *
	 * The cost is that text inside the card can no longer be selected.
	 */
	.nice-door__link::after {
		content: "";
		inset: 0;
		position: absolute;
		z-index: 1;
	}

	.nice-door__link {
		align-items: center;
		color: var(--nice-black);
		display: inline-flex;
		font-family: var(--nice-font-label);
		font-size: 0.8125rem;
		font-weight: 600;
		gap: 0.5rem;
		letter-spacing: 0.08em;
		min-height: 2.75rem;
		text-decoration: none;
		text-transform: uppercase;
		transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	.nice-door__arrow {
		display: inline-block;
		transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	.nice-door__link:hover,
	.nice-door__link:focus-visible,
	.nice-door:hover .nice-door__link,
	.nice-door:focus-within .nice-door__link {
		color: var(--nice-red);
	}

	/* Focus lands on the link but reads as the whole card, which is the target. */
	.nice-door:focus-within {
		outline: 2px solid var(--nice-black);
		outline-offset: 3px;
	}

	.nice-door__link:focus-visible {
		outline: none;
	}

	.nice-door__link:hover .nice-door__arrow,
	.nice-door__link:focus-visible .nice-door__arrow,
	.nice-door:hover .nice-door__arrow {
		transform: translateX(0.35rem);
	}

	/* ── Footer on Homepage: Quiet & Architectural ── */
	.home .nice-site-footer {
		background: var(--nice-canvas);
		border-top: 1px solid var(--nice-subtle-border);
		color: var(--nice-black);
		padding-block: 4rem 2.5rem;
	}

	.home .nice-footer-grid {
		display: grid;
		gap: 2.5rem;
		grid-template-columns: 1fr;
	}

	@media (min-width: 48rem) {
		.home .nice-footer-grid {
			gap: 3rem;
			grid-template-columns: 2fr 1fr 1fr 1fr;
		}
	}

	.home .nice-footer-brand p {
		color: var(--nice-muted);
		font-family: var(--nice-font-body);
		font-size: 0.875rem;
		line-height: 1.5;
		margin: 0;
		max-width: 22rem;
	}

	.home .nice-footer-nav span.nice-eyebrow {
		color: var(--nice-muted);
		display: block;
		font-family: var(--nice-font-label);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		margin-bottom: 0.75rem;
		text-transform: uppercase;
	}

	.home .nice-footer-nav a {
		color: var(--nice-black);
		font-family: var(--nice-font-body);
		font-size: 1rem;
		text-decoration: none;
		transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}

	.home .nice-footer-nav a:hover,
	.home .nice-footer-nav a:focus-visible {
		color: var(--nice-red);
	}

	.home .nice-footer-meta {
		border-top: 1px solid var(--nice-subtle-border);
		color: var(--nice-muted);
		display: flex;
		font-family: var(--nice-font-label);
		font-size: 0.75rem;
		justify-content: space-between;
		letter-spacing: 0.05em;
		margin-top: 3rem;
		padding-top: 1.5rem;
	}

	.home .nice-mobile-menu__links a {
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
	}
}

@layer motion {
	@media (prefers-reduced-motion: reduce) {
		.nice-door__media img {
			transform: none;
			transition: none;
		}

		.nice-door__arrow {
			transform: none;
			transition: none;
		}
	}
}