/* Projects */
.proj { display: flex; flex-direction: column; height: 100%; }
.tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); flex: none; }
.tab { padding: 7px 14px; border-radius: 7px 7px 0 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.tab.on { color: var(--fg); background: var(--surface); border-color: var(--line); }
.tab .n { color: var(--accent); margin-left: 4px; }
.plist { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; overflow: auto; }
.pcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pcard .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pcard h3 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pcard .yr { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pcard p { margin: 0; color: #b4c0d3; font-size: 13.5px; }
.pcard .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.pcard a { font-family: var(--font-mono); font-size: 12px; text-decoration: none; }
.pcard a:hover { text-decoration: underline; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 5px; vertical-align: 0; }
.note { padding: 18px; color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; grid-column: 1 / -1; }
.note code { color: var(--warn); }