.portfolio-page{background:#0b0d0f;color:#fff}
.portfolio-page .header{border-color:#2d3032;background:#0b0d0f}
.portfolio-page .brand-mark{background:#fff;color:#0b0d0f}
.portfolio-page .header-cta{color:#fff}
.portfolio-page main{min-height:100vh}
.portfolio-hero{padding:64px clamp(20px,4vw,64px) 44px;border-bottom:1px solid #2d3032;display:grid;grid-template-columns:1.25fr .75fr;gap:7vw;align-items:end}
.portfolio-hero h1{font-size:clamp(46px,6vw,82px);line-height:.95}
.portfolio-hero p{color:#a9aaab;max-width:470px;font-size:16px;margin:0}
.portfolio-kicker{color:#ff6b35!important;font-size:11px!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px!important}
.filters{position:sticky;top:0;z-index:5;padding:12px clamp(20px,4vw,64px);background:rgba(11,13,15,.96);backdrop-filter:blur(12px);display:flex;gap:7px;overflow:auto;border-bottom:1px solid #2d3032}
.filter{flex:none;border:1px solid #3d4144;background:transparent;color:#c7c9ca;padding:8px 12px;font:700 12px Manrope;cursor:pointer}
.filter:hover,.filter.active{background:#ff5a1f;border-color:#ff5a1f;color:#fff}
.portfolio-grid{padding:32px clamp(20px,4vw,64px) 90px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 10px}
.project{margin:0;background:#151719;overflow:hidden;border:1px solid #222629;transition:border-color .25s}
.project[hidden]{display:none}
.project:hover{border-color:#555b5e}
.project img{aspect-ratio:4/3;object-fit:cover;background:#f2f2ef;transition:transform .35s}
.project:hover img{transform:scale(1.018)}
.project.art img{object-fit:contain}
.project figcaption{min-height:100px;padding:12px 12px 14px;display:grid;grid-template-columns:1fr auto;align-content:start;gap:4px 8px}
.project small{grid-column:1/-1;color:#ff7645;text-transform:uppercase;letter-spacing:.1em;font-size:9px;line-height:1.35;font-weight:800}
.project b{font:600 12px/1.35 Manrope}
.project em{font-style:normal;color:#777c7f;font-size:9px}
.project p{display:none}
.portfolio-page footer{border-top:1px solid #2d3032}
.portfolio-link{text-align:center;margin-top:46px}
.portfolio-button{color:#fff;border-color:#606366}
.portfolio-button:hover{background:#fff;color:#0b0d0f}
@media(max-width:1180px){.portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){.portfolio-hero{grid-template-columns:1fr;gap:24px}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:580px){.portfolio-page .header-cta{display:none}
.portfolio-hero{padding:48px 20px 34px}
.portfolio-hero h1{font-size:46px}
.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:18px 12px 65px}
.filters{padding-left:12px}
.project figcaption{min-height:92px;padding:10px}
.project b{font-size:12px}
}

/* Категории переносятся по ширине экрана без горизонтальной прокрутки. */
.filters {
  flex-wrap: wrap;
  overflow: visible;
  align-items: stretch;
}

.filter {
  white-space: normal;
  line-height: 1.25;
}

@media (max-width: 700px) {
  .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
  }

  .filter {
    width: 100%;
    min-height: 44px;
    padding: 8px 9px;
  }
}

@media (max-width: 370px) {
  .filters {
    grid-template-columns: 1fr;
  }
}