@media only screen and (max-width: 1200px) {
  /* drop the floating frame; the panel becomes full-bleed */
  .shell { padding: 0; }
  .panel {
    border: 0; border-radius: 0; box-shadow: none;
    min-height: 100vh; display: block;
  }

  /* sidebar becomes an off-canvas drawer (menu.js toggles .menu.open) */
  div.menu {
    position: fixed; top: 0; bottom: 0; left: -110%;
    width: min(320px, 86vw); max-width: 86vw; max-height: 100vh;
    z-index: 40; border-right: 1px solid var(--border);
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0); transition: left .22s ease, box-shadow .22s ease;
  }
  div.menu.open { left: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }

  main.main, div.body { min-height: 100vh; }
  .main-head { padding: 12px 16px; }
  .content { padding: 8px 16px 64px; max-width: 100%; }
  .content > * { max-width: 100%; }

  .mobile-hidden { display: none !important; }
  .content ul { padding-inline-start: 26px; }
  .content .strip, .content .recent, .content .linktiles { grid-template-columns: 1fr; }

  /* lock background scroll while the drawer is open */
  body.menu-open { overflow: hidden !important; max-height: 100vh; }

  .content .image-container img { max-width: 92vw; }
}