/* The project cards ds/build.mjs writes from ds/sites.json: tiles from 701px, a swipe row (scroll snap) on a phone. */
.projects { padding: 80px 0; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.projects h2 { margin: 20px 0 12px; font-size: 45px; font-weight: 400; line-height: 1.2; letter-spacing: -2px; }
.projects > p:not(.eyebrow) { margin: 0 0 40px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.project-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--ds-space-6); margin: 0; padding: 0; list-style: none; }
.project a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-panel); background: var(--ds-surface); color: var(--ink); text-decoration: none; transition: border-color var(--ds-duration) var(--ds-ease), transform var(--ds-duration) var(--ds-ease); }
.project a:hover, .project a:focus-visible { border-color: var(--project); transform: translateY(-2px); }
.project a:focus-visible { outline: 2px solid var(--project); outline-offset: 3px; }
.project-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: color-mix(in srgb, var(--project) 18%, var(--ds-surface)); border-bottom: 1px solid var(--ds-border); }
.project-art svg { width: 72px; height: 72px; }
.project-art .tile { fill: var(--project); }
.project-art :is(.cut, g) { fill: var(--ds-surface); }
.project-art .line { fill: none; stroke: var(--ds-surface); }
.project-copy { display: grid; gap: 8px; flex: 1; align-content: start; padding: var(--ds-space-6); }
.project-kicker { color: var(--project); font: 10px var(--mono); letter-spacing: 1.8px; text-transform: uppercase; }
.project h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.5px; }
.project strong { font-weight: 500; }
.project-copy > span:not([class]) { color: var(--muted); font-size: 14px; line-height: 1.7; }
.project-go { margin-top: 8px; color: var(--project); font: 11px var(--mono); }
@media (max-width: 700px) {
  /* Brand, bar and LinkedIn do not fit 375px; on the front page the cards below are the same list. */
  .cinema .nav heidelberg-bar { display: none; }
  .projects { padding: 55px 0; }
  .projects h2 { font-size: 34px; }
  .project-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -23px; padding: 0 23px 12px; scroll-padding-inline: 23px; }
  .project { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .project a { transition: none; } .project a:hover { transform: none; } }