@media (max-width: 84em) {
  .container      { max-width: 115rem; }
  .hero__text     { font-size: 4.8rem; }
  .hero__cta      { font-size: 2rem; }
}

@media (max-width: 78em) {
  html { font-size: 56.25%; }

  .container         { max-width: 105rem; }
  .nav__item         { font-size: 1.8rem; }
  .section__heading  { font-size: 3rem; }
  .about__text       { font-size: 1.6rem; }
  .about__photo      { width: 22rem; }
  .about__body       { gap: 6rem; }
  .projects__item    { gap: 4rem; }
  .writing__list     { gap: 2rem; }
  .writing__card     { padding: 2.2rem; }
}

@media (max-width: 60em) {
  html { font-size: 50%; }

  .projects__item,
  .projects__item--reverse {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }

  .projects__media { width: 70%; }

  .max-width { max-width: 100%; }

  .projects__info { padding-inline: 3rem; }

  .projects__stats,
  .projects__tags,
  .projects__actions { justify-content: center; }

  .nav__item   { font-size: 1.7rem; }
}

@media (max-width: 52em) {
  .nav {
    justify-content: flex-end;
    padding-inline: 1.6rem;
  }

  .nav__toggle { display: flex; }

  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding-block: 1rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .nav--open .nav__list { display: flex; }

  .nav__item { font-size: 2rem; }

  .nav__link {
    width: 100%;
    padding: 1.4rem 2rem;
    text-align: center;
  }

  .about__body {
    flex-direction: column-reverse;
    gap: 5rem;
    text-align: center;
  }

  .about__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 4rem;
  }

  .about__skill-group {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .about__skills { justify-content: center; }

  .about__actions { justify-content: center; }

  .about__photo { width: 35%; margin-inline: auto; }

  .projects { margin-top: 8rem; }

  .writing__list {
    grid-template-columns: 1fr;
    max-width: 60rem;
  }
}

@media (max-width: 38em) {
  .hero__text  { font-size: 3.4rem; }
  .hero__pitch { font-size: 2rem; }
  .hero__open  { font-size: 1.7rem; }
  .hero__cta   { font-size: 1.5rem; }

  .projects { margin-top: 10rem; }

  .projects__media { width: 90%; }
  .projects__info  { padding-inline: 1.5rem; }

  .experience__body { padding-inline: 2rem; }
  .timeline         { padding-left: 3.2rem; }
  .timeline__item::before { left: -3.2rem; }
}

@media (max-width: 31em) {
  .hero__text { font-size: 3rem; }

  .contact__message { padding-inline: 5rem; }

  .about__photo { width: 45%; margin-inline: auto; }
  .about__text  { padding-inline: 2.7rem; }
}

@media (max-width: 22em) {
  .contact__submit { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .projects__media:hover .projects__img,
  .writing__card:hover { transform: none; }
}