/* Reusable project cards: restrained color, flat graphite surfaces and clear hierarchy. */
.pt-list,
.pt-card {
  --pt-ink: var(--text, #eeeeee);
  --pt-mut: var(--muted, #a0a0a0);
  font-family: var(--font, system-ui, sans-serif);
  color: var(--pt-ink);
}

.pt-card,
.pt-card * { box-sizing: border-box; }

.pt-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pt-card {
  container: project-card / inline-size;
  background: var(--surface, #191919);
  border: 1px solid transparent;
  border-left: 3px solid var(--pt-accent, #8b9adf);
  border-radius: var(--card-radius, 2px);
}
.pt-inner { padding: 32px 36px; }
.pt-head { display: flex; align-items: flex-start; gap: 32px; }
.pt-numcol { flex: 0 0 40px; padding-top: 3px; }
.pt-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -1.5px;
  color: var(--pt-accent, #8b9adf);
}
.pt-body { min-width: 0; flex: 1; }
.pt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 12px; }
.pt-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--pt-mut); font-size: 12px; }
.pt-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--pt-accent, #a5a7b5); }
.pt-cat { font-size: 12px; color: var(--pt-mut); }
.pt-cat::before { content: '/'; margin-right: 20px; color: #777777; }
.pt-title { margin: 0 0 16px; max-width: 800px; font-size: 27px; font-weight: 700; line-height: 1.3; letter-spacing: -.5px; }
.pt-desc { margin: 0; max-width: 780px; font-size: 14px; line-height: 1.85; color: var(--pt-mut); }
.pt-foot { margin: 24px 0 0 72px; min-width: 0; }
.pt-stack, .pt-stack dd, .pt-tags { margin: 0; padding: 0; }
.pt-stack { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.pt-group { min-width: 0; }
.pt-group-l { margin-bottom: 8px; font-size: 12px; font-weight: 500; color: var(--pt-mut); }
.pt-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.pt-tag {
  padding: 3px 8px;
  border: 1px solid #707070;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.6;
  color: #d0d0d0;
  overflow-wrap: anywhere;
}
.pt-cta { display: inline-flex; align-items: center; min-height: 32px; margin-top: 16px; padding-block: 4px; gap: 8px; font-size: 13px; font-weight: 500; color: var(--pt-ink); text-decoration: underline; text-underline-offset: 5px; }
.pt-cta svg { width: 14px; height: 14px; }
.pt-cta:hover { color: var(--accent-g, #8b9adf); }
.pt-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* Reuse the stack as a sidebar only when the card has spare width. */
@container project-card (min-width: 1280px) {
  .pt-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 40px;
    align-items: start;
  }
  .pt-desc { max-width: 76ch; }
  .pt-foot { margin: 0; }
  .pt-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pt-group { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pt-group-l { margin: 0; padding-top: 5px; }
}
@media (max-width: 720px) {
  .pt-inner { padding: 26px 22px; }
  .pt-head { gap: 16px; }
  .pt-numcol { flex-basis: 28px; }
  .pt-num { font-size: 24px; }
  .pt-title { font-size: 21px; }
  .pt-foot { margin-left: 0; }
  .pt-stack { gap: 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-card.reveal { opacity: 1; transform: none; transition: none; }
}