/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */
@media (max-width: 760px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .main-nav.open { max-height: 480px; overflow-y: auto; }
  .main-nav a {
    padding: 14px var(--edge);
    border-bottom: 1px solid var(--rule);
  }
  .nav-toggle { display: flex; }
}

/* ==========================================================================
   About page
   ========================================================================== */
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-figure img { max-width: 260px; }
  .fact-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Experience timeline
   ========================================================================== */
@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: 10px; }
}

/* ==========================================================================
   Programs feature photo
   ========================================================================== */
@media (max-width: 640px) {
  .program-feature { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Small phones — tighten section padding and headline size
   ========================================================================== */
@media (max-width: 400px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 2.1rem; }
  main h1 { font-size: 1.7rem; }
}