/* One continuous palette derived from the watercolor hero. */
:root {
  --tone-canvas: #f8f7f2;
  --tone-paper: rgba(252, 251, 247, .74);
  --tone-paper-strong: rgba(252, 251, 247, .94);
  --tone-ink: #243a69;
  --tone-body: #566784;
  --tone-muted: #78869d;
  --tone-blue: #6f86b6;
  --tone-blue-soft: rgba(111, 134, 182, .1);
  --tone-rule: rgba(61, 82, 126, .14);
  --tone-shadow: 0 22px 64px rgba(48, 67, 105, .065);

  --river-canvas: var(--tone-canvas);
  --river-paper: var(--tone-paper);
  --river-ink: var(--tone-ink);
  --river-body: var(--tone-body);
  --river-muted: var(--tone-muted);
  --river-blue: var(--tone-blue);
  --river-rule: var(--tone-rule);
}

html,
body {
  background-color: var(--tone-canvas);
}

html body main > #faces,
html body main > #work,
html body main > #thinking,
html body main > section#future.future-lab,
html body main > #life {
  background-color: var(--tone-canvas) !important;
  background-image: radial-gradient(ellipse 52% 28% at var(--tone-light-x, 82%) 8%, rgba(117, 145, 190, .065), transparent 74%) !important;
}

#faces { --tone-light-x: 84%; }
#work { --tone-light-x: 15%; }
#thinking { --tone-light-x: 88%; }
#future { --tone-light-x: 48%; }
#life { --tone-light-x: 12%; }

.resume-editorial__intro,
#work .folder-page,
#work .folder-page[data-tone],
.workflow-portals,
.life-memory-wheel {
  border-color: var(--tone-rule) !important;
  background-color: var(--tone-paper) !important;
  box-shadow: var(--tone-shadow) !important;
}

.resume-editorial__intro {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, .38), rgba(116, 145, 190, .035)) !important;
}

#work .folder-tabs button,
#work .project-file,
.workflow-portals button {
  border-color: var(--tone-rule) !important;
  color: var(--tone-ink);
}

#work .folder-tabs button.is-active,
#work .project-file:hover,
.workflow-portals button:hover {
  background-color: rgba(255, 255, 255, .56) !important;
  box-shadow: 0 16px 42px rgba(49, 69, 108, .06);
}

#future .future-stage {
  background-color: transparent !important;
}

#future .future-three-canvas,
#future .world-scene-image {
  filter: saturate(.72) contrast(.96) brightness(1.04) hue-rotate(-4deg);
}

#future .world-label {
  color: var(--tone-ink);
  border-color: rgba(61, 82, 126, .25);
}

#future .world-label::before {
  background: var(--tone-blue);
}

.life-memory-wheel {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 252, .42), rgba(111, 139, 188, .04)),
    radial-gradient(circle at 50% 100%, rgba(111, 139, 188, .1), transparent 50%) !important;
}

.life-memory-card img {
  filter: saturate(.72) contrast(.94) brightness(.98);
}

.life-memory-card button:hover img,
.life-memory-card button:focus-visible img {
  filter: saturate(.88) contrast(.97) brightness(1.01);
}

.content-dialog,
.contact-dialog,
.workflow-dialog {
  color: var(--tone-ink);
  border-color: var(--tone-rule);
  background: var(--tone-paper-strong);
  box-shadow: 0 30px 100px rgba(38, 54, 92, .18);
}

.workflow-dialog__header,
.dialog-shell,
.contact-shell {
  background-color: var(--tone-paper-strong);
}

.river-footer {
  background: #263b66;
  color: rgba(249, 250, 252, .94);
}

@media (max-width: 760px) {
  html body main > #faces,
  html body main > #work,
  html body main > #thinking,
  html body main > section#future.future-lab,
  html body main > #life {
    background-size: 170% 100% !important;
  }
}