/* The approved original is displayed without cropping or generated additions.
   Reuse the existing D typography, palette, controls and product-search header. */
.project-heading { margin-bottom: 24px; }
.project-heading h1 { margin-bottom: 0; }
.project-card { max-width: 440px; }
.project-card-link { display: block; color: var(--ink); text-decoration: none; }
.project-card-link:hover h2 { color: var(--link); text-decoration: underline; }
.project-card h2 { margin-block: 16px 0; font-size: 20px; }
.project-photo { display: block; width: 100%; height: auto; border-radius: 6px; }
.project-detail { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); align-items: start; gap: 44px; }
.project-figure { width: 100%; max-width: 640px; margin: 0; }
.project-copy { min-width: 0; max-width: 420px; padding-block: 4px; }
.project-facts { margin: 0 0 28px; }
.project-facts > div { padding-block: 0 20px; }
.project-facts dt { margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.project-facts dd { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.project-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.project-contact > a { max-width: 100%; }
.project-phone { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; font-weight: 600; }
@media (max-width: 850px) {
  .project-detail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .project-copy { max-width: 640px; padding: 0; }
  .project-facts { margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .project-heading { margin-bottom: 20px; }
  .project-card h2 { font-size: 18px; }
  .project-contact { align-items: stretch; }
  .project-contact > a { flex-basis: 100%; }
}