:root { --tap-min: 44px; }

/* iPhone 14 Pro width and similar */
@media (max-width: 430px) {
  :root {
    --container-pad: 16px;
    --tap-min: 44px;
  }

  /* Respect safe areas when using viewport-fit=cover */
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: hidden;
  }

  /* Navigation and header spacing */
  .nav-glass {
    padding-left: max(1rem, var(--container-pad));
    padding-right: max(1rem, var(--container-pad));
  }
  header, nav, footer {
    padding-left: max(1rem, var(--container-pad));
    padding-right: max(1rem, var(--container-pad));
  }

  /* Force the mobile nav on narrow/touch devices */
  .desktop-nav { display: none !important; }
  .mobile-nav { display: block !important; }

  .mobile-nav .mobile-menu {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* Touch target sizing */
  .nav-link, .dropdown-link, button, .btn, a[role="button"] {
    min-height: var(--tap-min);
  }
  #mobile-menu-toggle {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0.5rem;
  }

  /* Hero sizing and typography for readability */
  .hero-stack { height: min(62vh, 600px); }
  .hero-content { padding-top: 5vh; }
  .cage { width: min(60vmin, 440px); }
  h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.25; }
  h2 { font-size: clamp(18px, 5.5vw, 24px); }

  /* Layout tightening */
  .grid { gap: 1rem; }
}

/* Optional container queries for very small components */
@supports (container-type: inline-size) {
  .card-container { container-type: inline-size; }
  @container (max-width: 380px) {
    .card { grid-template-columns: 1fr; }
  }
}

/* Touch ergonomics */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a[role="button"], .nav-link, .dropdown-link { min-height: var(--tap-min); }
  .glass-card:hover { transform: none !important; }
  a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }
}

/* Reduced motion: clamp animations and hide heavy canvases */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  canvas#particle-canvas, canvas#hero-particles { display: none !important; }
}