/* Hero: text column beside a git graph that runs its full height */
.n-home-hero {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-9);

	>section {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-l);
		position: relative;

		>div:first-child {
			flex: 3 1 24rem;
			display: grid;
			gap: var(--space-xl);
			align-content: start;

			>div:first-child {
				display: grid;
				gap: var(--space-m);
				justify-items: start;
			}

			>div:last-child {
				display: grid;
				gap: var(--space-s);
			}
		}

		>div:last-child {
			position: absolute;
			height: 100%;
			width: 20rem;
			right: 0;
		}
	}

	h1 {
		max-width: 15ch;
		text-wrap: balance;
		color: var(--color-neutral-1);
	}

	.h-lede {
		font-size: var(--font-size-1);
	}

	ul {
		list-style: none;
		display: grid;
		gap: var(--space-2xs);
	}

	li {
		font-family: var(--font-family-2);
		font-size: var(--font-size-2);
		line-height: 1.3;
		color: var(--color-neutral-2);
	}

	svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		mask-image: linear-gradient(to bottom, transparent, black 8%, black 80%, transparent);

		path {
			fill: none;
			stroke: var(--color-neutral-7);
			stroke-width: 2;
			vector-effect: non-scaling-stroke;
		}

		circle {
			fill: var(--color-neutral-9);
			stroke: var(--color-neutral-7);
			stroke-width: 2;
			vector-effect: non-scaling-stroke;
		}

		circle.head {
			fill: var(--color-color-1);
			stroke: var(--color-color-1);
		}
	}
}

/* Viode: full-bleed band in the dark scheme */
.n-viode.dark {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);
	color: var(--color-neutral-2);

	>section {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
		gap: var(--space-l);
		align-items: end;

		>div {
			display: grid;
			gap: var(--space-s);
			justify-items: start;
		}
	}

	h2 {
		font-size: var(--font-size-6);
		line-height: 1;
		color: var(--color-neutral-1);
	}

	p {
		font-size: var(--font-size-1);
		line-height: 1.4;
		color: var(--color-neutral-3);
		max-width: 34ch;
		text-wrap: pretty;
	}
}

/* About: one statement, details in one column */
.n-about {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-9);

	>section {
		display: grid;
		gap: var(--space-l);

		>p {
			font-family: var(--font-family-2);
			font-size: var(--font-size-3);
			line-height: 1.3;
			color: var(--color-neutral-1);
			max-width: 28ch;
			text-wrap: balance;
		}

		>div {
			display: grid;
			gap: var(--space-s);

			>p {
				color: var(--color-neutral-3);
				text-wrap: pretty;
			}
		}
	}
}

/* CV: full content, dense layout, prints as a document */
.n-cv {
	padding: var(--space-l) 0;

	>section {
		display: grid;
		gap: var(--space-m);

		>header {
			display: grid;
			gap: var(--space-3xs);
			justify-items: start;

			>p {
				color: var(--color-neutral-5);
			}

			>a {
				margin-block-start: var(--space-xs);
			}
		}

		>article {
			display: grid;
			gap: var(--space-2xs);
			border-top: 1px solid var(--color-neutral-7);
			padding-block-start: var(--space-s);

			>p {
				color: var(--color-neutral-3);
				text-wrap: pretty;
			}

			>h5 {
				margin-block-start: var(--space-2xs);
			}

			>ul {
				margin: 0;
				padding-left: var(--space-m);
				display: grid;
				gap: var(--space-3xs);
				color: var(--color-neutral-3);
			}

			>ol {
				list-style: none;
				margin: 0;
				padding: 0;
				display: grid;

				>li {
					display: grid;
					gap: var(--space-3xs);
					padding-block: var(--space-2xs);
					break-inside: avoid;

					>p {
						color: var(--color-neutral-5);
					}

					>ul {
						margin: 0;
						padding-left: var(--space-m);
						display: grid;
						gap: var(--space-3xs);
						color: var(--color-neutral-3);
					}
				}
			}
		}
	}
}

/* Homepage latest posts */
.n-posts {
	padding: 0 0 var(--space-l-2xl);
	background-color: var(--color-neutral-9);

	>section {
		display: grid;
		gap: var(--space-m);

		>ul {
			list-style: none;
			margin: 0;
			padding: 0;

			>li {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
				justify-content: space-between;
				gap: var(--space-3xs) var(--space-m);
				border-top: 1px solid var(--color-neutral-8);
				padding-block: var(--space-xs);

				&:last-child {
					border-bottom: 1px solid var(--color-neutral-8);
				}

				>a {
					max-width: 36ch;
					font-family: var(--font-family-2);
					font-size: var(--font-size-1);
					color: var(--color-neutral-1);
					text-wrap: pretty;

					&:hover {
						color: var(--color-color-1);
					}
				}

				>time {
					color: var(--color-neutral-5);
					font-weight: 400;
					font-variant-numeric: tabular-nums;
					background-color: transparent;
				}
			}
		}
	}
}

.logo {
	color: var(--color-light-neutral-9);
	font-size: var(--step-1);
	display: flex;
	align-items: center;
	border-radius: 100px;
	padding: var(--space-2xs);
	background: var(--color-neutral-2);
}

.logo svg {
	height: 3rem;
	width: 3rem;
}

.mention {
	color: var(--color-neutral-4);
}