/* Style for notes.muzikisto.com (Obsidian Publish), matching muzikisto.com/pages/.
   Upload it from Obsidian's Publish dialog like a note. Drafted by Pollux, 2026-11-04. */

/* Adobe Caslon Pro from the Adobe Fonts web project "muzikisto" (kit tlq5duc).
   notes.muzikisto.com must be listed among the project's domains at fonts.adobe.com. */
@import url("https://use.typekit.net/tlq5duc.css");

/* Type */
body {
  --font-text-theme: "adobe-caslon-pro", Georgia, serif;
  --font-interface-theme: "adobe-caslon-pro", Georgia, serif;
  --site-name-font: "adobe-caslon-pro", Georgia, serif;
  --component-title-font: "adobe-caslon-pro", Georgia, serif;
  --font-text-size: 20px;
  --line-height-normal: 1.6;
  --file-line-width: 680px;

  --h1-size: 2.2em;  --h1-weight: 600;
  --h2-size: 1.5em;  --h2-weight: 600;
  --h3-size: 1.15em; --h3-weight: 400; --h3-style: italic; /* subheadings: regular italic, to set them apart from semibold section headings */
  --h4-weight: 600;  --h5-weight: 600; --h6-weight: 600;

  /* Links: no underline, as on the WordPress site */
  --link-decoration: none;
  --link-decoration-hover: none;
  --link-external-decoration: none;

  /* Epigraph-style quotations */
  --blockquote-border-thickness: 2px;
  --blockquote-font-style: italic;
}

/* Reading column: about 680px of text, as on /pages/ */
.published-container { --page-width: 776px; }

/* Colors, light */
body.theme-light {
  --text-normal: #1a1a1a;
  --text-muted: #5a5a5a;
  --background-primary: #ffffff;
  --link-color: #0070c3;
  --link-color-hover: #bb1122;
  --link-external-color: #0070c3;
  --link-external-color-hover: #bb1122;
  --link-visited: #884488;
  --blockquote-border-color: #1a1a1a;
}

/* Colors, dark */
body.theme-dark {
  --text-normal: #e8e6e1;
  --text-muted: #a8a5a0;
  --background-primary: #161616;
  --link-color: #6cb4ff;
  --link-color-hover: #ff7b88;
  --link-external-color: #6cb4ff;
  --link-external-color-hover: #ff7b88;
  --link-visited: #c9a0dc;
  --blockquote-border-color: #e8e6e1;
}

/* Visited links in the text turn purple, as on the WordPress site */
.markdown-rendered a.internal-link:visited,
.markdown-rendered a.external-link:visited { color: var(--link-visited); }
.markdown-rendered a:hover { color: var(--link-color-hover); }

/* Quotations in the text color, not Publish's muted gray */
.markdown-rendered blockquote { color: var(--text-normal); }

/* Spacing and details, matched to muzikisto.com/pages/ (2026-11-04) */
.markdown-rendered p { margin-block: 0 1em; }
/* Heading spacing (in each heading's own em): more room around every level,
   most of all around the centered subheadings */
.markdown-rendered h2 { margin-top: 2.2em; margin-bottom: .6em; }
.markdown-rendered h3 { margin-top: 2.2em; margin-bottom: 1.2em; font-style: italic; font-weight: 400; }
.markdown-rendered h4, .markdown-rendered h5, .markdown-rendered h6 { margin-top: 1.8em; margin-bottom: .5em; }

/* Lists: numbers in ink, a little air between items */
.markdown-rendered ol > li::marker,
.markdown-rendered ul > li::marker { color: var(--text-normal); }
.markdown-rendered li { padding-block: .3em; }

/* Epigraphs: quotation italic, attribution (the last line, "— …") roman, smaller and muted */
.markdown-rendered blockquote { margin: 0 0 2.2em; padding-left: 1em; }
.markdown-rendered blockquote p { margin-bottom: .3em; }
.markdown-rendered blockquote p:last-child:not(:first-child) {
  font-style: normal; font-size: .85em; color: var(--text-muted); margin-bottom: 0;
}
.markdown-rendered blockquote p:last-child:not(:first-child) em { font-style: italic; }

/* No rule under section headings */
.published-container .markdown-rendered h2.publish-article-heading { border-bottom: none; padding-bottom: 0; }

/* Reference lists: entries after a "References" or "Reference" heading,
   smaller, with a hanging indent, as in a printed bibliography */
.el-h2:has(> h2[data-heading="References"]) ~ .el-p > p,
.el-h2:has(> h2[data-heading="Reference"]) ~ .el-p > p {
  font-size: .9em; padding-left: 2em; text-indent: -2em; margin-bottom: .9em;
}

/* Images: centered, each on a white card with padding. Most examples are cropped
   tight to the notation on a white background; the card gives them a margin, and
   in dark mode it keeps black notation readable. */
.markdown-rendered .internal-embed.image-embed { display: block; text-align: center; }
.markdown-rendered .image-embed img {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.25em 1.5em;
  background: #ffffff;
  border-radius: 4px;
}

/* Captions: the line right after an image ("**Example 1.** …") shares its paragraph,
   so the paragraph is centered and the caption set a little smaller. */
.markdown-rendered p:has(> .image-embed) {
  text-align: center;
  font-size: .9em;
  line-height: 1.5;
  margin-bottom: 1.6em;
}

/* Audio players under examples: centered, and no wider than the column */
.markdown-rendered .internal-embed.media-embed { display: block; text-align: center; }
.markdown-rendered .media-embed audio { max-width: 100%; }

/* Heading alignment: section headings (h2) left-aligned, like the title;
   subheadings (h3) centered; h4 and h5 left-aligned. The collapse arrow would
   sit far from centered text, so it's hidden on h3. */
.markdown-rendered h3 { text-align: center; }
.markdown-rendered h3 .heading-collapse-indicator { display: none; }

/* Math (MathJax), set as in PDFs exported with XeLaTeX and unicode-math: math stays in
   the TeX math font, as Latin Modern Math does there, but \mathrm{...} (Roman numerals,
   chord symbols) takes the text face, as unicode-math's \mathrm does. */
mjx-container[jax="CHTML"] [data-latex^="\\mathrm"] mjx-c,
mjx-container[jax="CHTML"] [data-latex^="\\mathrm"] mjx-c::before {
  font-family: "adobe-caslon-pro", Georgia, serif !important;
}
/* MathJax clips each character to its own font's outline box; Caslon's serifs reach a
   little past it (the foot of I was cut off), so the clip is lifted for these. */
mjx-container[jax="CHTML"] [data-latex^="\\mathrm"] mjx-c { clip-path: none !important; }

/* External links: no box-and-arrow icon; they look like other links */
.markdown-rendered a.external-link { background-image: none; padding-right: 0; }