/* 960px — Tablet / layout breakpoint */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .hero__copy {
    padding-top: var(--space-2xl);
  }

  .hero__art {
    height: 320px;
    max-width: 520px;
  }
}

/* 768px — Tablet */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: var(--space-5xl) var(--content-padding) var(--space-3xl);
  }

  .hero__title {
    max-width: 100%;
  }

  .hero__lede {
    font-size: var(--text-base);
  }

  .hero__scroll {
    display: none;
  }

  .hero__art {
    height: 260px;
  }

  .portfolio__header {
    margin-bottom: var(--space-2xl);
  }

  .portfolio__grid {
    grid-template-columns: 1fr;
  }

  .contact__title {
    font-size: var(--text-3xl);
  }

  .nav-pill {
    gap: var(--space-md);
    padding: 0.4rem 0.75rem;
    max-width: calc(100% - var(--space-xl));
  }

  .nav-pill__link {
    font-size: var(--text-xs);
  }
}

/* 414px — Mobile large */
@media (max-width: 414px) {
  .hero {
    padding: var(--space-4xl) var(--content-padding) var(--space-2xl);
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__cta {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
  }

  .hero__art {
    height: 200px;
  }

  .portfolio {
    padding: var(--space-3xl) var(--content-padding);
  }

  .project-card__body {
    padding: var(--space-md);
  }

  .project-card__title {
    font-size: var(--text-lg);
  }

  .contact {
    padding: var(--space-3xl) var(--content-padding);
  }

  .contact__cta {
    font-size: var(--text-lg);
  }

  .foot-line {
    padding: var(--space-lg) var(--content-padding);
  }

  .foot-line p {
    font-size: var(--text-xs);
  }
}

/* 375px — Mobile medium */
@media (max-width: 375px) {
  .nav-pill__links {
    gap: 2px;
  }

  .nav-pill__link {
    padding: var(--space-xs) 0.4rem;
  }

  .project-card__overlay {
    opacity: 1;
  }
}

/* 320px — Mobile small */
@media (max-width: 320px) {
  .nav-pill {
    gap: var(--space-sm);
    padding: 0.35rem 0.6rem;
  }

  .nav-pill__wordmark {
    font-size: var(--text-sm);
  }

  .nav-pill__link {
    font-size: 0.7rem;
    padding: var(--space-xs) 0.3rem;
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .project-card__tags {
    gap: 2px;
  }

  .project-card__tag {
    font-size: 0.65rem;
  }
}