.home-hero { padding: 56px 0 48px; }
@media (min-width: 720px) { .home-hero { padding: 88px 0 72px; } }
.profile { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
@media (min-width: 720px) { .profile { flex-direction: row; align-items: center; gap: 40px; } }
.avatar {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover; flex: none;
  border: 3px solid var(--surface); box-shadow: var(--shadow);
}
@media (min-width: 720px) { .avatar { width: 160px; height: 160px; } }
.name { font-size: clamp(36px, 6vw, 56px); font-weight: 800; letter-spacing: .01em; }
.role { margin: 8px 0 0; font-size: 18px; font-weight: 600; color: var(--accent); }
.home-hero .lead { margin-top: 16px; }

.feature {
  display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: var(--text); transition: box-shadow .15s ease, transform .15s ease;
}
.feature:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); }
@media (min-width: 860px) { .feature { grid-template-columns: 1.2fr 1fr; } }
.feature img { width: 100%; height: 100%; object-fit: cover; object-position: left top; background: #fff; }
.feature-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.feature-body h3 { font-size: 22px; }
.feature-body p { margin: 0; color: var(--muted); }
.feature .more { color: var(--accent); font-weight: 600; }
.tag {
  align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.feature-body p.tag { color: var(--accent); }

.projects { grid-template-columns: 1fr; }
@media (min-width: 760px) { .projects { grid-template-columns: repeat(2, 1fr); } }
.projects .card h3 a { color: var(--text); }
.projects .card h3 a:hover { color: var(--accent); }
.media { width: 100%; margin-top: 16px; border-radius: 10px; border: 1px solid var(--line); background: #000; }
img.media { background: transparent; }

.timeline { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.timeline li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; border-left: 4px solid var(--accent);
}
.timeline span { color: var(--muted); font-size: 15px; }