/* ============================================================
   RELATED PROJECTS — shared across all case-study pages
   Renders into [data-related-cases] via related.js
   ============================================================ */
.related-cases { border-top: 1px solid var(--line); }
.related-cases .rc-head {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 44px;
}
.related-cases .rc-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.related-cases .rc-title {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: balance;
}
.related-cases .rc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.related-cases .rc-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
}
.related-cases .rc-thumb {
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 8px; background: var(--paper-2);
  border: 1px solid var(--line);
}
.related-cases .rc-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.related-cases .rc-card:hover .rc-thumb img { transform: scale(1.045); }
.related-cases .rc-info {
  display: flex; flex-direction: column; gap: 8px; padding-top: 18px;
}
.related-cases .rc-cat {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.related-cases .rc-ttl {
  font-family: var(--sans); font-weight: 500;
  font-size: 19px; line-height: 1.2; letter-spacing: -0.01em;
  text-wrap: balance; transition: color 200ms;
}
.related-cases .rc-card:hover .rc-ttl { color: var(--accent); }
.related-cases .rc-yr {
  margin-top: auto; padding-top: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mute);
}
@media (max-width: 880px) { .related-cases .rc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 560px) { .related-cases .rc-grid { grid-template-columns: 1fr; } }