/* Page-scale rules: aligned gutters and full-width lines between sections. */
.page-background-rules {
  --background-grain: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMjQwIDE2MCI+CiAgPGZpbHRlciBpZD0id2VhciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjU0IiBudW1PY3RhdmVzPSIzIiBzZWVkPSIxOSIvPgogICAgPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDMuMiAwIDAgMCAtMC43NSIvPgogICAgPGZlQ29tcG9uZW50VHJhbnNmZXI+CiAgICAgIDxmZUZ1bmNBIHR5cGU9ImxpbmVhciIgc2xvcGU9IjAuNCIgaW50ZXJjZXB0PSIwLjYiLz4KICAgIDwvZmVDb21wb25lbnRUcmFuc2Zlcj4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE2MCIgZmlsbD0id2hpdGUiIGZpbHRlcj0idXJsKCN3ZWFyKSIvPgo8L3N2Zz4K');
  --background-rule: rgba(16, 21, 42, 0.07);
  --background-rail: max(16px, calc((100% - 1152px) / 2 + 16px));
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.page-background-rules::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--background-rule), var(--background-rule)) left var(--background-rail) top
      0 / 1px 100% no-repeat,
    linear-gradient(var(--background-rule), var(--background-rule)) right var(--background-rail) top
      0 / 1px 100% no-repeat,
    linear-gradient(var(--background-rule), var(--background-rule)) center top / 1px 100% no-repeat;
}
.page-background-rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--background-rule);
}
.page-background-rules::before,
.page-background-rule {
  -webkit-mask-image: var(--background-grain);
  mask-image: var(--background-grain);
  -webkit-mask-size: 240px 160px;
  mask-size: 240px 160px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: var(--rule-wear-x, 0) var(--rule-wear-y, 0);
  mask-position: var(--rule-wear-x, 0) var(--rule-wear-y, 0);
}
.page-background-rule:nth-child(2n) {
  --rule-wear-x: -52px;
  --rule-wear-y: -24px;
}
.page-background-rule:nth-child(3n) {
  --rule-wear-x: -124px;
  --rule-wear-y: -68px;
}
@media (max-width: 700px) {
  .page-background-rules {
    --background-rail: 8px;
    --background-rule: rgba(16, 21, 42, 0.05);
  }
}
@media print {
  .page-background-rules {
    display: none;
  }
}