@reference "../../../../app.css";

/*
 * Hackable all the way down: the heading's placement and the body's spacing
 * (Hackable.svelte). The cards and the editor (DollyCanvas.svelte) are styled in place.
 */
.landing {
	.hk {
		/* A touch more air than the page's rhythm below desktop, to set the section apart;
		   desktop's rhythm already has it. */
		padding-block: calc(var(--section-y) + 40px);

		@media (width >= 64rem) {
			padding-block: var(--section-y);
		}
	}

	/* Flush left on one run below desktop; centred on the page and
	   stacked on desktop, as the self-host heading is. */
	@media (width >= 64rem) {
		.hk-head {
			text-align: center;
			translate: calc((var(--rail-end) - var(--rail-lane)) / 2) 0;
		}
		.hk-head .gh :where(.solid, .dim) {
			display: block;
		}
	}

	.hk-body {
		margin-top: 48px;

		@media (width >= 64rem) {
			margin-top: 64px;
		}
	}
}