/* HERO */
.hero { padding: 3rem var(--side) 2rem; }
.hero-title {
  font-family: 'EB Garamond', serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400; line-height: 1.15;
  color: var(--text);
  transition: color var(--transition);
}

/* FILTER BAR */
.filter-wrap { padding: 0 var(--side); }
.filter-bar {
  display: flex; align-items: center; height: 44px; gap: 1.8rem;
  border-bottom: 1px solid var(--light-gray);
}
.filter-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 300;
  color: var(--muted); background: none; border: none;
  padding: 0; height: 100%;
  transition: color .2s; position: relative; white-space: nowrap;
}
.filter-btn::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--text);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active { color: var(--text); }
.filter-btn.active::after { transform: scaleX(1); }

/* GRID */
.grid-wrap { padding: var(--gap) var(--side) 5rem; }
.grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--gap); row-gap: var(--gap); align-items: start;
}
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

/* CARD */
.project-card {
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px);
  transition: opacity .44s ease, transform .44s ease;
  text-decoration: none; color: inherit;
}
.project-card.visible { opacity: 1; transform: translateY(0); }
.project-card.hidden  { display: none !important; }

/* THUMB */
.thumb {
  width: 100%; overflow: hidden;
}

.thumb img, .thumb video {
  display: block; width: 100%; height: auto; object-fit: cover;
}

.thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--muted);
}

/* CARD INFO */
.card-info { margin-top: .55rem; }
.card-title {
  font-family: 'EB Garamond', serif;
  font-size: .93rem; font-weight: 400;
  color: var(--text); line-height: 1.25;
  transition: color var(--transition);
}
.card-subtitle {
  font-size: .72rem; color: var(--muted); margin-top: 3px;
  font-family: 'EB Garamond', serif;
  transition: color var(--transition);
}

/* COMING SOON */
.cs-badge {
  font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid var(--text); color: var(--text);
  border-radius: 99px; opacity: .7; display: inline-block; margin-bottom: .4rem;
}