/* Shared Olive palette, stationary paper, and projected sunlight. */
:root {
  --cream-rgb: 255 243 218;
  --sage-rgb: 237 241 218;
  --value-rgb: 225 233 208;
  --cream: rgb(var(--cream-rgb));
  --sage: rgb(var(--sage-rgb));
  --forest: #1e4034;
  --ink: #1e4034;
  --mint: #dfe9d3;
  --terracotta: #b26342;
  --terracotta-button: #ae603d;
  --terracotta-deep: #974e33;
  --button-ink: #fffdf5;
  --muted: #3f4d38;
  --line: #91a378;
  --peach: #e7c9b2;
}

body { background: var(--cream); color: var(--ink); isolation: isolate; }

/* One receiving surface continues behind every section. Paper stays still;
   loose boughs frame broad openings in the warm light. */
.page-atmosphere {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--cream);
}
.page-paper {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/assets/ivory-paper.webp') center / 760px auto repeat;
  mix-blend-mode: multiply;
  /* The paper supplies fine grain, not a second layer of cloudy shade. */
  filter: grayscale(1) brightness(1.035);
  opacity: .38;
}
.page-sunlight {
  position: absolute;
  inset: 0;
}
.page-sunlight::before {
  content: '';
  position: absolute;
  inset: 0;
  /* A static export of the same canopy, without paper or foreground UI. */
  background: url('/assets/olive-canopy-desktop.webp') center / cover no-repeat;
}
.page-sunlight.is-rendered::before { display: none; }
.sunlight-canvas { display: none; width: 100%; height: 100%; }
.page-sunlight.is-rendered .sunlight-canvas { display: block; }

@media (max-width: 699px) {
  .page-paper { opacity: .36; }
  .page-sunlight::before { background-image: url('/assets/olive-canopy-mobile.webp'); }
}

@media (forced-colors: active) {
  .page-atmosphere { display: none; }
}