:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #f7f6f3; color: #1a1a1a; font-family: system-ui, sans-serif; line-height: 1.5; }
.viewer { min-height: 100%; }
header {
	padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
	display: flex; align-items: center; flex-wrap: wrap;
	justify-content: space-between; gap: 10px; background: #1a1a1a; color: #fff;
}
h1 { margin: 0; font-size: 16px; font-weight: 600; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
header a {
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; text-decoration: none; border: 1px solid #686a70;
	border-radius: 4px; padding: 7px 12px; font-size: 14px;
	min-height: 44px;
}
header a:hover, header a:focus { background: #3d3f44; }

main { max-width: 40rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.cv-name { font-size: 1.6rem; font-weight: 700; margin: 0; }
.cv-tagline { color: #6b6b6b; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; margin: 0.35rem 0 0.75rem; }
.cv-meta { color: #4a4a4a; font-size: 0.9rem; margin: 0 0 2rem; }
.cv-block { margin-bottom: 1.75rem; }
.cv-block h2 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 0.75rem; }
.cv-block p { margin: 0; }
.cv-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid #e3e1dc; }
.cv-row:last-child { border-bottom: none; }
.cv-row span:last-child { color: #6b6b6b; font-size: 0.9rem; white-space: nowrap; }

@media (max-width: 480px) {
	h1 { font-size: 14px; flex-basis: 100%; text-align: center; }
	.actions { flex: 1; }
	.actions a { flex: 1; padding: 10px 8px; font-size: 13px; }
}