/* make the page a column; footer pushed to bottom */
html, body { height: 100%; }
body {
  min-height: 100dvh;           /* viewport height incl. mobile UI */
  display: flex;
  flex-direction: column;
}

/* your main content fills remaining space */
main.container.layout { flex: 1 0 auto; }

/* footer is normal flow, auto-pushed to bottom by flex */
.site-footer{
  background: var(--panel);
  border-top: 1px solid var(--border);
  /* remove sticky/fixed positioning */
  position: static;
  /* optional: ensure it hugs the bottom of the flex column */
  margin-top: auto;
}

.site-footer .container{
  max-width: none;
  margin: 0 auto;
  padding: 10px 16px;
}