/* The home page. Loaded after base.css. */

body {
	padding: calc(clamp(1.467rem, 6vw, 2.4rem) + 1.867rem) clamp(1.6rem, 7vw, 2.667rem) clamp(1.467rem, 6vw, 2.4rem);
}

.lead { opacity: 0; animation: rise .5s var(--ease-out) forwards; }
h1 {
	font-size: 1.305rem;
	font-variation-settings: "wght" 500;
	letter-spacing: -.02em;
	width: max-content;
}
h1 span { transition: font-variation-settings .15s ease; }
h1 span:hover { font-variation-settings: "wght" 700; }
h1 span:hover + span,
h1 span:has(+ span:hover) { font-variation-settings: "wght" 620; }
h1 span:hover + span + span,
h1 span:has(+ span + span:hover) { font-variation-settings: "wght" 560; }
.intro, .philo, .updated { font-size: 1.059rem; }
.intro { margin-top: 1.467rem; }
.philo { margin-top: .8rem; }
.updated { margin-top: .8rem; color: var(--muted); }
.links { margin-top: 1.467rem; color: var(--muted); font-size: 1.059rem; }
.links a { border-color: transparent; }
.links a:hover { color: var(--fg); }

section {
	margin-top: clamp(2.133rem, 6vw, 3.467rem);
	font-size: 1.059rem;
}
section .label {
	display: block;
	font-size: .896rem;
	color: var(--muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: .533rem;
	opacity: 0;
	animation: rise .45s var(--ease-out) forwards;
}
section .row,
.exp .item {
	display: flex;
	border-top: 1px solid var(--rule);
	animation: rise .45s var(--ease-out) backwards;
	transition: opacity .2s ease;
}
.exp:has(.item:hover) .item:not(:hover),
section:has(.row:hover) .row:not(:hover) { opacity: .4; }
section .row { padding: .467rem 0; }
.year {
	color: var(--muted);
	width: 3.2em;
	flex: none;
	font-variant-numeric: tabular-nums;
}
.title { color: var(--fg); font-weight: 550; }
.title .sub { color: var(--muted); font-weight: 400; transition: color .2s ease; }
.rowlink {
	display: flex;
	gap: 1.4em;
	width: 100%;
	color: inherit;
	border-bottom: 0;
	transition: transform .15s ease;
}
.rowlink:hover { transform: translateX(.3rem); }
.rowlink:hover .sub { color: var(--fg); }

.exp .item { padding: .933rem 0; }
.exp .body { line-height: 1.5; }
.exp .name { color: var(--fg); font-weight: 550; }
.exp .desc { color: var(--muted); margin-top: 2px; }
.exp .role { color: var(--muted); margin-top: .267rem; }
/* A baked outline, not type. `font-size` stays only because the box below
   is sized in em of the glyph's ink box. */
.new {
	font-size: 1.134rem;
	display: inline-block;
	width: 2.2588em;
	height: .726em;
	vertical-align: -.015em;
	/* .574em of gap, plus the .065em side bearing the N used to carry. */
	margin-left: .639em;
	transform: rotate(-4deg);
}