:root { color: #1a1a1a; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; line-height: 1.45; }
.wrap { max-width: 820px; margin: 0 auto; padding: 36px 20px 64px; }
header { text-align: center; }
h1 { font-weight: 500; font-size: 2rem; margin: 0 0 10px; letter-spacing: 0.01em; }
nav { font-family: system-ui, sans-serif; font-size: 0.95rem; }
nav a { color: #1a1a1a; margin: 0 10px; text-decoration: none; }
nav a.active, nav a:hover { text-decoration: underline; }
.about { display: grid; grid-template-columns: 1fr 200px; gap: 28px; align-items: start; margin-top: 36px; }
.portrait { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 28px 0 8px; }
.row { display: grid; grid-template-columns: 140px 1fr 150px; gap: 8px 16px; padding: 16px 0; border-top: 1px solid #ddd; }
.row .where, .row .when { font-family: system-ui, sans-serif; font-size: 0.85rem; color: #333; }
.row .when { text-align: right; }
.row h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; }
.row h3 a { color: inherit; }
.row ul { margin: 0; padding-left: 18px; }
.row li { margin: 4px 0; }
.project { display: grid; grid-template-columns: 280px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid #ddd; align-items: start; }
.project img, .project svg { width: 100%; height: auto; background: #fff; border: 1px solid #ccc; display: block; }
.project h3 { margin: 0 0 6px; font-size: 1.05rem; }
.links { font-family: system-ui, sans-serif; font-size: 0.9rem; margin-top: 8px; }
.links a { margin-right: 14px; }
footer { margin-top: 28px; border-top: 1px solid #111; padding-top: 12px; font-family: system-ui, sans-serif; font-size: 0.9rem; }
footer a { color: #1a1a1a; margin-right: 14px; }
@media (max-width: 700px) {
	.about, .project, .row { grid-template-columns: 1fr; }
	.row .when { text-align: left; }
	.project img, .project svg { width: 100%; height: auto; }
}