:root {
  --monogram-pattern: url("assets/images/patterns/gao-nau-monogram-pattern.jpg");
  --monogram-size: clamp(260px, 30vw, 480px);
  --monogram-light-wash:
    linear-gradient(90deg, rgba(249, 247, 241, 0.86) 0%, rgba(249, 247, 241, 0.84) 54%, rgba(242, 237, 229, 0.82) 76%, rgba(217, 207, 194, 0.84) 100%);
  --monogram-muted-wash:
    linear-gradient(90deg, rgba(235, 226, 199, 0.86) 0%, rgba(249, 247, 241, 0.84) 54%, rgba(240, 234, 224, 0.82) 76%, rgba(214, 203, 190, 0.84) 100%);
}

body.monogram-bg {
  background:
    radial-gradient(circle at 8% 0%, rgba(201, 162, 75, 0.16), transparent 24rem),
    linear-gradient(180deg, #120d09 0, #20140e 36rem, #efe6d6 36.1rem, #f6f1e7 68%, #f9f7f1 100%);
}

.monogram-bg .gallery-intro,
.monogram-bg .culture,
.monogram-bg .pricing,
.monogram-bg .policies,
.monogram-bg .painting-library,
.monogram-bg .process,
.monogram-bg .trust,
.monogram-bg .lacquer-section,
.monogram-bg .real-gallery,
.monogram-bg .stories {
  isolation: isolate;
}

.monogram-bg .gallery-intro,
.monogram-bg .culture,
.monogram-bg .pricing,
.monogram-bg .policies {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(142, 97, 38, 0.18);
  background:
    radial-gradient(circle at 18% 8%, rgba(201, 162, 75, 0.12), transparent 22rem),
    var(--monogram-light-wash),
    var(--monogram-pattern);
  background-attachment: scroll, scroll, scroll;
  background-blend-mode: normal, normal, multiply;
  background-position: left top, left top, left top;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, var(--monogram-size) auto;
}

.monogram-bg .painting-library,
.monogram-bg .process,
.monogram-bg .trust {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(142, 97, 38, 0.16);
  background:
    radial-gradient(circle at 14% 6%, rgba(201, 162, 75, 0.12), transparent 20rem),
    var(--monogram-muted-wash),
    var(--monogram-pattern),
    var(--paper);
  background-attachment: scroll, scroll, scroll, scroll;
  background-blend-mode: normal, normal, multiply, normal;
  background-position: left top, left top, left top, left top;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: auto, auto, var(--monogram-size) auto, auto;
}

.monogram-bg .gallery-intro::after,
.monogram-bg .culture::after,
.monogram-bg .pricing::after,
.monogram-bg .policies::after,
.monogram-bg .painting-library::after,
.monogram-bg .process::after,
.monogram-bg .trust::after {
  content: "";
  position: absolute;
  inset: 0 0 0 58%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image: var(--monogram-pattern);
  background-repeat: repeat;
  background-position: left top;
  background-size: var(--monogram-size) auto;
  filter: invert(1) brightness(1.85) contrast(1.18);
}

.monogram-bg .lacquer-section,
.monogram-bg .real-gallery,
.monogram-bg .stories {
  position: relative;
  overflow: hidden;
}

.monogram-bg .lacquer-section::after,
.monogram-bg .real-gallery::after,
.monogram-bg .stories::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: screen;
  background-image: var(--monogram-pattern);
  background-repeat: repeat;
  background-position: left top;
  background-size: clamp(240px, 28vw, 430px) auto;
  filter: invert(1) brightness(2) contrast(1.12);
}

.monogram-bg .gallery-intro > *,
.monogram-bg .culture > *,
.monogram-bg .pricing > *,
.monogram-bg .policies > *,
.monogram-bg .painting-library > *,
.monogram-bg .process > *,
.monogram-bg .trust > *,
.monogram-bg .lacquer-section > *,
.monogram-bg .real-gallery > *,
.monogram-bg .stories > * {
  position: relative;
  z-index: 1;
}

.monogram-bg .collection-card:not(.masters):not(.famous),
.monogram-bg .reference-card:not(.open-slot),
.monogram-bg .gallery-piece,
.monogram-bg .price-card:not(.featured),
.monogram-bg .policy-legal {
  background: rgba(249, 247, 241, 0.94);
}

.monogram-bg .collection-card.masters {
  background: #211812;
  color: var(--cream);
}

.monogram-bg .collection-card.famous {
  background:
    radial-gradient(circle at 0% 0%, rgba(201, 162, 75, 0.18), transparent 18rem),
    var(--lacquer-soft);
  color: var(--cream);
}

.monogram-bg .collection-card.masters h3,
.monogram-bg .collection-card.famous h3 {
  color: var(--cream);
}

.monogram-bg .collection-card.masters p,
.monogram-bg .collection-card.famous p {
  color: rgba(249, 247, 241, 0.74);
}

.monogram-bg .price-card:not(.featured),
.monogram-bg .collection-card:not(.masters):not(.famous),
.monogram-bg .reference-card:not(.open-slot),
.monogram-bg .gallery-piece {
  backdrop-filter: blur(2px);
}

@media (max-width: 680px) {
  :root {
    --monogram-size: 245px;
    --monogram-light-wash:
      linear-gradient(180deg, rgba(249, 247, 241, 0.86) 0%, rgba(249, 247, 241, 0.84) 68%, rgba(220, 211, 199, 0.84) 100%);
    --monogram-muted-wash:
      linear-gradient(180deg, rgba(235, 226, 199, 0.86) 0%, rgba(249, 247, 241, 0.84) 68%, rgba(217, 207, 193, 0.84) 100%);
  }

  .monogram-bg .hero-media {
    opacity: 0.12 !important;
    filter: saturate(0.76) contrast(1.02) brightness(0.62) !important;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.08) !important;
  }

  .monogram-bg .hero-shade {
    background:
      linear-gradient(90deg, rgba(21, 17, 13, 0.92), rgba(21, 17, 13, 0.68) 58%, rgba(21, 17, 13, 0.24)),
      linear-gradient(0deg, rgba(21, 17, 13, 0.94), rgba(21, 17, 13, 0.24) 62%);
  }

  body.monogram-bg,
  .monogram-bg .gallery-intro,
  .monogram-bg .culture,
  .monogram-bg .pricing,
  .monogram-bg .policies,
  .monogram-bg .painting-library,
  .monogram-bg .process,
  .monogram-bg .trust {
    background-attachment: scroll;
  }

  .monogram-bg .gallery-intro::after,
  .monogram-bg .culture::after,
  .monogram-bg .pricing::after,
  .monogram-bg .policies::after,
  .monogram-bg .painting-library::after,
  .monogram-bg .process::after,
  .monogram-bg .trust::after {
    inset: 70% 0 0;
    opacity: 0.025;
  }
}