/* Soft chapter transitions: atmosphere replaces hard section rules. */
:root {
  --chapter-paper-warm: #f8f7f2;
  --chapter-paper-cool: #f5f7f8;
  --chapter-paper-blue: #f2f5f8;
}

#faces,
#work,
#thinking,
#future,
#life {
  position: relative;
  isolation: isolate;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-repeat: no-repeat;
}

#faces {
  background-color: var(--chapter-paper-warm) !important;
  background-image: radial-gradient(ellipse 52% 36% at 86% 8%, rgba(143, 163, 201, .075), transparent 72%) !important;
}

#work {
  background-color: #faf9f5 !important;
  background-image: radial-gradient(ellipse 46% 34% at 8% 12%, rgba(189, 174, 143, .065), transparent 72%) !important;
}

#thinking {
  background-color: var(--chapter-paper-cool) !important;
  background-image:
    radial-gradient(ellipse 42% 28% at 90% 12%, rgba(113, 145, 181, .07), transparent 72%),
    radial-gradient(ellipse 36% 25% at 4% 88%, rgba(178, 159, 193, .045), transparent 72%) !important;
}

section#future {
  background-color: var(--chapter-paper-blue) !important;
  background-image: radial-gradient(ellipse 58% 32% at 50% 2%, rgba(111, 151, 196, .08), transparent 76%) !important;
}

html body main > section#future.future-lab {
  background: var(--chapter-paper-blue) radial-gradient(ellipse 58% 32% at 50% 2%, rgba(111, 151, 196, .08), transparent 76%) no-repeat !important;
}

#life {
  background-color: #f8f7f3 !important;
  background-image:
    radial-gradient(ellipse 40% 28% at 10% 16%, rgba(194, 167, 128, .06), transparent 72%),
    radial-gradient(ellipse 42% 30% at 88% 86%, rgba(117, 146, 181, .055), transparent 74%) !important;
}

#faces > .chapter-heading,
#work > .chapter-heading,
#thinking > .chapter-heading,
#future > .chapter-heading,
#life > .chapter-heading {
  border-bottom: 0 !important;
}

/* A small local mark keeps chapter entry visible without drawing a boundary. */
#faces > .chapter-heading::after,
#work > .chapter-heading::after,
#thinking > .chapter-heading::after,
#future > .chapter-heading::after,
#life > .chapter-heading::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: rgba(77, 107, 164, .38);
}

@media (max-width: 760px) {
  #faces,
  #work,
  #thinking,
  #future,
  #life {
    background-size: 150% 100%;
  }
}