.site-footer {
	background-color: var(--fill-secondary);
	color: var(--ink-primary);
	overflow: clip;


	.call-to-action {
		p {
			max-width: 40ch;
		}
	}

	.actions {
		.cta {
			
		}
	}

	@media (width >= 1610px) {
		margin-bottom: calc( var(--common-gap) * 2 );
		border-radius: var(--fill-corners);
	}

	inner-column {
		/* Bottom inset clears the iOS home indicator now that the viewport
		   is viewport-fit=cover (env() is 0 on non-notch devices, so this is
		   a no-op there). */
		padding-block: 60px calc(30px + env(safe-area-inset-bottom));
		row-gap: 60px;
		align-items: start;
	}

	/* ----- Top row: tagline + 2 menus ----- */

	.tagline {
		grid-column: 1 / -1;

		h2 {
			max-width: 22ch;
		}
	}

	.menu {
		h3 {
			font-size: var(--step-0);
			font-weight: 500;
			margin: 0 0 1em;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 0.5em;
		}

		a {
			color: var(--ink-secondary);
			text-decoration: none;
		}

		a:hover {
			color: var(--ink-primary);
		}
	}

	/* ----- Watermark: giant ETERNL behind the rest ----- */

	.watermark {
		grid-column: 1 / -1;
		opacity: 0.08;

		max-width: 1200px;
		margin-top: 100px;

		svg {
			display: block;
			width: 100%;
			height: auto;
			/* fill='currentColor' on the path — inherits the footer's
			   light text color, which lands as a subtle lighter mark on
			   the dark background. */
		}
	}

	/* ----- Bottom row: copyright + principles ----- */

	.legal-row {
		grid-column: 1 / -1;

		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 1em;

		font-size: var(--step-down-1);
		color: var(--ink-auxiliary);

		p { margin: 0; }

		a {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 3px;
		}
	}

	.principles {
		letter-spacing: 0.08em;
	}

	/* ----- Wide: tagline left, two menus right ----- */

	@media (width >= 700px) {
		.tagline   { grid-column: 1 / 7; }
		.menu-1    { grid-column: 7 / 10; }
		.menu-2    { grid-column: 10 / -1; }
	}
}