/* Resume styles */

:root {
	--ink: #1f2328;
	--muted: #5b616b;
	--line: #e3e5e8;
	--accent: #9b1c1c;
	--accent-soft: #fbeeee;
	--paper: #ffffff;
	--bg: #f3f4f6;
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.6 "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, p, ul { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.resume {
	max-width: 960px;
	margin: 40px auto;
	padding: 56px 64px 32px;
	background: var(--paper);
	border-top: 6px solid var(--accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
}

/* -- header -- */
.hd {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 28px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.hd h1 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -.5px;
}
.headline {
	margin-top: 8px;
	color: var(--accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.hd-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: 14px;
	white-space: nowrap;
}
.hd-contact a { color: var(--ink); }
.print-btn {
	margin-top: 10px;
	padding: 6px 14px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: none;
	color: var(--accent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.print-btn:hover { background: var(--accent); color: #fff; }
.game-link { margin-top: 6px; font-size: 13px; font-weight: 600; }

/* -- sections -- */
.section {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}
.section:last-of-type { border-bottom: 0; }
.section-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 600;
	color: var(--muted);
}
.lead { font-size: 18px; line-height: 1.55; }

/* -- skills -- */
.skills {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 28px;
}
.skill h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.skill p { color: var(--muted); font-size: 14px; line-height: 1.5; }

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
}
.tags li {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12.5px;
	font-weight: 500;
}

/* -- experience -- */
.job { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--line); break-inside: avoid; }
.job:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.job-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.job-hd h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 21px; font-weight: 700; }
.job-date { color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.job-role { color: var(--accent); font-weight: 600; margin: 2px 0 8px; }
.job ul { margin-top: 8px; padding-left: 18px; }
.job li { margin: 3px 0; }
.job li::marker { color: var(--accent); }

/* -- projects -- */
.projects-intro { color: var(--muted); margin-bottom: 18px; }
.projects {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 28px;
}
.project { break-inside: avoid; }
.project h3 {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 18px;
	font-weight: 700;
}
.project h3 a { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; }
.project p { font-size: 14px; line-height: 1.5; }
.project .project-stack { margin-top: 6px; color: var(--muted); font-size: 12.5px; }

/* -- education -- */
.edu { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.edu h3 { font-size: 15px; font-weight: 700; }
.edu p { color: var(--muted); }

/* -- footer -- */
.ft {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
	text-align: center;
}

/* -- 404 -- */
.not-found { max-width: 640px; }
.not-found h1 {
	margin: 8px 0 12px;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 46px;
	line-height: 1.1;
}
.not-found .lead { margin-bottom: 20px; color: var(--muted); }

/* -- small screens -- */
@media (max-width: 760px) {
	.resume { margin: 0; padding: 32px 16px; box-shadow: none; }
	.hd { flex-direction: column; align-items: flex-start; }
	.hd h1 { font-size: 36px; }
	.hd-contact { align-items: flex-start; }
	.section { grid-template-columns: 1fr; gap: 12px; }
	.skills, .projects, .edu { grid-template-columns: 1fr; }
	.job-hd { flex-direction: column; gap: 0; }
}

/* -- print / PDF -- */
@page { size: A4; margin: 14mm 14mm 12mm; }
@media print {
	body { background: #fff; font-size: 9.5pt; line-height: 1.45; }
	.resume { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
	.print-btn, .game-link, .ft { display: none; }
	.hd { padding-bottom: 14px; }
	.hd h1 { font-size: 26pt; }
	.section { padding: 12px 0; grid-template-columns: 100px 1fr; gap: 16px; }
	.section-title { font-size: 13pt; }
	.lead { font-size: 11pt; }
	.skills { gap: 10px 20px; }
	.skill h3, .edu h3 { font-size: 9.5pt; }
	.skill p { font-size: 8.5pt; }
	.tags { margin-top: 12px; }
	.tags li { font-size: 8pt; }
	.projects-intro { margin-bottom: 10px; }
	.projects { gap: 10px 20px; }
	.project h3 { font-size: 11pt; }
	.project h3 a { font-size: 8.5pt; }
	.project p { font-size: 8.5pt; }
	.project .project-stack { margin-top: 2px; font-size: 8pt; }
	.job { padding-bottom: 10px; margin-bottom: 10px; }
	.job-hd h3 { font-size: 13pt; }
	.job-date { font-size: 9pt; }
	.job-role { margin-bottom: 4px; }
	.job ul { margin-top: 4px; }
	.job li { margin: 1px 0; }
	a { color: var(--ink); }
	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}