/* Projects page — vertical list of the top 10 projects */

.projects {
  /* Keeps the hero card centred in the first screen (184px at 900px high, as in the design) */
  --page-pad-y: max(64px, calc((100vh - var(--label-height) - var(--label-gap) - var(--card-height)) / 2));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: var(--page-pad-y) 64px;
}

/* ---------- Hero ---------- */

.hero__body {
  justify-content: space-between;
  align-items: flex-start;
  padding: 36px 35px;
}

.hero__back {
  font-size: 44px;
  line-height: normal;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.hero__explore {
  width: 100%;
  font-size: 76px;
  line-height: normal;
  text-align: right;
  color: var(--color-text-strong);
  transition: color 0.3s ease;
}

.hero__back:hover,
.hero__explore:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* ---------- Project cards ---------- */

.project {
  display: flex;
  flex-direction: column;
  gap: var(--label-gap);
  scroll-margin-top: var(--page-pad-y);
}

.project__body {
  justify-content: flex-end;
  align-items: flex-end;
}

.project__title {
  width: 100%;
  font-size: 64px;
  line-height: normal;
  text-align: right;
  color: var(--color-text-strong);
}

.project__to-top {
  align-self: stretch;
  text-align: right;
}