/* BASE — page surface + the grain/scanline texture. */
* { box-sizing: border-box; }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--surface);
  background-image: radial-gradient(120% 80% at 50% -10%, #f4e7c9 0%, #ead7b0 60%, #e0caa0 100%);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* sticky footer — main fills the gap so the footer stays at the bottom */
.content { flex: 1; }
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: var(--grain-url);
}
.page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--scanline-opacity);
  background-image: repeating-linear-gradient(0deg, #000 0, #000 1px, transparent 1px, transparent 3px);
}