:root {
	--ink: #16232b;
	--body: #2f3d45;
	--muted: #62717a;
	--rule: #d5dde0;
	--teal: #1f6f6b;
	--side: #12343b;
	--side-text: #e6eeee;
	--side-muted: #9cc1c1;
	--brass: #d2ac62;
	--paper: #e8ecec;
	--card: #ffffff;
	--side-w: 19.5rem;
	--serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

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

html {
	background: var(--paper);
	color: var(--body);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

body { margin: 0; }
h1, h2, h3, h4, h5, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: inherit; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, .skip:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* ---------- Page frame: sidebar + main ---------- */

#cv {
	display: grid;
	grid-template-columns: var(--side-w) minmax(0, 1fr);
	grid-template-areas:
		"identity main"
		"side     main";
	grid-template-rows: auto 1fr;
	max-width: 1080px;
	margin: 2rem auto;
	background: linear-gradient(to right, var(--side) var(--side-w), var(--card) var(--side-w));
	box-shadow: 0 1px 2px rgba(18, 52, 59, .12), 0 12px 40px rgba(18, 52, 59, .1);
}

.identity { grid-area: identity; }
#mainArea { grid-area: main; }
.side { grid-area: side; }

/* ---------- Sidebar ---------- */

.identity, .side { color: var(--side-text); }
.identity { padding: 3rem 2rem 1.5rem; }
.side { padding: 0.5rem 2rem 3rem; }

.identity h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 3.1rem;
	line-height: 1;
	letter-spacing: -0.01em;
	color: #fff;
}

.tagline {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--brass);
}

