#portfolio-grid {padding-block: var(--cs-section-padding);background: var(--cs-white);}.cs-legend {display: flex;flex-direction: column;gap: 0.85rem;padding-bottom: 1.5rem;margin-bottom: clamp(2rem, 4vw, 3rem);border-bottom: 1px solid var(--cs-border);}.cs-legend-label {font-family: var(--cs-font-mono);font-size: 0.625rem;font-weight: 500;letter-spacing: 0.22em;text-transform: uppercase;color: var(--cs-accent);}.cs-legend-list {list-style: none;display: flex;flex-wrap: wrap;gap: 0.5rem 1.75rem;}.cs-legend-item {display: flex;align-items: center;gap: 0.6rem;font-family: var(--cs-font-mono);font-size: 0.6875rem;letter-spacing: 0.12em;text-transform: uppercase;color: var(--cs-text-muted);}.cs-legend-item::before {content: '';width: 1rem;height: 1px;background: var(--cs-accent);flex-shrink: 0;}.cs-portfolio-grid {display: grid;grid-template-columns: 1fr;gap: 0.75rem;grid-auto-flow: dense;}.cs-portfolio-item {position: relative;overflow: hidden;background: var(--cs-primary);}.cs-portfolio-item img {width: 100%;height: 100%;aspect-ratio: 4/5;object-fit: cover;transition: transform 0.7s ease;}.cs-portfolio-item--wide img {aspect-ratio: 8/5;}.cs-portfolio-item--tall img {aspect-ratio: 3/4;}.cs-portfolio-item:hover img, .cs-portfolio-item:focus-within img {transform: scale(1.05);}.cs-portfolio-item--chamfer img {clip-path: polygon(0 0, 100% 0, 100% 88%, 96% 100%, 0 100%);}.cs-portfolio-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(28, 28, 46, 0.82) 0%, rgba(28, 28, 46, 0.15) 55%, transparent 100%), linear-gradient(to top, rgba(92, 124, 138, 0.35) 0%, transparent 60%);opacity: 0;transition: opacity 0.35s ease;display: flex;align-items: flex-end;padding: 1.5rem;}.cs-portfolio-item:hover .cs-portfolio-overlay, .cs-portfolio-item:focus-within .cs-portfolio-overlay {opacity: 1;}.cs-portfolio-label {font-family: var(--cs-font-display);font-size: 1.25rem;font-weight: 400;color: var(--cs-white);line-height: 1.2;padding-bottom: 2rem;}.cs-portfolio-tag {position: absolute;bottom: 0;left: 0;background: var(--cs-primary);color: var(--cs-accent-light);font-family: var(--cs-font-mono);font-size: 0.5625rem;font-weight: 500;letter-spacing: 0.18em;text-transform: uppercase;padding: 0.45rem 0.85rem;}@media (min-width: 48rem) {.cs-legend {flex-direction: row;align-items: baseline;justify-content: space-between;gap: 2rem;}.cs-portfolio-grid {grid-template-columns: repeat(2, 1fr);}.cs-portfolio-item--wide {grid-column: span 2;}.cs-portfolio-item--tall {grid-row: span 2;}.cs-portfolio-item--tall img {aspect-ratio: auto;}}@media (min-width: 64rem) {.cs-portfolio-grid {grid-template-columns: repeat(3, 1fr);gap: 1rem;}.cs-portfolio-item--wide {grid-column: span 2;}}