/* Portfolio + project cards */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-btn { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--line-soft); padding: 0.6rem 1.15rem; transition: 0.35s var(--ease); }
.filter-btn:hover { color: var(--gold); border-color: var(--line); }
.filter-btn.active { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.project-card { position: relative; display: block; overflow: hidden; }
.project-card .media { aspect-ratio: 4 / 5; }
.project-card.is-hidden { display: none; }
.project-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; background: linear-gradient(180deg, transparent 40%, rgba(8,8,8,0.9)); z-index: 1; transition: background 0.5s var(--ease); }
.project-card__cat { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.project-card__title { font-family: var(--font-serif); font-size: var(--step-2); margin-top: 0.4rem; }
.project-card__meta { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; max-height: 0; opacity: 0; overflow: hidden; transition: 0.5s var(--ease); }
.project-card:hover .project-card__meta { max-height: 120px; opacity: 1; }
.project-card__view { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 0.9rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 900px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .project-grid { grid-template-columns: 1fr; } }

/* Project details */
.proj-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; }
.proj-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.proj-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(8,8,8,0.92)); }
.proj-meta-row { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-block: 2rem; border-block: 1px solid var(--line-soft); }
.proj-meta-row div { display: flex; flex-direction: column; gap: 0.3rem; }
.proj-meta-row dt { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.proj-meta-row dd { font-family: var(--font-serif); font-size: var(--step-1); color: var(--gold); }
.proj-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.proj-gallery .media { aspect-ratio: 1; }
.proj-gallery .media:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }
@media (max-width: 720px) { .proj-gallery { grid-template-columns: 1fr 1fr; } .proj-gallery .media:first-child { grid-column: span 2; } }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.post-card .media { aspect-ratio: 16 / 10; }
.post-card__body { padding: 1.5rem 0; }
.post-card__date { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.post-card h3 { font-size: var(--step-2); margin-block: 0.6rem; }
.post-card p { color: var(--text-muted); font-size: 0.95rem; }
.article { max-width: 720px; margin-inline: auto; }
.article h2 { font-size: var(--step-3); margin-block: 2rem 1rem; }
.article h3 { font-size: var(--step-2); margin-block: 1.75rem 0.75rem; }
.article p { margin-bottom: 1.25rem; color: #d8d3ca; }
.article ul { margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.article ul li { padding-left: 1.5rem; position: relative; color: #d8d3ca; }
.article ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }