.loading-state { padding: 100px 0; text-align: center; color: var(--ink-soft); }

.project-hero { position: relative; height: 72vh; min-height: 420px; overflow: hidden; }
.project-hero img { width: 100%; height: 100%; object-fit: cover; }
.project-hero-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-bottom: 40px;
  color: #fff;
}
.project-hero-info::before {
  content: "";
  position: absolute;
  inset: -120px 0 0;
  background: linear-gradient(0deg, rgba(23,19,15,0.82), transparent);
  z-index: -1;
}
.project-hero-info .featured-cat { color: #f0ad8c; }
.project-hero-info h1 { color: #fff; font-size: clamp(30px, 4.4vw, 52px); margin: 8px 0 12px; }
.project-meta { display: flex; gap: 18px; font-size: 14px; color: #e6dccd; }

.project-body { max-width: 820px; margin: 0 auto; padding: 64px 24px 24px; }
.project-summary { font-size: 20px; color: var(--ink); margin-bottom: 32px; }
.project-para { margin-bottom: 28px; font-size: 17px; }
.project-img-full { margin: 12px 0 40px; }
.project-img-full img { width: 100%; border-radius: var(--radius); }
.project-img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 40px; }
.project-img-pair img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius); }
figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

.project-nav-back { max-width: 820px; margin: 40px auto 80px; display: flex; gap: 14px; justify-content: space-between; }

@media (max-width: 640px) {
  .project-img-pair { grid-template-columns: 1fr; }
  .project-img-pair img { height: 240px; }
  .project-nav-back { flex-direction: column; }
}