:root {
  --pearl: #fffdf9;
  --champagne: #eadbc6;
  --warm-glow: rgb(183 137 77 / 14%);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgb(255 255 255 / 92%), transparent 34%),
    radial-gradient(circle at 88% 24%, var(--warm-glow), transparent 30%),
    linear-gradient(135deg, #fbf9f6 0%, #eee6dc 52%, #fbf8f3 100%);
  background-attachment: fixed;
}

.header {
  background: linear-gradient(105deg, rgb(255 253 249 / 96%), rgb(240 231 219 / 94%), rgb(255 252 247 / 96%));
  border-bottom-color: rgb(167 123 67 / 28%);
}

.hero-copy,
.about,
.practice,
.full-bio {
  background:
    radial-gradient(circle at 8% 15%, rgb(255 255 255 / 86%), transparent 30%),
    linear-gradient(125deg, rgb(255 253 249 / 82%), rgb(236 225 211 / 72%) 55%, rgb(255 251 245 / 84%));
}

.about,
.practice,
.full-bio {
  position: relative;
}

.about::before,
.practice::before,
.full-bio::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / 38%) 42%, transparent 58%);
}

.sample-collection {
  background:
    radial-gradient(circle at 82% 8%, rgb(255 255 255 / 72%), transparent 28%),
    linear-gradient(140deg, #eee4d7, #fbf8f2 48%, #e7d8c4);
}

.commission {
  background:
    radial-gradient(circle at 78% 20%, rgb(255 255 255 / 55%), transparent 28%),
    linear-gradient(135deg, #e6dacb, #f6f0e8 50%, #dfcdb6);
}

.contact {
  background: linear-gradient(135deg, #f7f2eb, #e8dac8 52%, #fffaf3);
}

.sample-card figure {
  box-shadow: 0 24px 55px rgb(64 45 25 / 13%), 0 1px 0 rgb(255 255 255 / 70%) inset;
}

@media (max-width: 900px) {
  body { background-attachment: scroll; }
}