/* Per-page setting on <body>: plain, soft or scenic.
   Override --page-background-image on that body to use another image. */
body[data-page-background] {
  --page-background-image: url('/images/reference/mountain.webp');
}

@media (min-width: 761px) {
  body[data-page-background="soft"],
  body[data-page-background="scenic"] {
    --page-background-wash: rgb(251 253 254 / 84%);
    padding: 12px;
    background-color: #edf4f7;
    background-image: linear-gradient(var(--page-background-wash), var(--page-background-wash)), var(--page-background-image);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  body[data-page-background="scenic"] {
    padding: 36px 24px;
    background-image: linear-gradient(#cfdee64d, #dceaf08c), var(--page-background-image);
  }

  body[data-page-background="soft"] > :is(.site-shell, .page, .privacy-page),
  body[data-page-background="scenic"] > :is(.site-shell, .page, .privacy-page) {
    background: #fbfdfe;
    border-radius: 18px;
    box-shadow: 0 6px 28px rgb(36 65 86 / 3%);
  }

  body[data-page-background="scenic"] > :is(.site-shell, .page, .privacy-page) {
    border: 1px solid #fff;
    border-radius: 25px;
    background: linear-gradient(135deg, #fbfdfff7, #fffffffa 45%, #f7fbfdfc);
    box-shadow: 0 24px 90px #18334a13;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-page-background="scenic"] {
    padding: 22px 18px;
  }
}

/* Keep the available reading width on phones; scenery is decorative. */
@media (max-width: 760px) {
  body[data-page-background="soft"],
  body[data-page-background="scenic"] {
    padding: 0;
    background: #fbfdfe;
  }
}