/* Shared paper and watercolor backgrounds. Decorative only; no overlay or motion. */
:root {
  --sb-paper-grain: url('/assets/img/paper-grain.svg');
  --sb-warm-paper: #fbf6eb;
}

body {
  background-color: var(--sb-warm-paper);
  background-image:
    var(--sb-paper-grain),
    radial-gradient(ellipse 840px 620px at calc(50% + 540px) 190px, #e0e5c78c, transparent 75%),
    radial-gradient(ellipse 760px 680px at calc(50% - 600px) 610px, #efd5b96e, transparent 76%),
    radial-gradient(ellipse 700px 660px at calc(50% + 310px) 490px, #f1d69b63, transparent 76%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 192px 192px, auto, auto, auto;
}

.site-header {
  background-color: #fbf7eef5;
  background-image: var(--sb-paper-grain);
  background-size: 192px 192px;
  border-bottom-color: #d9d0bc99;
}

/* Let the color live at the edges, leaving the welcome copy on light paper. */
.hero:not(.container) {
  background-color: var(--sb-warm-paper);
  background-image:
    var(--sb-paper-grain),
    radial-gradient(ellipse 56% 91% at 98% 4%, #dce4c79c, transparent 74%),
    radial-gradient(ellipse 51% 83% at 1% 98%, #eac8ac78, transparent 73%),
    radial-gradient(ellipse 43% 82% at 78% 43%, #f2d69580, transparent 76%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 192px 192px, auto, auto, auto;
}

.season-notice,
.intro-band {
  background-color: #e9eddf;
  background-image: var(--sb-paper-grain), linear-gradient(110deg, #f0e8cf80, transparent 48%, #dce6cf8c);
  background-size: 192px 192px, auto;
  border-color: #cdd5bd;
}

.season-notice .overview-band {
  background-color: #f5f5e9;
  background-image: var(--sb-paper-grain);
  background-size: 192px 192px;
}

.approach-section {
  background-image:
    var(--sb-paper-grain),
    radial-gradient(ellipse 65% 100% at 4% 20%, #f1dcb85e, transparent 75%);
  background-size: 192px 192px, auto;
}

#program,
.inquiry-section {
  background-color: #fffaf1;
  background-image: var(--sb-paper-grain), linear-gradient(120deg, #edeedb4d, transparent 55%);
  background-size: 192px 192px, auto;
}

.jill-section {
  background-color: #f2f1e4;
  background-image:
    var(--sb-paper-grain),
    radial-gradient(ellipse 65% 110% at 5% 90%, #e4cdb252, transparent 80%),
    linear-gradient(115deg, #f6edda80, #e6ebd66b);
  background-size: 192px 192px, auto, auto;
}

.needle-felting-feature {
  background-color: #f9f3e7;
  background-image: var(--sb-paper-grain), linear-gradient(105deg, #e4e8d55c, transparent 55%, #f0d9b04d);
  background-size: 192px 192px, auto;
}

.visit-section {
  background-color: #f4f3e6;
  background-image: var(--sb-paper-grain), linear-gradient(110deg, #e5e9d473, #fcf7ea80 68%);
  background-size: 192px 192px, auto;
}

#faq {
  background-image:
    var(--sb-paper-grain),
    radial-gradient(ellipse 55% 90% at 100% 50%, #e5e9d36b, transparent 78%);
  background-size: 192px 192px, auto;
}

.site-footer {
  background-color: #e9edde;
  background-image: var(--sb-paper-grain), linear-gradient(110deg, #f2e8d073, transparent 56%, #dce5cf85);
  background-size: 192px 192px, auto;
  border-top-color: #cbd3ba;
}

@media (max-width: 599.98px) {
  body {
    background-image:
      var(--sb-paper-grain),
      radial-gradient(ellipse 110% 630px at 100% 110px, #e0e5c770, transparent 77%),
      radial-gradient(ellipse 110% 720px at 0% 780px, #efd5b95c, transparent 79%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 192px 192px, auto, auto;
  }
  .hero:not(.container) {
    background-image:
      var(--sb-paper-grain),
      radial-gradient(ellipse 100% 48% at 100% 0%, #e0e7cc8c, transparent 79%),
      radial-gradient(ellipse 105% 60% at 0% 100%, #ebc9ad63, transparent 77%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 192px 192px, auto, auto;
  }
}

/* Avoid decorative texture in high-contrast views and on the printed page. */
@media (prefers-contrast: more), (forced-colors: active) {
  body, .site-header, .hero:not(.container), .season-notice,
  .season-notice .overview-band, .intro-band, .approach-section,
  #program, .jill-section, .needle-felting-feature,
  .visit-section, #faq, .inquiry-section, .site-footer {
    background-image: none;
  }
}

@media print {
  body, .site-header, .hero:not(.container), .season-notice,
  .season-notice .overview-band, .intro-band, .approach-section,
  #program, .jill-section, .needle-felting-feature,
  .visit-section, #faq, .inquiry-section, .site-footer {
    background: white;
  }
}