/* Original, non-semantic marginalia. All motifs stay out of the content flow. */
:root {
  --ornament-scene: none;
  --ornament-detail: none;
  --ornament-edge: none;
}
.hero, .section, .site-footer { position: relative; }
.portrait-frame::after,
.hero::after,
.section::before,
.service-card:nth-child(3n + 1)::after,
.project-card:nth-child(2n)::after,
.contact-panel::before,
.contact-panel::after,
.site-footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.portrait-frame::after {
  background-image: var(--ornament-scene);
  width: 112px;
  height: 112px;
  right: -14px;
  top: -34px;
  z-index: 2;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--bg), transparent 20%));
}
.hero::after {
  background-image: var(--ornament-edge);
  width: 190px;
  height: 45px;
  left: 0;
  bottom: 8px;
  opacity: .28;
}
.section::before {
  background-image: var(--ornament-edge);
  width: 150px;
  height: 36px;
  right: 8px;
  top: 4px;
  opacity: .32;
}
.section:nth-of-type(2n)::before { right: auto; left: 8px; }
.service-card:nth-child(3n + 1)::after,
.project-card:nth-child(2n)::after {
  background-image: var(--ornament-detail);
  width: 34px;
  height: 34px;
  right: 18px;
  top: -16px;
  opacity: .85;
}
.contact-panel::before {
  background-image: var(--ornament-edge);
  width: 168px;
  height: 40px;
  right: 20px;
  top: 2px;
  opacity: .35;
}
.contact-panel::after {
  background-image: var(--ornament-detail);
  width: 42px;
  height: 42px;
  right: 18px;
  bottom: 5px;
  opacity: .65;
}
.site-footer::after {
  background-image: var(--ornament-detail);
  width: 30px;
  height: 30px;
  bottom: 12px;
  right: 0;
  opacity: .55;
}
@media (max-width: 700px) {
  .portrait-frame::after { width: 84px; height: 84px; top: -26px; right: -4px; }
  .hero::after { width: 134px; height: 30px; bottom: 3px; }
  .section::before { width: 114px; height: 27px; }
  .contact-panel::before { width: 122px; height: 29px; right: 14px; }
  .contact-panel::after { width: 28px; height: 28px; bottom: 2px; }
  .service-card:nth-child(3n + 1)::after, .project-card:nth-child(2n)::after {
    width: 28px; height: 28px; top: -14px; right: 12px;
  }
}
@media (forced-colors: active), print {
  .portrait-frame::after, .hero::after, .section::before,
  .service-card:nth-child(3n + 1)::after, .project-card:nth-child(2n)::after,
  .contact-panel::before, .contact-panel::after, .site-footer::after { display: none; }
}