.site-footer {
	display: grid;
	grid-template-columns: var(--layout);
	gap: var(--gutter);
	position: relative;
	overflow: clip;

	/* margin-top: 150px; */ /* removed for now — .page-content grows to fill, so the footer sits naturally at the bottom */
	min-height: 380px;

	site-index {
		grid-column: 1 / -1;
		padding: calc( var(--gutter) * 4 ) calc( var(--gutter) * 2 );
		position: relative;
		z-index: 1;

		display: grid;
		gap: calc( var(--gutter) * 1.5 );

		align-content: end;

		section {
			display: grid;
			gap: calc( var(--gutter) * 0.5 );
		}

		@media (width >= 1000px) {
			grid-column: 2 / -2;
		}
	}

	art-gallery {
		display: none;
	}

	@media (width >= 1000px) {

		art-gallery {
			display: block;
			position: absolute;
			inset: 0;
			pointer-events: none;
			/* No z-index here — keeping the gallery free of a stacking context
			   so each diorama's data-layer can independently land in front of
			   or behind the inner-column. */
		}

		art-diorama {
			display: block;
			position: absolute;
			z-index: -1; /* default: behind inner-column (which has z-index: 1) */

			canvas {
				display: block;
				width: 100%;
				height: 100%;
				image-rendering: pixelated;
			}
		}

		art-diorama[data-layer='front'] {
			z-index: 2; /* above inner-column */
		}

		/* Named slots — sized responsively, anchored to footer corners. */
		art-diorama[data-slot='corner-left'],
		art-diorama[data-slot='corner-right'] {
			top: auto;
			bottom: 0;
			width: clamp(120px, 16vw, 260px);
			height: clamp(160px, 24vw, 320px);
		}

		art-diorama[data-slot='corner-left'] {
			left: 0;
			right: auto;
			transform: translate(-100%, 0);
		}

		art-diorama[data-slot='corner-right'] {
			right: 0;
			left: auto;
			transform: translate(100%, 0);
		}
	}
}