/* ============ WORK (list) ============ */
#work{ background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.work-list{ display: flex; flex-direction: column; }

.work-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}
.work-item:last-child{ border-bottom: 1px solid var(--line); }

.work-item h3{
  font-size: clamp(1.35rem, 1.3vw + 1rem, 1.7rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
  transition: color 0.2s ease;
}
.work-item:hover h3{ color: var(--accent); }

.work-item p{
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 1rem 0;
}

.work-tags{
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.work-links{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
  white-space: nowrap;
  padding-top: 0.3rem;
}

.work-links a{
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.work-links a:hover{ color: var(--accent); border-color: var(--accent); }

@media (max-width: 640px){
  .work-item{ grid-template-columns: 1fr; }
  .work-links{ flex-direction: row; align-items: flex-start; gap: 1.25rem; }
}