/* The CV page: one A4 sheet in the site's colors on screen, grayscale on white paper
   when printed. Colors and fonts come from ../tokens.css. The .cv rules are the single
   source for the CV's look; the CV viewer (Claude Vault/10 Career/CV/viewer) links here for them. */

:root {
	--page-margin: 14mm;
}

@page {
	size: A4;
	margin: 0;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--canvas);
	color: var(--text);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* Back link and print button above the sheet */
.bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 210mm;
	margin: 0 auto;
	padding: var(--space-8) 0 var(--space-4);
	font-size: var(--size-small);
}

.bar a {
	color: var(--muted);
	text-decoration: none;
}

.bar a:hover { color: var(--text); }

.print {
	height: 28px;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--ring), var(--shadow-card);
	color: var(--text);
	font: 500 var(--size-small) var(--font-sans);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.print:hover {
	background: var(--surface-hover);
	box-shadow: 0 0 0 1px var(--ring-hover), var(--shadow-card-hover);
}

.print:active { transform: scale(0.96); }

.bar a:focus-visible,
.print:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* One A4 sheet */
.sheet {
	width: 210mm;
	min-height: 297mm;
	margin: 0 auto var(--space-16);
	padding: var(--page-margin);
	background: var(--surface);
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--ring), var(--shadow-pop);
}

/* The CV. Geist for everything, Newsreader italic for the role line and section labels,
   Redaction 50 Italic for the name and organization names. Hierarchy comes from font,
   weight and gray, not rules or boxes. */
.cv {
	--cv-text: var(--text);
	--cv-muted: var(--muted);
	--cv-faint: var(--faint);
	--cv-line: var(--line);
	--cv-pill: var(--line);
	--cv-name: var(--accent);

	color: var(--cv-text);
	font: 9.25pt/1.45 var(--font-sans);
	letter-spacing: -0.004em;
	/* Ligatures can turn "fi" into one glyph that ATS parsers read wrong, so spell every letter out. */
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "calt" 0;
	font-variant-numeric: tabular-nums;
}

/* Header: name, role, contact line */
.cv h1 {
	font: italic 400 25pt/1 var(--font-display);
	letter-spacing: 0;
	color: var(--cv-name);
	margin: 0 0 4px;
}
.cv h1 + p {
	font: italic 400 12pt/1.3 var(--font-serif);
	margin: 0 0 6px;
}
.cv h1 + p strong,
.cv h1 + p em { font: inherit; }
.cv h1 + p + p { color: var(--cv-muted); margin: 0; }

/* Section labels */
.cv h2 {
	font: italic 400 11pt/1.3 var(--font-serif);
	color: var(--cv-muted);
	margin: 14px 0 4px;
	break-after: avoid;
}

/* Entries: the organization with its title and dates as pills beside it (as on the home page),
   then the work at full width. Everything stays in reading order for the PDF's text layer. */
.cv .entry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	margin: 0 0 10px;
	break-inside: avoid;
}
.cv .entry > :not(h3, .meta) { flex-basis: 100%; }
.cv .entry > .meta + * { margin-top: 3px; }
.cv .entry.brief { margin-bottom: 5px; }
.cv h3 {
	font: italic 400 12.5pt/1.25 var(--font-display);
	letter-spacing: 0;
	margin: 0;
}
.cv .entry.brief h3 { font-size: 11pt; }

.cv .meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	color: var(--cv-muted);
}
.cv .tag {
	display: inline-block;
	padding: 0 6px;
	white-space: nowrap;
	border: 0.75pt solid var(--cv-pill);
	border-radius: 999px;
	font-size: 7.5pt;
	font-weight: 500;
	line-height: 13pt;
	letter-spacing: 0.01em;
	color: var(--cv-muted);
}
.cv .tag-role { color: var(--cv-text); }

.cv p { margin: 0 0 4px; }
.cv .entry > p:not(.meta) { color: var(--cv-muted); }
.cv ul { margin: 0 0 4px; padding-left: 14px; }
.cv li { margin: 0 0 2px; padding-left: 2px; }
.cv li::marker { color: var(--cv-faint); }
.cv strong { font-weight: 500; }

.cv a {
	color: inherit;
	text-decoration: underline 1px var(--cv-line);
	text-underline-offset: 2px;
}

.cv a:hover { text-decoration-color: var(--cv-muted); }

/* Phones: the sheet fills the width and grows with its content. */
@media (max-width: 830px) {
	.bar { width: auto; padding: var(--space-6) var(--space-4) var(--space-3); }
	.sheet {
		width: auto;
		min-height: 0;
		margin: 0 var(--space-4) var(--space-12);
		padding: var(--space-6) var(--space-4);
	}
	.cv { font-size: 10.5pt; }
}

/* Paper: always grayscale on white, whatever the theme. */
@media print {
	body { background: #fff; }
	.bar { display: none; }
	.sheet {
		width: 210mm;
		min-height: 0;
		margin: 0;
		padding: var(--page-margin);
		background: #fff;
		border-radius: 0;
		box-shadow: none;
	}
	.cv {
		--cv-text: #0b0d11;
		--cv-muted: #535a66;
		--cv-faint: #646b77;
		--cv-line: #dde1e7;
		--cv-pill: #c9ced6;       /* a step darker than --cv-line so pills hold up on paper */
		--cv-name: #0b0d11;
		font-size: 9.25pt;
	}
}