/* Full-width color fields; inherit the white study's unchanged layout and motion. */
.selected-work {
  background: var(--blue);
  color: var(--paper);
  --rule: color-mix(in srgb, var(--paper) 32%, var(--blue));
}
.contact { background: var(--mustard); color: var(--ink); }
.contact-links a { color: var(--ink); }
/* The existing clipped SVG instances repaint the exact same paths at each section edge. */
.ribbon { stroke: var(--strand-edge, var(--paper)); }
.ribbon-one, .ribbon-four, .ribbon-six, .ribbon-seven { fill: var(--strand-blue, var(--blue)); }
.ribbon-two, .ribbon-five { fill: var(--strand-mustard, var(--mustard)); }
.ribbon-three { fill: var(--strand-red, var(--red)); }
.work-ribbons {
  --strand-blue: var(--paper);
  --strand-mustard: color-mix(in srgb, var(--mustard) 38%, var(--paper));
  --strand-red: color-mix(in srgb, var(--red) 30%, var(--paper));
  --strand-edge: var(--blue);
}
.contact-ribbons {
  --strand-mustard: var(--paper);
  --strand-edge: var(--mustard);
}
@media (forced-colors: active) {
  .selected-work, .contact { background: Canvas; color: CanvasText; }
  .selected-work .project { border-top-color: CanvasText; }
  .contact-links a { color: LinkText; }
}
@media print {
  .selected-work, .contact { background: white; color: var(--ink); }
  .selected-work .project { border-top-color: var(--ink); }
}