.contact {
	margin-top: 1.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.contact li + li { margin-top: 0.5rem; }
.contact a { text-decoration-color: rgba(230, 238, 238, .35); }
.contact a:hover { text-decoration-color: currentColor; }

.side section { margin-top: 2rem; }
.side h2 {
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	padding-bottom: 0.45rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px solid rgba(156, 193, 193, .35);
}
.side p { font-size: 0.875rem; line-height: 1.55; }
.side .degree { font-weight: 600; color: #fff; }

.skills div + div { margin-top: 0.9rem; }
.skills dt { font-size: 0.875rem; font-weight: 600; color: #fff; }
.skills dd { font-size: 0.85rem; line-height: 1.5; color: var(--side-muted); }

/* ---------- Main column ---------- */

#mainArea { padding: 3rem 3rem 3.5rem; }

#mainArea section + section { margin-top: 2.75rem; }

#mainArea h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1.15;
	color: var(--teal);
	margin-bottom: 1.25rem;
}

.profile { font-size: 1.02rem; line-height: 1.65; }

/* ---------- Work history ---------- */

.roles { --dot: 12px; }

.company {
	position: relative;
	padding: 0 0 2.5rem 1.75rem;
	background: linear-gradient(var(--rule), var(--rule)) 0 0.45rem / 2px calc(100% - 0.45rem) no-repeat;
	-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.company:last-child { padding-bottom: 0; background: none; }

.company::before {
	content: '';
	position: absolute;
	left: calc(1px - var(--dot) / 2);
	top: 0.45rem;
	width: var(--dot); height: var(--dot);
	border-radius: 50%;
	background: var(--card);
	border: 2px solid var(--teal);
	-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.company.current::before { background: var(--teal); }

.company > header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.1rem 1.5rem;
}
.company h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.25;
	color: var(--ink);
}
.org-note {
	font-family: var(--sans);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--muted);
	margin-left: 0.4rem;
}
.span {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.position { margin-top: 0.9rem; }
.position + .position {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule);
}

.position h4 { font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.tenure { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.scope { margin-top: 0.5rem; }
.position h4 + ul, .tenure + ul, .scope + ul { margin-top: 0.5rem; }

.position li, .project li { position: relative; padding-left: 1.1rem; margin-top: 0.35rem; }
.position li::before, .project li::before {
	content: '';
	position: absolute;
	left: 0.1rem; top: 0.72em;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--teal);
}

.stack {
	margin-top: 0.9rem;
	font-size: 0.85rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--muted);
}

.position { break-inside: avoid-page; }
.company > header { break-after: avoid; }

/* ---------- Projects ---------- */

.project + .project { margin-top: 1.75rem; }
.project { break-inside: avoid; }
.project h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.project h3 span { display: block; font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.project h3 + ul { margin-top: 0.5rem; }

.screen-only { display: list-item; }
.updated { margin-top: 2rem; font-size: 0.8rem; color: var(--side-muted); }
.contact li.screen-only { margin-top: 0.5rem; }

.skip {
	position: absolute; left: -999px; top: 0;
	background: var(--ink); color: #fff; padding: 0.5rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ---------- Tablet and phone: one column ---------- */

@media (max-width: 860px) {
	#cv {
		display: block;
		margin: 0;
		background: var(--card);
		box-shadow: none;
	}
	.identity, .side { background: var(--side); }
	.identity { padding: 2.5rem 1.5rem 1.75rem; }
	.identity h1 { font-size: 2.6rem; }
	.side { padding: 0.25rem 1.5rem 2.5rem; }
	#mainArea { padding: 2.5rem 1.5rem 3rem; }
}

@media (max-width: 480px) {
	.company { padding-left: 1.4rem; }
	.company > header { flex-direction: column; }
}

/* ---------- Print ---------- */

@page { size: A4; margin: 9mm 16mm; }

@media print {
	html { background: #fff; color: #1d2a31; font-size: 9pt; line-height: 1.42; }
	#cv { display: flex; flex-direction: column; margin: 0; max-width: none; background: none; box-shadow: none; }
	/* Flatten the columns so sections can be reordered: skills straight after the profile */
	#mainArea, .side { display: contents; }
	.identity { order: 0; }
	.sec-profile { order: 1; }
	.sec-skills { order: 2; }
	.sec-work { order: 3; }
	.sec-projects { order: 4; }
	.sec-edu { order: 5; }
	.sec-interests { order: 6; }
	#cv section { margin-top: 1.2rem; }
	.skip, .screen-only { display: none; }
	a { text-decoration: none; color: inherit; }

	/* Masthead */
	.identity, .side { background: none; color: inherit; padding: 0; }
	.identity { padding-bottom: 0.6rem; border-bottom: 1.5pt solid var(--teal); }
	.identity h1 { color: var(--ink); font-size: 2.5rem; line-height: 1.05; }
	.tagline { color: var(--teal); font-size: 1.05rem; margin-top: 0.35rem; }
	.contact { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: 0.5rem; font-size: 0.95rem; }
	.contact li + li { margin-top: 0; }
	.contact li + li::before { content: '\2022'; color: var(--teal); margin-right: 1.1rem; }

	/* Section headings */
	#mainArea h2, .side h2 {
		font-family: var(--sans); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
		color: var(--teal); padding: 0 0 0.25rem; margin-bottom: 0.7rem; border-bottom: 0.5pt solid var(--rule);
		break-after: avoid;
	}
	.profile { font-size: inherit; line-height: 1.5; }

	/* Work history: no timeline, company name left / dates right */
	.company, .company:last-child { padding: 0 0 0.9rem; background: none; }
	.company::before { display: none; }
	.company > header { align-items: baseline; border-bottom: 0; }
	.company h3 { font-size: 1.3rem; }
	.span, .tenure { font-size: 0.9rem; color: var(--muted); }
	.position { margin-top: 0.5rem; break-inside: auto; }
	.position + .position { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 0.5pt dotted var(--rule); }
	.position h4 { font-size: 1.05rem; }
	.scope { margin-top: 0.3rem; }
	.position li, .project li { margin-top: 0.18rem; break-inside: avoid; }
	.position li::before, .project li::before { background: var(--ink); }
	.stack { margin-top: 0.45rem; font-size: 0.85rem; color: var(--muted); }
	h3, h4, .tenure, .company > header { break-after: avoid; }
	p, li { orphans: 2; widows: 2; }
	.project + .project { margin-top: 0.9rem; }

	/* Skills / education / interests */
	.side p { font-size: inherit; }
	.side .degree, .skills dt { color: var(--ink); font-size: inherit; }
	.skills dd { color: var(--body); font-size: inherit; }
	.skills { columns: 2; column-gap: 2rem; }
	.skills div, .skills div + div { break-inside: avoid; margin-top: 0; padding-bottom: 0.45rem; }
	.side section { break-inside: avoid; }
}