.hero.svelte-1uha8ag {
		display: grid;
		grid-template-columns: var(--gutter-label) minmax(0, 1fr);
		gap: var(--space-xl);
		padding-block: var(--space-3xl) var(--space-3xl);
	}

	.hero__portrait.svelte-1uha8ag {
		width: 7rem;
		height: 7rem;
		border-radius: 50%;
		object-fit: cover;
	}

	.hero__text.svelte-1uha8ag {
		display: grid;
		gap: var(--space-lg);
		max-width: var(--measure-prose);
	}

	.hero__role.svelte-1uha8ag {
		margin-top: calc(var(--space-sm) * -1);
		color: var(--color-accent);
	}

	.hero__links.svelte-1uha8ag {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm) var(--space-lg);
		font-family: var(--font-mono);
		font-size: 0.82rem;
	}

	.hero__links.svelte-1uha8ag a:where(.svelte-1uha8ag):first-child {
		font-weight: 600;
		color: var(--color-accent);
	}

	.approach.svelte-1uha8ag,
	.projects.svelte-1uha8ag {
		display: grid;
		gap: var(--space-xl);
		max-width: var(--measure-prose);
	}

	.approach.svelte-1uha8ag p:where(.svelte-1uha8ag),
	.projects.svelte-1uha8ag p:where(.svelte-1uha8ag):not(.meta) {
		margin-top: var(--space-xs);
		color: var(--color-ink-2);
	}

	.projects.svelte-1uha8ag .meta:where(.svelte-1uha8ag) {
		margin-top: 0.1rem;
	}

	.projects.svelte-1uha8ag .stack:where(.svelte-1uha8ag) {
		margin-top: var(--space-sm);
	}

	.projects.svelte-1uha8ag strong:where(.svelte-1uha8ag) {
		font-weight: 600;
		color: var(--color-ink);
	}

	.timeline.svelte-1uha8ag {
		display: grid;
		gap: var(--space-lg);
	}

	.timeline.svelte-1uha8ag li:where(.svelte-1uha8ag) {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: var(--space-md);
	}

	.timeline.svelte-1uha8ag .meta:where(.svelte-1uha8ag) {
		padding-top: 0.15rem;
	}

	.timeline.svelte-1uha8ag p:where(.svelte-1uha8ag) {
		color: var(--color-muted);
		font-size: 0.95rem;
	}

	.muted.svelte-1uha8ag {
		font-weight: 400;
		color: var(--color-muted);
	}

	.more.svelte-1uha8ag {
		margin-top: var(--space-xl);
		font-family: var(--font-mono);
		font-size: 0.82rem;
		color: var(--color-soft);
	}

	@media (max-width: 680px) {
		.hero.svelte-1uha8ag {
			grid-template-columns: 1fr;
			padding-top: var(--space-lg);
		}

		.hero__portrait.svelte-1uha8ag {
			width: 5.5rem;
			height: 5.5rem;
		}

		.timeline.svelte-1uha8ag li:where(.svelte-1uha8ag) {
			grid-template-columns: 1fr;
			gap: 0.1rem;
		}
	}