/* Eight project index, preserving the established photographic language. */
#portafolio { scroll-margin-top: calc(var(--header-h) + 24px); }
.portfolio-section .featured-heading { align-items: end; }
.portfolio-section .featured-heading h3 { max-width: 18ch; text-wrap: balance; }
.portfolio-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 52px 28px; padding-bottom: 72px; }
.portfolio-project { display: block; grid-column: span 2; min-width: 0; }
.portfolio-project-lead { grid-column: span 3; }
.portfolio-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.portfolio-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-project-lead .portfolio-image { aspect-ratio: 16 / 10; }
.portfolio-caption { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-top: 20px; border-top: 1px solid var(--line-dark); margin-top: 18px; }
.portfolio-caption h4 { margin: 0; font: 400 clamp(2rem, 2.8vw, 3rem)/1.02 var(--display); }
.portfolio-project-lead h4 { font-size: clamp(2.5rem, 3.5vw, 3.7rem); }
.portfolio-caption p { margin: 10px 0 0; color: #b7cad9; font-size: .86rem; line-height: 1.6; }
.portfolio-caption svg, .olympo-close svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--cyan-soft); }
.portfolio-caption svg { margin-top: 5px; }
.portfolio-action { display: inline-flex; align-items: center; min-height: 44px; margin-top: 7px; color: var(--cyan-soft); font-size: .84rem; }
.portfolio-project:focus-visible, .portfolio-case-photos a:focus-visible { outline: 2px solid var(--cyan-soft); outline-offset: 7px; }
.portfolio-case-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; align-items: start; }
.portfolio-case-photos img { width: 100%; height: auto; max-height: 76svh; object-fit: contain; }
.portfolio-case-photos figure:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 960px; width: 100%; margin-inline: auto; }
.portfolio-case-single { grid-template-columns: 1fr; }
.olympo-close a { gap: 16px; }
@media (hover: hover) { .portfolio-project:hover .portfolio-action { text-decoration: underline; text-underline-offset: 5px; } .portfolio-project:hover h4 { color: var(--cyan-soft); } }
@media (min-width: 701px) and (max-width: 1000px) { .portfolio-project { grid-column: span 3; } }
@media (max-width: 700px) {
 .portfolio-grid { grid-template-columns: 1fr; gap: 38px; padding-bottom: 48px; }
 .portfolio-project, .portfolio-project-lead { grid-column: auto; }
 .portfolio-project .portfolio-image { aspect-ratio: 4 / 3; }
 .portfolio-caption h4, .portfolio-project-lead h4 { font-size: 2.5rem; }
 .portfolio-caption { margin-top: 14px; padding-top: 16px; }
 .portfolio-case-photos { grid-template-columns: 1fr; gap: 36px; }
}