.portfolio-categories-page { background: #fffdfa; }
.categories-nav { display: block; position: fixed; top: 30px; left: 42px; transform: none; z-index: 20; }
.categories-nav a { color: var(--black); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }
.portfolio-categories { min-height: 100vh; padding: 148px clamp(20px, 4vw, 64px) 90px; }
.categories-header { max-width: 920px; margin: 0 auto; text-align: center; }
.categories-header p { margin: 0 0 19px; color: var(--burgundy); font-size: 12px; letter-spacing: .2em; }
.categories-header h1 { margin: 0; font: 400 clamp(44px, 5vw, 78px)/1.02 'Cormorant Garamond', Georgia, serif; }
.categories-header span { display: block; width: 46px; height: 1px; margin: 31px auto 0; background: var(--burgundy); }
.category-tabs { display: flex; justify-content: center; gap: 16px 28px; max-width: 1100px; margin: 52px auto 44px; overflow-x: auto; padding: 2px 2px 8px; }
.category-tab { flex: 0 0 auto; padding: 0; border: 0; color: #877b7e; background: transparent; font: 400 12px/1 Montserrat, sans-serif; letter-spacing: .14em; }
.category-tab.active { color: var(--burgundy); }
.category-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 1500px; margin: auto; }
.category-project { position: relative; display: block; min-height: 420px; overflow: hidden; color: #fff; background: #51222d; cursor: pointer; text-decoration: none; }
.category-project img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.category-project:hover img { transform: scale(1.035); }
.category-project::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #22050db8, transparent 63%); }
.category-project-copy { position: absolute; z-index: 1; right: 24px; bottom: 24px; left: 24px; }
.category-project-copy h2 { margin: 0; font: 400 clamp(28px, 2.4vw, 39px)/1 'Cormorant Garamond', Georgia, serif; }
.category-project-copy p { margin: 12px 0 0; font: 400 10px/1 Montserrat, sans-serif; letter-spacing: .16em; }
.category-video-mark { position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #fff; border-radius: 50%; }
.category-empty { margin: 90px 0; color: var(--text-gray); text-align: center; }
@media (max-width: 768px) { .categories-nav { top: 23px; left: 20px; } .portfolio-categories { padding: 112px 15px 60px; } .category-tabs { justify-content: flex-start; margin: 38px 0 28px; } .category-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } .category-project { min-height: 300px; } .category-project-copy { right: 15px; bottom: 15px; left: 15px; } .category-project-copy h2 { font-size: 26px; } .category-video-mark { top: 13px; right: 13px; width: 36px; height: 36px; } }