.portfolio-hero{padding:calc(var(--header-height,80px) + var(--space-20)) var(--space-6) var(--space-16);background-color:var(--color-dark);text-align:center}.portfolio-hero h1{font-family:var(--font-display);font-size:var(--text-5xl);color:var(--color-cream-light);margin-bottom:var(--space-4);font-weight:300}.portfolio-hero p{color:var(--color-cream);font-size:var(--text-base);opacity:.8;max-width:500px;margin:0 auto;line-height:1.7}.portfolio-filters{gap:var(--space-2);padding:var(--space-10) var(--space-6);background-color:var(--color-white);border-bottom:1px solid var(--color-border);top:var(--header-height,80px);z-index:10;flex-wrap:wrap;justify-content:center;display:flex;position:sticky}.filter-btn{padding:var(--space-2) var(--space-5);border:1px solid var(--color-border);color:var(--color-text-light);font-family:var(--font-sans);font-size:var(--text-sm);letter-spacing:.06em;cursor:pointer;transition:all var(--duration-normal) var(--ease-smooth);background:0 0;border-radius:0;font-weight:400}.filter-btn:hover{border-color:var(--color-olive);color:var(--color-olive)}.filter-btn.is-active{background-color:var(--color-olive);border-color:var(--color-olive);color:var(--color-cream-light)}.portfolio-grid{gap:var(--space-8);padding:var(--space-16) 0;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));display:grid}.portfolio-grid__inner{gap:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(340px,1fr));display:grid}.portfolio-item{transition:opacity var(--duration-normal) ease, transform var(--duration-normal) ease}.portfolio-item.is-hidden{display:none}.portfolio-item.is-filtered-out{opacity:0;pointer-events:none;transform:scale(.97)}.portfolio-empty{text-align:center;padding:var(--space-20);color:var(--color-text-muted);grid-column:1/-1;display:none}.portfolio-empty.is-visible{display:block}.portfolio-empty p{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic}.portfolio-load-more{text-align:center;padding:var(--space-8) 0 var(--space-16)}@media (width<=640px){.portfolio-grid,.portfolio-grid__inner{grid-template-columns:1fr}.portfolio-hero h1{font-size:var(--text-4xl)}.portfolio-filters{gap:var(--space-1)}.filter-btn{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}}