/* Software and Side quests: one project per row, in the CV's layout (name on the left from 1000 px). */

.projects { display: flex; flex-direction: column; padding-bottom: clamp(56px, 8vw, 96px); }
.project { border-top: 1px solid var(--rule); padding-block: 28px 36px; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 18px; }
.project-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.project-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.05; letter-spacing: -0.03em; }
.project-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 68ch; }
.project-tagline { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.4; }
.project-summary { color: var(--ink-2); }
.project-highlights { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 0.94rem; }
.project-highlights li::marker { color: var(--accent); }
.project-highlights strong { color: var(--ink); font-weight: 600; }
.project-install code { font-family: var(--mono); font-size: 0.76rem; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--ground-2); user-select: all; }
.project .actions { padding-top: 4px; }

@media (min-width: 1000px) {
  .project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 32px; align-items: start; }
  .project-head { position: sticky; top: 18px; }
}