/* responsive.css — every breakpoint in one place.
   The layout is a single narrow column at all widths; these rules only
   adjust density, type, and the mobile navigation. */

/* Tablet and below: slightly tighter frame. */
@media (max-width: 768px) {
  main {
    padding-top: 2.75rem;
  }

  h1 { font-size: 1.75rem; }

  .site-footer {
    margin-top: 3rem;
  }
}

/* Mobile nav: links collapse behind a minimal menu button. */
@media (max-width: 600px) {
  body {
    font-size: 1.0625rem;
  }

  .wrap {
    padding: 0 1.25rem;
  }

  .menu-button {
    display: inline-flex;
    /* The collapsed nav is still a (zero-width) flex item, which would
       center the button under space-between. This pins it right. */
    margin-left: auto;
  }

  .site-nav ul {
    display: none;
    position: absolute;
    top: 4.25rem;
    left: 1.25rem;
    right: 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem;
    z-index: 10;
  }

  .site-nav.open ul {
    display: flex;
  }

  .site-nav a,
  .site-nav .theme-button {
    width: 100%;
    justify-content: flex-start;
    padding: 0.6rem 0.75rem;
  }

  .now-key {
    min-width: 6.5rem;
  }

  .to-top {
    right: 1rem;
    bottom: 1rem;
  }
}

/* Desktop: the menu button has no job. */
@media (min-width: 601px) {
  .menu-button {
    display: none;
  }
}

/* Small phones (360–390px): protect type size and thumb prominence. */
@media (max-width: 390px) {
  .wrap {
    padding: 0 1rem;
  }

  h1 { font-size: 1.6rem; }

  .project-title-row h2,
  .project-title-row h3 {
    font-size: 1.15rem;
  }

  .note-row {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* Motion-sensitive users: affordance without movement. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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