:is(.work-band, .contact-band) {
  --light-paper: var(--paper);
  color: var(--ink);
}

.work-band {
  --work-surface: color-mix(in srgb, var(--paper) 84%, var(--stone));
  background: var(--work-surface);
}

.contact-band { background: var(--light-paper); }

/* Map the existing foreground tokens onto a light surface within this band. */
:is(.work-band, .contact-band) > section {
  --paper: var(--ink);
  --stone: color-mix(in srgb, var(--ink) 63%, var(--light-paper));
  --bronze: color-mix(in srgb, #8B6F47 80%, var(--ink));
  --line: color-mix(in srgb, var(--ink) 20%, transparent);
}

.work-band .service-detail,
.work-band .project-card {
  background: var(--light-paper);
}

.work-band .service-photo,
.work-band .project-cover {
  background: var(--work-surface);
}

.work-band .services {
  border-top: 0;
}

:is(.work-band, .contact-band) .divider-ray::after {
  background: linear-gradient(90deg, transparent, var(--bronze) 9%, var(--light-paper) 13%, var(--bronze) 17%, transparent 27%);
}