/* Editorial gesture and structural precision, composed from semantic roles. */
.composition-visual-document img { display: block; max-inline-size: 100%; block-size: auto; }
.composition-visual-document figure { margin: 0; }
.composition-visual-document p { margin-block: 0; }
.composition-visual-document a { overflow-wrap: anywhere; }
.composition-visual-document :is(.mp-link, .mp-button) { transition-property: box-shadow, transform; }
.composition-visual-opening { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); padding-block: var(--space-16); }
.composition-visual-title { font-family: var(--font-serif); font-size: clamp(var(--text-h1), 6.8vw, var(--space-24)); font-weight: var(--weight-bold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin: 0; }
.composition-visual-title em { color: var(--color-human-text); font-weight: inherit; }
.composition-visual-document .composition-visual-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--leading-small); margin-block-start: var(--space-4); }
.composition-visual-hero-art { min-inline-size: 0; }
.composition-visual-hero-art img { inline-size: 100%; }
.composition-visual-hero-art figcaption { padding-block-start: var(--space-4); border-block-start: var(--border-default); }
.composition-visual-principle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-10); border-block: var(--border-default); }
.composition-visual-pull { font-family: var(--font-serif); font-size: var(--text-h2); line-height: var(--leading-heading); text-wrap: balance; }
.composition-visual-section { padding-block: var(--space-16); }
.composition-visual-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-8); }
.composition-visual-section-heading h2 { margin: 0; }
.composition-visual-cover { padding: var(--space-10); border: var(--border-default); }
.composition-visual-cover-header, .composition-visual-cover-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-6); }
.composition-visual-cover-header { padding-block-end: var(--space-6); border-block-end: var(--border-default); }
.composition-visual-cover-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-block: var(--space-8); }
.composition-visual-cover-content h3 { font-family: var(--font-serif); font-size: clamp(var(--text-h2), 4.7vw, var(--space-16)); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); margin: 0; }
.composition-visual-cover-content em { font-weight: inherit; color: var(--color-human-text); }
.composition-visual-cover-footer { padding-block-start: var(--space-6); border-block-start: var(--border-default); }
.composition-visual-teaching-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-16); align-items: center; }
.composition-teaching-card { background: var(--color-bg-secondary); padding: var(--space-8); border: var(--border-default); border-radius: var(--radius-lg); }
.composition-visual-card-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block-end: var(--space-4); border-block-end: var(--border-default); }
.composition-teaching-card h3 { margin-block: 0 var(--space-4); }
.composition-visual-document .composition-visual-card-footer { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--border-default); color: var(--color-text-secondary); }
.composition-visual-notes { margin: 0; display: grid; gap: var(--space-5); }
.composition-visual-notes > div { border-inline-start: var(--border-accent); padding-inline-start: var(--space-4); }
.composition-visual-notes dt { font-weight: var(--weight-semibold); }
.composition-visual-notes dd { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-small); }
.composition-visual-arrangements { background: var(--color-bg-secondary); border-block: var(--border-default); }
.composition-visual-icon-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-block: var(--space-10) 0; }
.composition-visual-icon-row > div { padding-block: var(--space-6); border-block: var(--border-default); }
.composition-visual-icon-row dt { display: flex; gap: var(--space-3); align-items: center; font-weight: var(--weight-semibold); }
.composition-visual-icon-row dd { margin: var(--space-3) 0 0; color: var(--color-text-secondary); }
.composition-visual-diagram { padding-block: var(--space-16); }
.composition-visual-diagram h3 { margin-block: 0 var(--space-4); }
.composition-visual-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.composition-visual-route li { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6); border: var(--border-width-thin) solid var(--color-text-secondary); background: var(--color-bg-primary); }
.composition-visual-route li:first-child { border-radius: 42% 48% var(--radius-lg) var(--radius-lg); padding-block-start: var(--space-12); border-color: var(--color-human-text); }
.composition-visual-route li:nth-child(2) { border-style: dashed; border-color: var(--color-digital-text); }
.composition-visual-route strong { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: var(--weight-semibold); }
.composition-visual-field-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; border-block-start: var(--border-default); padding-block-start: var(--space-10); }
.composition-visual-field-example picture { overflow: hidden; }
.composition-visual-field-example img { inline-size: 100%; }
.composition-visual-field-example h3 { margin: 0; }
.composition-visual-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); margin-block-start: var(--space-10); }
.composition-visual-asset { min-inline-size: 0; }
.composition-visual-asset picture { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--color-bg-secondary); border: var(--border-default); margin-block-end: var(--space-5); }
.composition-visual-asset img { inline-size: 100%; max-block-size: 100%; }
.composition-visual-asset h3 { margin: 0; }
.composition-visual-asset .type-small { color: var(--color-text-secondary); }
.composition-visual-asset .mp-cluster { align-items: start; gap: var(--space-3) var(--space-4); font-size: var(--text-small); }
.composition-visual-library-footer { margin-block-start: var(--space-10); padding-block-start: var(--space-6); border-block-start: var(--border-default); }
@media (width < 64rem) {
  .composition-visual-opening, .composition-visual-principle, .composition-visual-teaching-layout, .composition-visual-field-example { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .composition-visual-opening, .composition-visual-section { padding-block: var(--space-10); }
  .composition-visual-title { font-size: clamp(var(--text-h1), 10vw, var(--space-20)); }
  .composition-visual-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 40rem) {
  .composition-visual-cover-content, .composition-visual-icon-row, .composition-visual-route, .composition-visual-library { grid-template-columns: minmax(0, 1fr); }
  .composition-visual-cover, .composition-teaching-card { padding: var(--space-5); }
  .composition-visual-cover-content h3 { font-size: var(--text-h1); }
  .composition-visual-route li:first-child { border-radius: var(--radius-lg); padding-block-start: var(--space-6); }
}
@media print {
  .composition-visual-document { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* This fixed dark specimen keeps its matching artwork on paper. */
  .composition-visual-cover { color-scheme: dark; }
  .composition-visual-opening, .composition-visual-section { padding-block: var(--space-8); }
  .composition-visual-cover, .composition-teaching-card, .composition-visual-asset { break-inside: avoid; }
  .composition-visual-cover-content h3 { font-size: var(--text-h2); }
}