/* ── DL v2 §6 ornament vocabulary (the only four allowed) ──────────────
   Reusable primitives. Each must encode data or frame the one hero surface.
   Applied to hero surfaces at designation (WS-10.3). */

/* 1. Corner marks — geometric double-line L + dot, one per hero corner.
   Add `.ornament-corners` to a positioned (.surface-hero) element. */
.ornament-corners::before,
.ornament-corners::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,212,112,0.5);
  pointer-events: none;
}
.ornament-corners::before {           /* top-inline-start corner */
  inset-block-start: 10px;
  inset-inline-start: 10px;
  border-inline-end: none;
  border-block-end: none;
}
.ornament-corners::after {            /* bottom-inline-end corner */
  inset-block-end: 10px;
  inset-inline-end: 10px;
  border-inline-start: none;
  border-block-start: none;
}

/* 3. Manuscript divider — hairline gold rule with a center lozenge (◆ drawn as
   a rotated square so it never depends on a font glyph). */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: var(--space-md) 0;
  color: rgba(255,212,112,0.6);
}
.ornament-divider::before,
.ornament-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 110px;
  background: linear-gradient(90deg, transparent, rgba(255,212,112,0.35), transparent);
}
.ornament-divider .lozenge {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255,212,112,0.7);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* 1b. Tick arc host — the JS builder (ornaments.js) injects an <svg> here. */
.ornament-tick-arc { display: block; line-height: 0; }
.ornament-tick-arc svg { width: 100%; height: auto; }