/* manuscript.css — the same marks the React homepage carries, applied to the
   static pages with zero per-page markup. Everything here is decorative and
   drawn with pseudo-elements, so nothing new lands in the accessibility tree.

   Marks:
     knot rule  — two strands cross, then resolve into a hairline (above <h1>)
     horizon    — one rust rule under the title block, same place every page
     versal     — illuminated initial on the opening paragraph (.versal)
     tessera    — mosaic joint between major sections (h2::before)
*/

:root {
  --ms-rust: #b8410f;
  --ms-blue: #1d3a63;
  --ms-stone: #cfc7ba;
}

/* Knot rule: SVG data URI so it costs no request and scales with the page. */
main h1::before {
  content: "";
  display: block;
  width: min(360px, 100%);
  height: 18px;
  margin-bottom: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='18' viewBox='0 0 360 18' fill='none'%3E%3Cpath d='M2 9c10-9 22-9 32 0s22 9 32 0 22-9 32 0' stroke='%23b8410f' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M2 9c10 9 22 9 32 0s22-9 32 0 22 9 32 0' stroke='%231d3a63' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M98 9h262' stroke='%23cfc7ba' stroke-width='1.7'/%3E%3C/svg%3E")
    left center / contain no-repeat;
}

/* Horizon: the seated eye line, at the same rhythm on every surface. */
main h1::after {
  content: "";
  display: block;
  height: 1.5px;
  width: 100%;
  margin: 1.25rem 0 0;
  background: var(--ms-rust);
}

/* Versal: an initial, not a graphic — the letter stays real text. */
.versal::first-letter {
  float: left;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
  color: var(--ms-rust);
}

/* Tessera: mosaic joint, rust into blue into stone. Capped at 7 squares
   (63px at a 9px pitch) — a long high-contrast repeat is a migraine and
   visual-stress trigger, so the run stays well under the pattern threshold
   while still reading as mosaic. */
main h2::before {
  content: "";
  display: block;
  height: 7px;
  width: 100%;
  max-width: 63px;
  margin-bottom: 1rem;
  background:
    repeating-linear-gradient(90deg, var(--ms-rust) 0 7px, transparent 7px 9px) left / 18px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--ms-blue) 0 7px, transparent 7px 9px) 18px 0 / 18px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--ms-stone) 0 7px, transparent 7px 9px) 36px 0 / 27px 100% no-repeat;
}

@media (max-width: 480px) {
  .versal::first-letter { font-size: 2.7em; }
  main h1::before { width: 240px; }
}

@media print {
  main h1::before, main h2::before { display: none; }
  main h1::after { background: #000; }
  .versal::first-letter { color: #000; }
}