#portfolio { background: #fff; scroll-margin-top: 24px; }
.portfolio-intro { max-width: 680px; margin: 0 auto 36px; text-align: center; color: #655b50; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.portfolio-card { margin: 0; overflow: hidden; border: 1px solid #eadfcd; border-radius: 24px; background: #f7f4ef; box-shadow: 0 18px 50px rgba(0,0,0,.05); }
.portfolio-card > a { display: block; background: #eee8df; }
.portfolio-card img { display: block; width: 100%; height: auto; }
.portfolio-card figcaption { display: flex; align-items: center; gap: 14px; padding: 20px 22px; }
.portfolio-card h3 { flex: 1; font-size: 18px; line-height: 1.4; margin: 0; }
.portfolio-number { color: #8c6a35; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.portfolio-expand { color: #8c6a35; font-size: 24px; }
.portfolio-card > a:focus-visible { outline: 4px solid #b9965d; outline-offset: -4px; }
.portfolio-card:last-child { grid-column: 1 / -1; width: min(100%, 760px); justify-self: center; }
@media (min-width: 901px) { .nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 14px 20px; } }
@media (max-width: 640px) { .portfolio-grid { grid-template-columns: 1fr; gap: 22px; } .portfolio-card figcaption { padding: 18px; } .portfolio-card h3 { font-size: 17px; } }