/* Shared project cards: home, work index. One calm card, image on top, text below. */
.project-card { --pc-line: var(--line, var(--shell-border, #d8d8d0)); --pc-surface: var(--surface, var(--shell-surface, #fffefa)); --pc-muted: var(--muted, #5e675f); --pc-accent: var(--accent, var(--shell-accent, #0f8064)); display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: 18px; overflow: hidden; text-align: left; cursor: auto; transition: border-color .2s ease; }
.project-card:hover, .project-card:focus-within { border-color: var(--pc-accent); transform: none; }
.project-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: var(--surface-2, #e9eee9); border-bottom: 1px solid var(--pc-line); }
.project-card__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 22px 24px 24px; }
.project-card__body > * { margin: 0; }
.project-card__industry { color: var(--pc-accent); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.project-card__date { color: var(--pc-muted); font-size: .82rem; }
.project-card h2, .project-card h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; }
.project-card__body > p:not([class]) { color: var(--pc-muted); font-size: .96rem; }
.project-card .project-card__modules { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.project-card .project-card__modules li { display: block; margin: 0; padding: 3px 10px; line-height: 1.5; border: 1px solid var(--pc-line); border-radius: 999px; color: var(--pc-muted); font-size: .76rem; }
.project-card .text-link { margin-top: auto; padding-top: 10px; color: var(--pc-accent); font-weight: 800; text-underline-offset: 4px; }
.project-card--compact { flex-direction: row; }
.project-card--compact .project-card__body { padding: 18px 22px; }
.timeline[data-project-timeline] { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; border: 0; list-style: none; }
.undated-proof { display: grid; gap: 16px; }
@media (max-width: 760px) { .timeline[data-project-timeline] { grid-template-columns: 1fr; } .project-card--compact { flex-direction: column; } .project-card__body { padding: 18px 18px 20px; } }
@media (prefers-reduced-motion: reduce) { .project-card { transition: none; } }