/* projects.css — the project shelf catalog. Tokens from styles.css only. */

.prj-hero { padding: 4vh 0 5vh; }
.prj-hero h1 {
  font-family: 'Newsreader', serif; font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(38px, 6vw, 72px); line-height: 1.0; margin: 0 0 18px;
}
.prj-hero h1 em { font-style: italic; color: var(--current); }

.prj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px; margin-top: 22px;
}

.prj-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  background: var(--bg-card); box-shadow: var(--shadow-card);
  transition: transform .16s ease, border-color .16s ease;
}
.prj-card.live { border-color: color-mix(in oklch, var(--current) 45%, var(--rule)); }
.prj-card:hover { transform: translateY(-3px); border-color: var(--current); }

.prj-thumb {
  background: var(--bg-deeper); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center; padding: 22px 0;
}
.prj-thumb-svg { width: 150px; height: auto; }

.prj-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.prj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prj-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.prj-status {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em;
  white-space: nowrap; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule-strong);
}
.prj-status.live { color: var(--current); border-color: color-mix(in oklch, var(--current) 50%, transparent); }
.prj-status.soon { color: var(--ink-faint); }

.prj-name {
  font-family: 'Newsreader', serif; font-weight: 400; font-size: 28px; line-height: 1.05;
  margin: 12px 0 4px; color: var(--ink);
}
.prj-tag { font-family: 'Newsreader', serif; font-style: italic; font-size: 17px; color: var(--ink-soft); margin: 0 0 10px; }
.prj-blurb { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }

.prj-meta {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft);
  padding: 12px 0; border-top: 1px dotted var(--rule); border-bottom: 1px dotted var(--rule);
}
.prj-meta span { display: inline-flex; align-items: center; gap: 7px; }
.prj-dots { color: var(--current); letter-spacing: 1px; font-style: normal; }

.prj-teaches { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.prj-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-soft);
  padding: 4px 9px; border-radius: 6px; background: var(--bg-deeper); border: 1px solid var(--rule);
}

.prj-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

@media (max-width: 520px) {
  .prj-grid { grid-template-columns: 1fr; }
}

/* ── thumbnail motion (respect reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .prj-pulse { animation: prjPulse 2.4s ease-out infinite; transform-origin: center; }
  .prj-spin { animation: prjSpin 3.2s linear infinite; }
  .prj-chase { animation: prjChase 1.3s ease-in-out infinite; }
}
@keyframes prjPulse { 0% { transform: scale(0.7); opacity: 0.5; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes prjSpin { to { transform: rotate(360deg); } }
@keyframes prjChase { 0%, 100% { opacity: 0.18; } 18% { opacity: 1; } }