@import url('../styles.css?v=2.2');

.project-page {
  padding: 72px 0 96px;
}

.project-back {
  display: inline-flex;
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: 46px;
}

.project-back:hover { color: var(--text); }

.project-hero {
  padding: 0 0 44px;
  border-bottom: 1px solid var(--border);
}

.project-hero .status { margin-bottom: 20px; }

.project-hero h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(3.2rem, 8vw, 6.8rem);
  line-height: .94;
  letter-spacing: -.065em;
}

.project-lead {
  margin: 28px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.project-media {
  margin-top: 34px;
}

.project-media h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--text);
}

.project-media .lead-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .84rem;
}

.project-media-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
}

.project-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}

.detail-card {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.detail-card h2 {
  margin: 0 0 18px;
  font-size: 1.15rem;
}

.detail-card p, .detail-card li {
  color: var(--muted);
  line-height: 1.65;
}

.detail-card ul {
  margin: 0;
  padding-left: 18px;
}

.detail-card .tags { margin-top: 8px; }

@media (max-width: 860px) {
  .project-media-grid,
  .project-detail-grid {
    grid-template-columns: 1fr;
  }
}