/* Shared default card treatment for every viewport and theme. */
#projects{gap:32px}
#projects .project{display:flex;flex-direction:column;min-width:0;border:0;border-radius:12px;background:#f5f5f0;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
#projects .image-wrap{margin:14px 14px 0;border-radius:6px;border-bottom:0;background:var(--reader-bg);flex:none}
#projects .image-wrap img{display:block;width:100%;height:auto;object-fit:contain}
#projects .project-info{display:flex;flex-direction:column;flex:1;padding:18px 24px 26px;gap:20px}
.project-meta{display:flex;align-items:center;gap:14px;width:100%;font-size:10px;line-height:1.5;letter-spacing:1.1px;color:var(--muted)}
.project-number{font-variant-numeric:tabular-nums;color:var(--ink)}
#projects .tag{font-size:10px;letter-spacing:1.1px;margin:0}
.project-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin-top:auto}
.project-copy{min-width:0}
#projects h3{font-size:25px;line-height:1.3;letter-spacing:-.6px;margin:0 0 9px;font-weight:500}
#projects p{font-size:13px;line-height:1.7;margin:0;color:var(--muted)}
#projects .project-cta{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:var(--bg);transition:background-color .2s}
.project-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){#projects .project:hover{transform:translateY(-4px);box-shadow:0 12px 28px -16px #242c2526}#projects .project:hover .project-cta{background:var(--lime)}}
#projects .project:focus-visible{outline:2px solid var(--muted);outline-offset:4px}
@media(max-width:700px){#projects{gap:24px}#projects .image-wrap{margin:11px 11px 0;border-radius:5px}#projects .project-info{padding:16px 18px 22px;gap:18px}#projects h3{font-size:22px}#projects .project-cta{width:40px;height:40px;flex-basis:40px}.project-summary{gap:14px}#projects .tag{font-size:9px;letter-spacing:.7px}}
@media(prefers-reduced-motion:reduce){#projects .project,#projects .project-cta{transition:none}#projects .project:hover{transform:none}}

@media(hover:hover) and (pointer:fine){[data-theme="dark"] #projects .project:hover{box-shadow:0 12px 28px -16px #0005}}

[data-theme="dark"] #projects .project{background:#1b1e19}