/* ==========================================================================
   responsive.css — Mobile, tablet, large desktop breakpoints
   ========================================================================== */

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width: 640px) {
  .page {
    padding: 7rem 1.25rem 4rem;
  }

  .t-display {
    font-size: 2.5rem;
  }

  .btn {
    padding: 0.875rem 2rem;
  }
}

/* ---------- Tablet (641–1023px) ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
  .page__inner {
    max-width: 40rem;
  }
}

/* ---------- Large desktop (≥ 1440px) ---------- */
@media (min-width: 1440px) {
  .page {
    padding-top: 10rem;
  }

  .t-display {
    font-size: 4.5rem;
  }
}

/* ---------- Reduce nav padding on very small screens ---------- */
@media (max-width: 380px) {
  .nav-toggle {
    top: 1rem;
    right: 1rem;
  }
}