/* Experimental home variant (/home-alt/): a split screen that fits one viewport.
   The left third is the title and links; the right two-thirds is a 2×2 grid of
   the work. No header, no footer (the layout sets `bare: true`). Scoped to
   .home-alt and layered over the shared .home styles (this body carries both). */

/* Full-bleed: drop the centred reading measure and page padding; the .split
   owns the whole viewport and supplies its own frame. */
.home-alt main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The split carries its own brand mark (.dd-mark) and nav, so the site header
   is redundant here — hide it. The footer stays (it returns once `bare` is
   dropped from the page front matter). */
.home-alt > header {
	display: none;
}

/* The page is one viewport split into six blocks, three per row. The left
   column carries the text (the title cell, then the nav cell); the other four
   blocks are the projects, filled row by row in document order. */
.home-alt .split {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: var(--sp-6) var(--sp-5);
	min-height: 100vh;
	padding: var(--sp-7) var(--sp-8);
	box-sizing: border-box;
}

/* --- Title block: Dd pinned to its top-left, the title to its bottom-left --- */
.home-alt .split-title {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.home-alt .split-title .hero {
	margin: 0;
}

/* The Dd mark heads the title block (it used to live in the header). */
.home-alt .dd-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	font-family: var(--font-mono);
	font-weight: bold;
	font-size: var(--fs-sm);
	background: var(--accent);
	color: var(--ink-bg);
	text-decoration: none;
	transition: background-color var(--dur-fast);
}

.home-alt .dd-mark:hover {
	background: var(--text-strong);
}

.home-alt .hero-hint {
	margin-bottom: 0;
}

/* --- Nav block: links anchored to its top-left --- */
.home-alt .split-nav {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.home-alt .split-nav a {
	width: fit-content;
}

/* The email is a quiet footnote under the two real links. */
.home-alt .split-nav a.split-nav-email {
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--text-faint);
}

/* Each card fills its grid block: the vignette grows to take whatever height
   is left after the name+caption, instead of locking to the 16:9 card ratio. */
.home-alt .app-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.home-alt .app-card .app-vignette {
	aspect-ratio: auto;
	flex: 1;
}

/* Card text matches the left panel: the name reads like the nav links, the
   caption like the email footnote. */
.home-alt .app-card h2 {
	font-size: var(--fs-md);
}

.home-alt .app-card p {
	font-size: var(--fs-sm);
	color: var(--text-faint);
}

/* The full-height six-block split only reads well when the columns are wide.
   Below that the text moves to a full-width intro and the projects flow into a
   plain grid at their natural 16:9 — no forced 50vh rows stretching them tall. */
@media (max-width: 90em) {
	.home-alt .split {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		gap: var(--sp-7) var(--sp-5);
		min-height: 0;
		padding: var(--sp-7);
	}

	/* Title and nav read as one intro above the projects, then the four cards
	   in document order. */
	.home-alt .split-title,
	.home-alt .split-nav {
		grid-column: 1 / -1;
	}

	.home-alt .split-title { order: 1; }
	.home-alt .split-nav { order: 2; }
	.home-alt .app-card { order: 3; }

	/* The title no longer fills a tall cell — just stack the mark and heading. */
	.home-alt .split-title {
		justify-content: flex-start;
		gap: var(--rhythm-block);
	}

	/* Auto-height rows give the vignette nothing to fill, so put the cards back
	   on their natural 16:9 proportions. */
	.home-alt .app-card {
		height: auto;
	}

	.home-alt .app-card .app-vignette {
		aspect-ratio: var(--aspect-card);
		flex: none;
	}
}

/* --- Narrow: a single column --- */
@media (max-width: 48em) {
	.home-alt .split {
		grid-template-columns: 1fr;
		padding: var(--sp-6) var(--gutter);
	}

	/* The fs-2xl display title overflows a phone; step it down to the H1 size. */
	.home-alt .hero {
		font-size: var(--fs-xl);
	}
}