/* Portfolio entries that are kept outside the generated React bundle. */
#root .hali-row {
  touch-action: manipulation;
}

#root .hali-row.is-project-active.is-previewing > span:first-child {
  color: #ffd400 !important;
}

#root .hali-row--kevabro:not(.is-previewing) > .hali-row-title {
  color: #efeee7 !important;
}

#root ul.portfolio-project-active:not(.portfolio-kevabro-active) .hali-row--kevabro .hali-row-title {
  color: #efeee7 !important;
}

/* Keep opacity choreography in one place for every row. The bridge owns the
   active-state class, while React remains free to update text and covers. */
#root ul.portfolio-project-active > .hali-row {
  opacity: .45 !important;
}
#root ul.portfolio-project-active > .hali-row[data-portfolio-active="true"] {
  opacity: 1 !important;
}

.hali-row--kevabro .hali-row-title {
  color: #efeee7;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(17px, 1.5vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hali-row--kevabro.is-previewing .hali-row-title {
  color: #ffd400;
}

.hali-row--kevabro .hali-row-meta {
  color: rgba(239, 238, 231, 0.5);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hali-row--kevabro .hali-row-year {
  color: rgba(239, 238, 231, 0.5);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 0.9vw, 16px);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 639px) {
  .hali-row--kevabro .hali-row-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hali-row--kevabro .hali-row-title { transition: none; }
}

/* Bottom-centre "Curriculum" download link on the landing. Sits on the same
   baseline as the two bottom corners; the padding/negative margin gives it a
   comfortable tap target without moving the text. */
#root .hali-corner--center {
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 14px;
  margin: -16px 0;
  white-space: nowrap;
}