@layer reset, base, layout, components;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		text-size-adjust: 100%;
	}

	body,
	h1,
	p {
		margin: 0;
	}

	a {
		color: inherit;
	}
}

@layer base {
	:root {
		--ink: #111210;
		--paper: #f0efe9;
		--muted: #696b65;
		--line: #cbc9c0;
		--accent: #2864ff;
		--page-x: clamp(1.25rem, 4vw, 4.5rem);
		--font-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
		--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	}

	html {
		background: var(--paper);
		color: var(--ink);
		font-family: var(--font-sans);
		scroll-behavior: smooth;
	}

	body {
		min-width: 20rem;
		min-height: 100svh;
		background:
			linear-gradient(to right, transparent calc(100% - 1px), rgb(17 18 16 / 5%) 1px)
				0 0 / clamp(4.5rem, 8vw, 8rem) 100%,
			var(--paper);
	}

	::selection {
		background: var(--accent);
		color: white;
	}

	:focus-visible {
		outline: 3px solid var(--accent);
		outline-offset: 0.3rem;
	}
}

@layer layout {
	.page-shell {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		min-height: 100svh;
		padding-inline: var(--page-x);
	}

	.site-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		min-height: clamp(5.5rem, 10vh, 7.5rem);
		border-bottom: 1px solid var(--line);
	}

	.hero {
		display: grid;
		grid-template-columns: minmax(5rem, 0.25fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 4vw, 5rem);
		min-height: 100%;
		padding-block: clamp(3rem, 9vh, 7rem);
	}

	.hero__content {
		display: grid;
		align-content: center;
		max-width: 88rem;
	}

	.hero__details {
		display: grid;
		grid-template-columns: minmax(16rem, 0.8fr) minmax(18rem, 1fr);
		gap: clamp(2rem, 8vw, 9rem);
		align-items: end;
		margin-block-start: clamp(3rem, 8vh, 6rem);
	}

	.site-footer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2rem;
		align-items: end;
		padding-block: clamp(1.5rem, 4vh, 3rem);
		border-top: 1px solid var(--line);
	}

	@media (max-width: 52rem) {
		.hero {
			grid-template-columns: 1fr;
		}

		.hero__details,
		.site-footer {
			grid-template-columns: 1fr;
		}

		.copyright {
			justify-self: start;
		}
	}

	@media (max-width: 38rem) {
		.site-label {
			display: none;
		}

		.hero {
			padding-block: 3rem;
		}
	}
}

@layer components {
	.skip-link {
		position: fixed;
		z-index: 10;
		inset: -5rem auto auto 1rem;
		padding: 0.75rem 1rem;
		background: var(--ink);
		color: white;
		text-decoration: none;
	}

	.skip-link:focus {
		inset-block-start: 1rem;
	}

	.identity {
		display: inline-flex;
		align-items: center;
		gap: 0.8rem;
		font-weight: 650;
		text-decoration: none;
	}

	.identity__mark {
		display: grid;
		width: 2.25rem;
		aspect-ratio: 1;
		place-items: center;
		background: var(--ink);
		color: var(--paper);
		font-family: var(--font-mono);
		font-size: 0.7rem;
		font-weight: 700;
	}

	.identity__name {
		font-size: 0.86rem;
		letter-spacing: 0.01em;
	}

	.site-label,
	.eyebrow,
	.hero__index,
	.ai-note__label,
	.copyright {
		color: var(--muted);
		font-family: var(--font-mono);
		font-size: clamp(0.64rem, 0.6rem + 0.12vw, 0.75rem);
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}

	.hero__index {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-block: 0.45rem;
	}

	.hero__index span:last-child {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	.eyebrow {
		margin-bottom: clamp(1.5rem, 4vh, 3rem);
		color: var(--accent);
	}

	h1 {
		max-width: 12ch;
		font-size: clamp(3.25rem, 8.3vw, 9.5rem);
		font-weight: 540;
		letter-spacing: -0.075em;
		line-height: 0.88;
		text-wrap: balance;
	}

	h1 span {
		display: block;
		color: var(--muted);
		font-weight: 400;
	}

	.introduction {
		max-width: 34rem;
		font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
		line-height: 1.55;
	}

	.contact-link {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.35rem 1rem;
		align-items: center;
		padding-block: 1rem;
		border-bottom: 2px solid var(--ink);
		text-decoration: none;
		transition:
			border-color 180ms ease,
			color 180ms ease;
	}

	.contact-link span {
		grid-column: 1;
		color: var(--muted);
		font-family: var(--font-mono);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.contact-link strong {
		grid-column: 1;
		font-size: clamp(1rem, 1rem + 0.45vw, 1.35rem);
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	.contact-link svg {
		grid-column: 2;
		grid-row: 1 / 3;
		width: 1.75rem;
		fill: none;
		stroke: currentColor;
		stroke-linecap: square;
		stroke-width: 1.6;
		transition: transform 180ms ease;
	}

	.contact-link:is(:hover, :focus-visible) {
		border-color: var(--accent);
		color: var(--accent);
	}

	.contact-link:is(:hover, :focus-visible) svg {
		transform: translate(0.2rem, -0.2rem);
	}

	.ai-note {
		display: grid;
		grid-template-columns: auto minmax(0, 34rem);
		gap: clamp(1rem, 3vw, 3rem);
		align-items: baseline;
	}

	.ai-note p {
		color: var(--muted);
		font-size: clamp(0.78rem, 0.76rem + 0.14vw, 0.9rem);
		line-height: 1.55;
	}

	.copyright {
		white-space: nowrap;
	}

	@media (max-width: 52rem) {
		.hero__index {
			display: none;
		}
	}

	@media (max-width: 38rem) {
		.identity__name {
			font-size: 0.8rem;
		}

		h1 {
			font-size: clamp(3rem, 15vw, 5rem);
		}

		.ai-note {
			grid-template-columns: 1fr;
			gap: 0.65rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			transition-duration: 0.01ms !important;
		}
	}
}