.work-header{
  padding: 140px 0 56px;
}
.work-title{
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(48px, 9vw, 96px);
  line-height:0.95;
  margin: 0 0 24px;
}
.work-intro{
  font-family: var(--body);
  font-size: 17px;
  color: var(--text-dim);
  max-width: 56ch;
  margin:0 0 8px;
}

.project-grid{
  padding: 16px 0 96px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 40px 32px;
}
@media (max-width: 800px){
  .project-grid{ grid-template-columns: 1fr; }
}

.proj-card{
  display:flex;
  flex-direction: column;
  height:100%;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color .25s ease;
}
.proj-card:hover{ border-color: var(--line); }
.proj-card:hover .proj-img{ border-color: var(--beacon-dim); }
.proj-card:hover h2{ color: var(--beacon); }

.proj-img{
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  width:100%;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color .25s ease;
}
.proj-info{
  display:flex;
  flex-direction: column;
  flex: 1;
}
.proj-info-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 6px 16px;
  margin-bottom: auto;
  padding-bottom: 16px;
}
.proj-info h2{
  font-family: var(--display);
  font-weight:700;
  font-size: 26px;
  margin:0;
  transition: color .2s ease;
}
.proj-meta{
  font-family: var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color: var(--text-dim);
  margin:0;
}

/* ---- Other Projects tile (no image, text only) ---- */
.proj-card-other{
  border: 1px dashed var(--line);
  border-radius: 4px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 32px;
  transition: border-color .25s ease, background .25s ease;
}
.proj-card-other:hover{
  border-color: var(--beacon-dim);
  border-style: solid;
  background: var(--bg-raised);
}
.proj-other-inner{ text-align:center; }
.proj-other-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.proj-card-other h2{
  font-family: var(--display);
  font-weight:700;
  font-size: 30px;
  margin: 0 0 20px;
}
.proj-card-other .cta{ border-color: var(--beacon); }