/* ============================================================
   Mobile optimization layer — loaded last so it overrides the
   per-page inline <style> and resources/style.css.
   Goals: no horizontal page scroll 320–430px, readable/tappable
   content, 44px tap targets, iOS-safe form inputs.
   ============================================================ */

/* Guardrails: never let anything create horizontal page scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* Media never overflows its container */
img, svg, video, canvas, iframe { max-width: 100%; }

/* Grid/flex children must be allowed to shrink below content size */
.hero-wrap > *, .grid > *, .footer-row > *, .nav > *, .cta-row > * { min-width: 0; }

/* The decorative ASCII wordmark is the widest element on the page.
   Contain it so it scrolls inside its own box instead of the page. */
.brand-ascii {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* iOS: 16px minimum on form controls prevents focus zoom-jank */
input, textarea, select { font-size: 16px; }

/* Honor OS safe areas (viewport-fit=cover) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

@media (max-width: 768px) {
  /* Shrink the giant hero wordmark so it fits on phones */
  .hero .brand-ascii { font-size: 2.4px; letter-spacing: -0.2px; }

  /* Tap targets >= 44px */
  .nav a.navlink,
  .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .iconbtn { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }

  /* Let primary nav wrap comfortably and stay centered */
  nav[aria-label="Primary"] { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 430px) {
  .hero .brand-ascii { font-size: 2px; letter-spacing: -0.2px; }
  .container { width: min(var(--maxw), calc(100% - 2 * var(--space-3))); }
}

@media (max-width: 360px) {
  .hero .brand-ascii { font-size: 1.7px; }
}