/* L03 — Ornament: Thracian gold-work + Byzantine illumination.
   Additive, SVGs inline via data URI, currentColor stroke. */

:root {
  --orn-gold: var(--accent, #B8894A);
  --orn-deep: var(--accent-deep, #8f6a36);
}

/* ──────────────────────────────────────────────────────────────
   1. Horizontal rule — Thracian rosette flanked by hairlines.
   ────────────────────────────────────────────────────────────── */
hr.rule {
  border: 0;
  height: 24px;
  background:
    linear-gradient(currentColor, currentColor) left center / calc(50% - 22px) 1px no-repeat,
    linear-gradient(currentColor, currentColor) right center / calc(50% - 22px) 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8894A' stroke-width='1' stroke-linecap='round'><circle cx='12' cy='12' r='3.2'/><circle cx='12' cy='12' r='7.4' stroke-dasharray='1 2.6'/><path d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.2 5.2l2.1 2.1M16.7 16.7l2.1 2.1M18.8 5.2l-2.1 2.1M7.3 16.7l-2.1 2.1'/></svg>") center / 24px 24px no-repeat;
  color: var(--orn-gold);
  opacity: .72;
  margin: 2.25rem 0;
}

/* ──────────────────────────────────────────────────────────────
   2. Corner mordants — gold angle marks on .bio, .work headers.
   ────────────────────────────────────────────────────────────── */
.bio > :first-child,
.work > :first-child {
  position: relative;
}
.bio > :first-child::before,
.bio > :first-child::after,
.work > :first-child::before,
.work > :first-child::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--orn-gold);
  opacity: .85;
  pointer-events: none;
}
.bio > :first-child::before,
.work > :first-child::before {
  top: -.35em; left: -.65em;
  border-right: 0; border-bottom: 0;
}
.bio > :first-child::after,
.work > :first-child::after {
  top: -.35em; right: -.65em;
  border-left: 0; border-bottom: 0;
}

/* ──────────────────────────────────────────────────────────────
   3. Timeline rail — vertical Thracian 3-dot pattern.
   ────────────────────────────────────────────────────────────── */
.timeline,
[data-rail="timeline"] {
  position: relative;
}
.timeline::before,
[data-rail="timeline"]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 38' fill='%23B8894A'><circle cx='2' cy='4' r='1.4'/><circle cx='2' cy='19' r='1.6'/><circle cx='2' cy='34' r='1.4'/></svg>");
  background-repeat: no-repeat;
  opacity: .78;
}

/* ──────────────────────────────────────────────────────────────
   4. Fibula — ornamental mark left of .portrait--hero (≥ 1024px).
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .portrait--hero {
    position: relative;
  }
  .portrait--hero::before {
    content: "";
    position: absolute;
    left: -68px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 72px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 72' fill='none' stroke='%23B8894A' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M24 6c-8 0-14 6-14 14 0 10 7 16 14 22 7-6 14-12 14-22 0-8-6-14-14-14z'/><circle cx='24' cy='20' r='4.5'/><circle cx='24' cy='20' r='1.6' fill='%23B8894A'/><path d='M24 42v22M18 48l6 4 6-4M19 58l5 3 5-3'/><path d='M14 20c-3 2-5 5-5 9M34 20c3 2 5 5 5 9'/></svg>") center / contain no-repeat;
    opacity: .82;
    pointer-events: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   5. § rubric — drop shadow + small ornament to the right.
   ────────────────────────────────────────────────────────────── */
.rubric,
[data-rubric],
.section-mark {
  position: relative;
  color: var(--red, #B0302A);
  text-shadow: 0 1px 0 rgba(14, 21, 36, .08), 0 2px 3px rgba(14, 21, 36, .12);
  padding-right: 1.35em;
}
.rubric::after,
[data-rubric]::after,
.section-mark::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B8894A' stroke-width='.9' stroke-linecap='round'><path d='M7 1.5v11M1.5 7h11'/><path d='M3 3l8 8M11 3l-8 8' stroke-dasharray='1 1.5'/><circle cx='7' cy='7' r='2.2'/></svg>") center / contain no-repeat;
  opacity: .75;
}

/* ──────────────────────────────────────────────────────────────
   6. Page corner whispers — dogwhistle Thracian outlines.
   ────────────────────────────────────────────────────────────── */
body {
  position: relative;
}
body::before,
body::after {
  content: "";
  position: fixed;
  width: 56px;
  height: 56px;
  pointer-events: none;
  opacity: .28;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
}
body::before {
  top: 14px; left: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='%23B8894A' stroke-width='.8' stroke-linecap='round'><path d='M2 22V2h20'/><path d='M2 32c6 0 10-4 10-10s4-10 10-10'/><circle cx='14' cy='14' r='2.2'/><path d='M6 6l4 4M18 6l-4 4M6 18l4-4'/></svg>");
}
body::after {
  bottom: 14px; right: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='%23B8894A' stroke-width='.8' stroke-linecap='round'><path d='M54 34v20H34'/><path d='M54 24c-6 0-10 4-10 10s-4 10-10 10'/><circle cx='42' cy='42' r='2.2'/><path d='M50 50l-4-4M38 50l4-4M50 38l-4 4'/></svg>");
}

@media print {
  body::before, body::after,
  .portrait--hero::before { display: none; }
}