.work-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
}



.project-board {

  display: grid;

  gap: var(--space-4);

}



.project-item {

  display: grid;

  gap: 0;

  padding: 0;

  border: 1px solid var(--line);

  background: var(--surface);

  overflow: hidden;

  cursor: default;

  transition: box-shadow 0.3s var(--ease), transform 0.35s var(--ease-spring), border-color 0.25s ease;

}



.project-item[draggable="true"] {

  cursor: grab;

}



.project-item:hover {
  border-color: rgba(45, 212, 191, 0.28);
  box-shadow: 0 16px 36px var(--depth-2);
}



.project-item:active[draggable="true"] {

  cursor: grabbing;

}



.project-item.is-dragging {

  opacity: 0.55;

  transform: scale(0.985);

}



.project-item .media-demo {
  border: 0;
  border-bottom: 1px solid var(--line);
}

.project-item .media-demo__stage {
  min-height: 220px;
}



.project-item__content {

  display: grid;

  gap: var(--space-2);

  padding: var(--space-3);

}



.project-item__top {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: var(--space-2);

  align-items: start;

}



.project-item__name {

  font-family: var(--font-display);

  font-size: clamp(var(--text-xl), 2.4vw, 1.65rem);

  font-weight: 700;

  line-height: var(--leading-tight);

  letter-spacing: var(--tracking-tight);

}



.project-item__meta {

  color: var(--ink-soft);

  font-family: var(--font-body);

  font-size: var(--text-sm);

  font-weight: 400;

  line-height: var(--leading-snug);

  letter-spacing: 0;

  margin-top: 0.2rem;

}



.project-item__summary {

  color: var(--ink-soft);

  max-width: 40rem;

  font-size: var(--text-sm);

}



.project-item__highlights {

  margin: 0;

}



.project-item__highlights li {

  position: relative;

  padding-left: 1rem;

  margin-bottom: 0.3rem;

  color: var(--ink-soft);

  font-size: var(--text-sm);

}



.project-item__highlights li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 0.35rem;

  height: 0.35rem;

  background: var(--accent);

}



.project-item__more {

  margin-top: -0.25rem;

}



.project-item__more summary {

  cursor: pointer;

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--accent-deep);

  list-style: none;

}



.project-item__more summary::-webkit-details-marker {

  display: none;

}



.project-item__more[open] summary {

  margin-bottom: 0.4rem;

}



.project-item__platforms {

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem;

}



@media (min-width: 900px) {
  .project-item:has(.media-demo) {
    grid-template-columns: 0.95fr 1.15fr;
    align-items: stretch;
  }

  .project-item .media-demo {
    min-height: 100%;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}