/* Final pre-launch polish. Preserve V4's minimalist visual language while tightening hierarchy, readability and responsive behavior. */

.search-input::placeholder {
  color: #76817f;
  opacity: 1;
}

.section-head-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* The smallest metadata in V4 was visually too faint/small on laptops and high-DPI screens. */
.recent-aside span:last-child,
.work-aside span:last-child {
  font-size: .76rem;
  letter-spacing: .065em;
}

.hero-photo figcaption {
  font-size: .78rem;
}

.work-topics,
.work-resources {
  font-size: .8rem;
}

.footer-primary p,
.footer-links {
  font-size: .82rem;
}

/* Tablet: avoid a cramped split hero. The professional identity remains primary, then the portrait. */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero-photo {
    width: min(100%, 380px);
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .main-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px 18px;
  }

  .main-nav a {
    padding: 5px 0 6px;
    line-height: 1.25;
  }

  .hero-grid {
    gap: 26px;
  }

  .hero-photo {
    width: min(100%, 340px);
    order: 0;
    justify-self: start;
    margin-top: 2px;
  }

  .hero-photo img {
    aspect-ratio: 4 / 5;
    object-position: center 40%;
  }

  .home-section {
    padding: 42px 0;
  }

  .section-head {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
  }

  .type-filter {
    gap: 4px 18px;
  }

  .text-filter {
    padding: 10px 0;
  }

  .topic-options {
    gap: 2px 18px;
  }

  .topic-button {
    padding: 8px 0;
  }
}

@media (max-width: 420px) {
  .main-nav {
    gap: 4px 15px;
  }

  .main-nav a {
    font-size: .82rem;
  }

  .hero-copy h1 {
    font-size: clamp(2.65rem, 13vw, 3.4rem);
  }
}