/* Screenshots, a short introduction and a direct interactive preview entry. */
.project-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 24px;
  margin-block-start: 28px;
}
.project-display-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.project-carousel {
  margin: 0;
  padding: 12px;
  border-radius: 0;
  background: #edf1ee;
}
.project-carousel .screenshot-slide img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.project-carousel .screenshot-controls button {
  min-width: 32px;
  min-height: 40px;
  touch-action: manipulation;
}
.project-carousel .screenshot-controls .screenshot-playback {
  padding-inline: 6px;
}
@media (pointer: coarse) {
  .project-carousel .screenshot-controls button {
    min-width: 44px;
    min-height: 44px;
  }
}
.project-display-copy { padding: 22px 24px 26px; }
.project-preview { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 14px; font-size: .875rem; font-weight: 600; color: var(--ink); }
@media (hover: hover) { .project-preview:hover { text-decoration: underline; text-underline-offset: 4px; } }
.project-display-copy h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.project-display-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .project-showcase { gap: 20px; margin-block-start: 24px; }
  .project-display-copy { padding: 20px; }
}