/* Dream sky: a background-only layer; original content and layout stay intact. */
:root {
  --paper: #f6faff;
}

body {
  background: var(--paper);
}

.site-header {
  background: rgba(246, 250, 255, .95);
  border-bottom-color: #dce8f6;
}

main {
  background:
    radial-gradient(ellipse 65% 500px at 0 930px, #e6f2fc8c, transparent),
    radial-gradient(ellipse 55% 550px at 100% 1400px, #eee9fc70, transparent),
    linear-gradient(180deg, #eaf3ff 0, #f4f9ff 1050px, #f6faff 1900px);
}

.hero {
  background-color: #edf5ff;
  background-image: url('/assets/dream-sky-v1.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  isolation: isolate;
}

/* Quietly fade the sky into the lighter content background. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 95px;
  background: linear-gradient(transparent, #eaf3ff);
  pointer-events: none;
}

.hero-inner {
  z-index: auto;
}

/* Blend the existing illustration's paper into the sky without changing it. */
.hero-art {
  mix-blend-mode: multiply;
}

.hero-art img {
  mix-blend-mode: normal;
  mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 86%, transparent);
  mask-composite: intersect;
}

.hero-description {
  color: #465672;
}

.hero-note {
  color: #62738b;
}

.site-footer {
  background: #edf3fc;
  border-top-color: #dce7f5;
}

@media (max-width: 600px) {
  .hero {
    background-position: 48% top;
    background-size: auto 100%;
  }

  main {
    background:
      radial-gradient(ellipse 100% 500px at 100% 1500px, #edeafa66, transparent),
      linear-gradient(180deg, #eaf3ff 0, #f4f9ff 1150px, #f6faff 1900px);
  }

  .hero::after {
    height: 65px;
  }
}