/* Shared styles for rendered markdown content containers */

.markdown-content {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  color: black;
  line-height: 1.5;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.markdown-content .markdown-header-title,
.markdown-content .markdown-header-medium {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.markdown-content p {
  margin-bottom: 1rem;
}

.markdown-content ul,
.markdown-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.markdown-content li {
  margin-bottom: 0.5rem;
}

.markdown-content strong {
  font-weight: 700;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content a {
  color: var(--color-link);
  font-weight: 400;
}

.markdown-content a:visited {
  color: var(--color-link);
  font-weight: 400;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0 0 0;
}

.markdown-content .markdown-caption {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
}

.markdown-content img + .markdown-caption {
  margin-top: -0.75rem;
}

/* Inline seal-script glyph emitted by [seal:X] — overrides the
   default `display: block` and full-width sizing applied to images
   inside .markdown-content above. */
.markdown-content img.seal-glyph,
img.seal-glyph,
.markdown-content img.symbol-glyph,
img.symbol-glyph,
.markdown-content img.calligraphy-glyph,
img.calligraphy-glyph {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0 0.1em;
  vertical-align: -0.35em;
}
/* Calligraphy brush glyphs ([cgy:X]) are full characters like the seal
   glyphs, so they share the 1.5em inline height. */
.markdown-content img.seal-glyph,
img.seal-glyph,
.markdown-content img.calligraphy-glyph,
img.calligraphy-glyph {
  height: 1.5em;
}
/* Symbol (non-script) glyphs read a little better slightly smaller than the
   seal/Hanzi glyphs — render them a touch under the 1.5em inline default. */
.markdown-content img.symbol-glyph,
img.symbol-glyph {
  height: 1.25em;
}

/* Manchu chopmark glyphs ([manchu:X]). Manchu is the only chopmark script
   written VERTICALLY (top-to-bottom); the shipped Noto Sans Mongolian webfont
   is turned upright via writing-mode (bare vertical-lr — Mongolian un-rotates
   its sideways glyphs by default, so no text-orientation). Unlike the seal /
   calligraphy glyphs these are inline TEXT spans, not <img>, so they are styled
   here directly (processHtmlImages never touches them). */
@font-face {
  font-family: "Noto Sans Mongolian";
  src: url("/fonts/noto-sans-mongolian.woff2") format("woff2");
  font-display: swap;
}
.markdown-content .manchu-glyph,
.manchu-glyph {
  font-family: "Noto Sans Mongolian", sans-serif;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 1.2em;
}
/* Summary block printed underneath a [symbol:X] glyph in coin prose — the
   symbol's name, visual description, and suspected meaning (mirrors the
   Insights symbol-table expansion). Each field is its own block line; the
   container drops below the inline glyph. */
.markdown-content .symbol-chop-summary,
.symbol-chop-summary {
  display: block;
  margin: 0.25rem 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.markdown-content .symbol-chop-name,
.symbol-chop-name {
  display: block;
  font-weight: 600;
}
.markdown-content .symbol-chop-desc,
.symbol-chop-desc {
  display: block;
}
.markdown-content .symbol-chop-meaning,
.symbol-chop-meaning {
  display: block;
  color: var(--color-text-muted);
}
/* Mirror-reversed ("backwards") Latin chopmark from [latin:R@m]: flip the
   letter(s) horizontally so prose shows the mark as it was struck. inline-block
   is required for the transform to apply to an inline <span>. */
.markdown-content .latin-mirror,
.latin-mirror {
  display: inline-block;
  transform: scaleX(-1);
}