/* 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;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.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
  );
}

.grain-local {
  position: relative;
}
.grain-local::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: var(--grain-url);
}