.portfolio-archive { --section-padding-block: 0; }
.portfolio-archive__intro { padding-block: 7rem 4.75rem; }
.portfolio-archive__title { margin: 0 0 var(--space-12); font-family: var(--font-heading); font-size: clamp(var(--fs-heading-max), 4.444444vw, var(--fs-section-archive-max)); font-weight: var(--font-weight-bold); line-height: 1.3; letter-spacing: -0.04em; text-transform: uppercase; }
.portfolio-archive__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); inline-size: min(100%, 48.1875rem); }
.portfolio-archive__filter { display: flex; align-items: center; justify-content: center; min-block-size: var(--space-12); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-divider); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--fs-body); line-height: var(--line-height-control); text-align: center; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.portfolio-archive__filter:hover, .portfolio-archive__filter:focus-visible { border-color: var(--color-brand-action); }
.portfolio-archive__filter--active { border-color: var(--color-brand-action); background: var(--color-brand-action); color: var(--color-on-accent); }
.portfolio-archive__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-archive__empty { padding-block-end: var(--space-16); }
@media (width < 75rem) { .portfolio-archive__intro { padding-block: var(--space-20) var(--space-16); } }
@media (width < 48rem) {
    .portfolio-archive__intro { padding-block: var(--space-12); }
    .portfolio-archive__title { margin-block-end: var(--space-8); font-size: clamp(var(--fs-heading-min), 9vw, var(--fs-heading-max)); }
    .portfolio-archive__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .portfolio-archive__filter { min-block-size: var(--control-min-size); flex: 1 1 calc(50% - var(--space-2)); font-size: var(--fs-small); }
    .portfolio-archive__grid { grid-template-columns: minmax(0, 1fr); }
}