What the frame does below 820px

Five breakpoints, and each exists for a structural reason rather than for a device. Nothing in the system keys off "tablet" or "phone".

Two panes ride one track. The root pane lists the sections; choosing one slides the track left rather than opening a nested popover, and the breadcrumb at the top names where you are. Back slides it home. It is a second screen, not a menu hanging off the header.

<header class="nav">
  <div class="nav-inner">
    <a href="/" class="wordmark">…</a>
    <button class="nav-toggle" data-drawer-toggle aria-expanded="false" aria-controls="drawer">
      <svg class="nav-toggle-bars icon" …><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      <svg class="nav-toggle-x icon" …><path d="M6 6l12 12M18 6L6 18"/></svg>
    </button>
    <div class="nav-right">…desktop nav, display:none below 820…</div>
  </div>
</header>

<!-- SIBLING of header -->
<div class="nav-drawer" id="drawer" hidden>
  <div class="nav-drawer-crumb">
    <button class="nav-drawer-back" data-drawer-back hidden>…</button>
    <nav class="nav-drawer-trail">
      <span>Menu</span>
      <span class="nav-drawer-crumb-sep" data-drawer-sep hidden>/</span>
      <span class="nav-drawer-crumb-leaf" data-drawer-leaf></span>
    </nav>
  </div>
  <div class="nav-drawer-track">
    <div class="nav-drawer-page">
      <button class="nav-drawer-row" data-drawer-section="services">
        <span class="nav-drawer-row-label">Services</span>…
      </button>
    </div>
    <div class="nav-drawer-page" data-drawer-sub>
      <div data-section-panel="services" hidden>…</div>
    </div>
  </div>
</div>

44px is the floor, not the target. The system applies it under @media (pointer: coarse) — a capability query, so a narrow desktop window keeps its compact controls and a large tablet gets the bigger ones.

• The burger is a 44px square with a 22px icon — the padding is the target, and it keeps the icon optically centred against the wordmark on the other rail.
• Drawer rows are 56px minimum, full bleed. A row is easier to hit than a word.
• -webkit-tap-highlight-color: transparent everywhere, with a real :active state instead. The default blue flash is off-palette.
• Never rely on hover for anything a touch user must reach. If a control only appears on hover, it does not exist on a phone.

The common advice — reflow each row into a stack of labelled pairs — is wrong here. A table exists so values can be compared down a column. Turn it into a stack of cards and you have destroyed the only reason it was a table.

So the lock is dropped below 760px and the page scrolls normally. This is already in journeymro.css — there is nothing to add per page:

@media (max-width: 760px) {
  .page-main { min-height: 0; max-height: none; overflow: visible; }
  .page-scroll { overflow: visible; }
}

If a screen genuinely must fill the viewport on a phone — a map, a full-bleed chart — use 100dvh rather than 100vh, and accept that the layout will resize as the address bar moves.

• 16px minimum on inputs. iOS Safari zooms the page on focus for anything smaller, and it never zooms back. .msg-input is 0.95rem — check any override you add.
• One field per row below 560px. The paired name/phone row in the site's contact form stacks; two 140px fields side by side is two fields nobody can type in.
• Set inputmode and autocomplete. inputmode="numeric" for part numbers and quantities, type="email" for email — the keyboard is a design decision.
• Keep the submit button in the flow, not fixed. A fixed bar at the bottom fights the on-screen keyboard on both platforms.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

No maximum-scale and no user-scalable=no — pinch zoom is an accessibility feature, and disabling it to protect a layout means the layout is wrong.

For anything pinned to the bottom of the screen on a notched device, pad by the inset rather than by a guess:

.bottom-dock {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

overflow-x: hidden is set on body as a backstop, but it hides the symptom rather than the cause. If a page scrolls sideways on a phone, something is wider than the viewport — usually a table without .table-wrap, a fixed-width SVG, or a white-space: nowrap heading.

Run this at 375px before calling a screen done.

• No horizontal scroll anywhere on the page — check with the table filtered to its widest row.
• The drawer opens, slides to a section, comes back, and closes on navigation and on Escape.
• Both notches are gone and the arrow keys do nothing.
• The footer is reachable and the page does not clip at the bottom as the address bar hides.
• Every tap target is at least 44px, including icon-only buttons.
• No control is reachable only by hover.
• Focusing an input does not zoom the page.
• Charts keep their reserved aspect ratio and do not overflow their panel.
• The light theme still reads outdoors — check the hairlines have not disappeared.