/* ---- phones: the same site, sized for a thumb ----
   Jasper, 2026-10-06: the mobile view has to look good and still feel like the whole
   site, so nothing is taken away. Sean's own rule hid the nav below 600px; here it comes
   back as its own row that scrolls sideways, every tap reaches 44px, the brand stops
   wrapping into three lines, and fields stop making iOS zoom the page.
   Everything in this file is scoped to these widths, so the desktop design is untouched. */

@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

  /* header: the brand on one line, the nav on its own scrolling row */
  .bar { flex-wrap: wrap; align-items: center; padding-top: .45rem; padding-bottom: .45rem; }
  .wordmark {
    font-size: .92rem !important;
    white-space: nowrap !important;
    max-width: none !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bar nav {
    flex: 1 0 100%;
    order: 9;
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-top: .35rem;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, .16);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a:not(.join) {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 .85rem;
    font-size: .95rem;
    white-space: nowrap;
  }
  .bar nav a:not(.join)[aria-current="page"] { color: #fff; font-weight: 700; }

  /* the one button in his chrome, now a real target */
  .join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.1rem;
  }

  /* footer links get the same floor, and enough width to tap without aiming */
  footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .35rem; }
  footer ul, footer .cols { display: flex; flex-wrap: wrap; gap: 0 .9rem; }

  /* a field under 16px makes iOS zoom the whole page on focus */
  input, select, textarea { font-size: 16px !important; min-height: 48px; }
  button, input[type="submit"], input[type="button"] { min-height: 44px; font-size: 1rem; }

  /* the small links that sit in a row heading, on any page */
  .wx-rowhead a { display: inline-flex; align-items: center; min-height: 44px; }

  /* a real mobile gutter instead of a pinched desktop margin */
  .wrap { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 380px) {
  .wordmark { font-size: .84rem !important; }
  .bar nav a:not(.join) { padding: 0 .6rem; font-size: .9rem; }
}