/* HOMEPAGE */
.hero {
  padding-top: 32vh;
}


.hero-location {
  grid-column: 1 / span 3;
  display: flex;
  align-self: end;
  column-gap: var(--spacing-8);
}

.icon-dot {
  display: inline-block; /* or block — needed for width/height to take effect */
  width: 0.4rem;
  height: 0.4rem;
  /* border-radius: 50%; */
  background-color: var(--color-text-primary-on-light);
  flex-shrink: 0;
  align-self: center;
  transform: translateY(-0.05em); /* nudge upward to match optical text center */
}

.hero-location-text,
.hero-time {
  font-family: var(--font-family);
  font-size: var(--text-body-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-primar-on-light);
}

.hero-intro {
  grid-column: 7 / -1; /* -1 = last line, so this runs to column 12 */
  font-family: var(--font-family);
  font-size: var(--text-title);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  max-width: 65ch;
  /* font-feature-settings: "tnum" on, "lnum" on, "pnum" on; */
}

/* Mobile: location sits above the intro, both left-aligned and full-width */
@media (max-width: 768px) {
  .hero-location {
    grid-column: 1 / -1;
    align-self: start;
  }

  .hero-intro {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 5vh;
  }
}


/* WORK */
.work {
  padding-top: 6vh;
}

.work-track {
  display: block;
  columns: 2;
  column-gap: var(--gutter);
}

.project-card-link {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--spacing-40);
}

.project-card {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-12);
}

.project-media {
  overflow: hidden;
  background-color: var(--color-bg-light-gray);
}

.project-image {
  width: 100%;
  height: auto;
}

.project-info {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-2);
}

.project-title {
  font-family: var(--font-family);
  font-size: var(--text-heading-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary-on-light);
}


.project-tags {
  font-family: var(--font-family);
  font-size: var(--text-body-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-secondary-on-light);
}

/* Mobile: single column instead of two */
@media (max-width: 768px) {
  .work-track {
    columns: 1;
  }
}