/* ==========================================================================
   Page motif — the engineering-drawing sheet.

   Two vertical rails at the content gutters, two horizontal rules, and the
   crosshairs where they meet, sitting over the page at 4-6% so they register
   as precision rather than decoration. The same language as the hero's marks
   and the section coordinates, extended to every page.

   It is an overlay rather than a background because almost every section here
   paints an opaque ground — a layer behind them would never be seen. Sitting
   in front, with `mix-blend-mode: darken`, the lines show on white and light
   grey and vanish on the dark sections, which carry their own grid already.

   Fixed, so the sheet stays put while the page scrolls: the content travels
   across the drawing rather than the drawing scrolling with it.
   ========================================================================== */

.page-motif {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: darken;

  /* Where the rails sit, measured out from the centre.
     Not at the content column's edge — the column is 1400px and a 1440px
     screen has no gutter, so rails "outside the content" landed 20px from the
     viewport edge and read as nothing. These sit at the same inset the hero's
     construction marks use, crossing the content the way a drawing sheet's
     rules do. At 6% that is a guide, not an obstruction. */
  --rail: min(564px, calc(50vw - 40px));
}

/* The two vertical rails. */
.page-motif::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      transparent calc(50% - var(--rail)),
      rgba(16, 24, 40, 0.06) calc(50% - var(--rail)),
      rgba(16, 24, 40, 0.06) calc(50% - var(--rail) + 1px),
      transparent calc(50% - var(--rail) + 1px)),
    linear-gradient(to right,
      transparent calc(50% + var(--rail) - 1px),
      rgba(16, 24, 40, 0.06) calc(50% + var(--rail) - 1px),
      rgba(16, 24, 40, 0.06) calc(50% + var(--rail)),
      transparent calc(50% + var(--rail)));
  /* Fading the ends stops the rails reading as a page border. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Two horizontal rules, each running inward from a rail, and stopping —
   the way a construction line stops once it has served its purpose. */
.page-motif::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      transparent 104px, rgba(16,24,40,0.05) 104px,
      rgba(16,24,40,0.05) 105px, transparent 105px),
    linear-gradient(to bottom,
      transparent 61%, rgba(16,24,40,0.04) 61%,
      rgba(16,24,40,0.04) calc(61% + 1px), transparent calc(61% + 1px));
  background-repeat: no-repeat, no-repeat;
  background-size: 190px 100%, 250px 100%;
  background-position:
    calc(50% - var(--rail)) 0,
    calc(50% + var(--rail) - 250px) 0;
}

/* Below tablet there is no gutter to draw in, and the rails would cross the
   content. The sheet is a desktop and large-tablet idea. */
@media (max-width: 900px) {
  .page-motif { display: none; }
}

@media print {
  .page-motif { display: none; }
}

/* The motif is decoration; it should never be the reason a page repaints. */
@media (prefers-reduced-motion: reduce) {
  .page-motif { position: absolute; }
}