/* Portfolio layout, shared by mark/ and maria/ (build.py copies it in as /common/portfolio.css). */
.intro { padding-block: clamp(80px, 12vw, 150px) clamp(48px, 7vw, 80px); }
.intro h1 { max-width: none; font-size: clamp(3rem, 10vw, 6.5rem); margin-bottom: 0.2em; }
.intro .role { font: 500 clamp(1.1rem, 2.4vw, 1.45rem)/1.4 var(--body); color: var(--accent); margin-bottom: 24px; }
.intro .lede { max-width: 52ch; color: var(--muted); }
.project { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; padding-block: 44px; border-top: 1px solid var(--line); }
.project > * { min-width: 0; }
.project:nth-child(even) .project-art { order: 2; }
@media (max-width: 860px) { .project { grid-template-columns: 1fr; } .project:nth-child(even) .project-art { order: 0; } }
.project-art { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--bg-2) center / cover no-repeat; transition: transform 0.25s ease; }
.project-art:hover { transform: translateY(-3px); }
.project h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }
.project p { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.tags li { font-size: 0.82rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 10px; }
.links .btn { padding: 10px 18px; font-size: 0.95rem; }