/* ============================================================
   Projects page — table layout
   ============================================================ */

/* ── Page header ──────────────────────────────────────────── */

.projects-header {
  padding: 140px 0 56px;
  border-bottom: 1px solid var(--line);
}

.projects-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}

.projects-title {
  font-family: var(--hand);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin-bottom: 14px;
  display: inline-block;
  transform: rotate(-1deg);
}

.projects-sub {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

/* ── Main content area ────────────────────────────────────── */

main.container {
  padding-top: 0;
  padding-bottom: 48px;
}

/* ── Category sections ────────────────────────────────────── */

.cat-section {
  padding: 56px 0 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.cat-section-last {
  border-bottom: none;
  padding-bottom: 40px;
}

.cat-heading {
  font-family: var(--hand);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cat-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* ── Table ────────────────────────────────────────────────── */

.proj-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
  table-layout: fixed;
}

/* column widths */
.proj-table colgroup,
.proj-table th:nth-child(1),
.proj-table td:nth-child(1) { width: 16%; }
.proj-table th:nth-child(2),
.proj-table td:nth-child(2) { width: 44%; }
.proj-table th:nth-child(3),
.proj-table td:nth-child(3) { width: 36%; }
.proj-table th:nth-child(4),
.proj-table td:nth-child(4) { width: 4%; }

.proj-table thead tr {
  border-bottom: 1px solid var(--line);
}

.proj-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  padding: 0 12px 10px 0;
  text-align: left;
}

.proj-table th:last-child { padding-right: 0; }

.proj-table tbody tr {
  border-bottom: 1px solid rgba(213, 203, 186, 0.5);
  transition: background 0.15s;
  cursor: pointer;
}

.proj-table tbody tr:last-child {
  border-bottom: none;
}

.proj-table tbody tr:hover {
  background: rgba(36, 24, 10, 0.025);
}

.proj-table tbody tr:hover .proj-link {
  color: var(--text);
  transform: translate(2px, -2px);
}

.proj-table tbody tr:hover .proj-name a {
  color: var(--text);
}

.proj-table td {
  padding: 14px 12px 14px 0;
  vertical-align: top;
}

.proj-table td:last-child { padding-right: 0; }

/* — name cell — */
.proj-name {
  font-family: var(--hand);
  font-size: 21px;
  font-weight: 600;
  white-space: nowrap;
}

.proj-name a {
  color: var(--text);
  transition: color 0.15s;
}

/* make entire row clickable */
.proj-table tbody tr {
  position: relative;
}

/* — description cell — */
.proj-desc {
  font-family: var(--hand);
  font-size: 17px;
  color: var(--muted);
  line-height: 1.45;
}

/* — stack cell — */
.proj-stack {
  line-height: 1;
}

.proj-stack .tech {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid;
  margin: 3px 3px 3px 0;
  white-space: nowrap;
}

/* language — amber */
.tech-lang {
  background: rgba(180, 130, 20, 0.1);
  color: #7A5A10;
  border-color: rgba(180, 130, 20, 0.3);
}

/* database — sage green */
.tech-db {
  background: rgba(60, 110, 60, 0.1);
  color: #2E5E2E;
  border-color: rgba(60, 110, 60, 0.28);
}

/* cloud / infra — steel blue */
.tech-cloud {
  background: rgba(50, 100, 160, 0.1);
  color: #1E4E80;
  border-color: rgba(50, 100, 160, 0.28);
}

/* AI / ML — soft purple */
.tech-ai {
  background: rgba(110, 60, 150, 0.1);
  color: #5A2E80;
  border-color: rgba(110, 60, 150, 0.28);
}

/* frameworks — terracotta (matches site accent) */
.tech-framework {
  background: rgba(184, 70, 14, 0.09);
  color: #8A3010;
  border-color: rgba(184, 70, 14, 0.28);
}

/* tools / other — muted default */
.tech-tool {
  background: rgba(36, 24, 10, 0.05);
  color: var(--muted);
  border-color: var(--line);
}

/* — link arrow — */
.proj-link {
  font-size: 16px;
  color: var(--faint);
  text-align: right;
  padding-top: 15px;
  transition: color 0.15s, transform 0.15s;
  display: inline-block;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .projects-header { padding: 110px 0 40px; }

  .proj-table th:nth-child(3),
  .proj-table td:nth-child(3) { display: none; }

  .proj-table th:nth-child(1),
  .proj-table td:nth-child(1) { width: 30%; }
  .proj-table th:nth-child(2),
  .proj-table td:nth-child(2) { width: 64%; }
  .proj-table th:nth-child(4),
  .proj-table td:nth-child(4) { width: 6%; }
}

@media (max-width: 480px) {
  .proj-name { font-size: 19px; }
  .proj-desc { font-size: 15px; }

  .proj-table th:nth-child(4),
  .proj-table td:nth-child(4) { display: none; }

  .proj-table th:nth-child(1),
  .proj-table td:nth-child(1) { width: 35%; }
  .proj-table th:nth-child(2),
  .proj-table td:nth-child(2) { width: 65%; }
}