/* Approved typography B trial: Source Serif 4 + Source Sans 3.
 * Existing utility classes remain intact so rollback requires only removing this file.
 * Font sources: https://fonts.adobe.com/fonts/source-serif-4
 *               https://fonts.adobe.com/fonts/source-sans-3
 * Open Font License text is included in fonts/.
 */

body {
  font-family: "Source Sans 3", "Noto Sans SC", sans-serif;
}

[class*="font-['Cormorant_Garamond']"],
[class*="font-['Crimson_Pro']"] {
  font-family: "Source Serif 4", "Noto Serif SC", serif !important;
  font-optical-sizing: auto;
}

[class*="font-['Archivo']"],
[class*="font-['Akatab']"] {
  font-family: "Source Sans 3", "Noto Sans SC", sans-serif !important;
}

#choral-mixed > div:first-child,
#choral-treble > div:first-child,
#instrumental > div:first-child {
  font-family: "Source Serif 4", "Noto Serif SC", serif !important;
  font-optical-sizing: auto;
}

/* Chinese font-specific spans and the original Chinese name SVG are unchanged. */

/* User-approved Bio-only rollback; all other pages retain typography B. */
#page-bio [class*="font-['Akatab']"] {
  font-family: "Akatab", sans-serif !important;
}

#page-bio [class*="font-['Cormorant_Garamond']"] {
  font-family: "Cormorant Garamond", serif !important;
}

/* Compositions-only editorial typography. No shared header or detail-page changes. */
#page-comp #choral-mixed > div:first-child,
#page-comp #choral-treble > div:first-child,
#page-comp #choral-tenor-bass > div:first-child,
#page-comp #instrumental > div:first-child {
  font-family: "EB Garamond", "Noto Serif SC", serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

#page-comp #choral-mixed h3,
#page-comp #choral-tenor-bass h3,
#page-comp #choral-treble h3,
#page-comp #instrumental h3 {
  font-family: "Source Sans 3", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

#page-comp [class*="font-['Crimson_Pro']"] {
  font-family: "EB Garamond", "Noto Serif SC", serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

#page-comp #comp-nav a {
  font-family: "EB Garamond", "Noto Serif SC", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em;
}

@media (max-width: 767px) {
  #page-comp #choral-mixed > div:first-child,
  #page-comp #choral-treble > div:first-child,
  #page-comp #choral-tenor-bass > div:first-child,
  #page-comp #instrumental > div:first-child {
    font-size: 20px !important;
  }

  #page-comp #choral-mixed h3,
  #page-comp #choral-tenor-bass h3,
  #page-comp #choral-treble h3,
  #page-comp #instrumental h3 {
    font-size: 16px !important;
  }

  #page-comp [class*="font-['Crimson_Pro']"] {
    font-size: 20px !important;
  }
}

/* Indent work rows, including wrapped lines, without moving category headings. */
#page-comp #choral-mixed section > div,
#page-comp #choral-treble section > div,
#page-comp #choral-tenor-bass section > div,
#page-comp #instrumental .instrumental-work {
  padding-inline-start: 1rem;
  /* Compact internal wraps; the paired padding preserves spacing between works. */
  line-height: 28px;
  padding-block: 6px;
}

/* Catalogue interaction only; existing page typography and colours are retained. */
#page-comp #comp-nav button {
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#page-comp #comp-nav .composition-category-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  font-family: "EB Garamond", "Noto Serif SC", serif !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.025em;
}

#page-comp #comp-nav .composition-all-button,
#page-comp #comp-nav .composition-subcategory-button {
  font-family: "Source Sans 3", "Noto Sans SC", sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

#page-comp #comp-nav .composition-all-button {
  margin-bottom: 0.65rem;
}

#page-comp #comp-nav .composition-subcategories {
  list-style: none;
  margin: 0.15rem 0 0.65rem 0.75rem;
  padding-left: 0.65rem;
  border-left: 1px solid currentColor;
}

#page-comp #comp-nav .composition-subcategory-button {
  display: block;
  width: 100%;
  padding: 0.25rem 0;
}

#page-comp #comp-nav [aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

#page-comp #comp-nav button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

#page-comp .composition-nav-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 120ms ease;
}

#page-comp .composition-nav-chevron.is-open {
  transform: rotate(90deg);
}