/* Local composition, not a component API. Visual roles come from Membrane. */
.composition-page { overflow-wrap: anywhere; }
.composition-action { max-inline-size: 100%; white-space: normal; text-align: center; }
.composition-header,
.composition-footer {
  padding-block: var(--space-5);
  border-block-end: var(--border-default);
}
.composition-footer {
  border-block-start: var(--border-default);
  border-block-end: 0;
}
.composition-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.composition-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  text-decoration: none;
}
.composition-brand img { inline-size: var(--space-10); block-size: var(--space-10); }
.composition-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-12);
}
.composition-title { max-inline-size: 17ch; text-wrap: balance; }
.composition-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-secondary);
}
.composition-panel {
  padding: var(--space-6);
  border-inline-start: var(--border-accent);
  background: var(--color-human-bg);
}
.composition-agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: session;
}
.composition-agenda > li {
  counter-increment: session;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-block-start: var(--border-default);
}
.composition-agenda > li::before {
  content: counter(session, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  color: var(--color-human-text);
}
.composition-diagram { margin: 0; }
.composition-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  border: var(--border-default);
}
.composition-flow > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-inline-end: var(--border-default);
  background: var(--color-bg-secondary);
}
.composition-flow > li:first-child { background: var(--color-human-bg); }
.composition-flow > li:last-child {
  background: var(--color-digital-bg);
  border-inline-end: 0;
}
.composition-flow__label {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-primary);
}
.composition-diagram figcaption { margin-block-start: var(--space-4); }
.composition-note {
  padding-block-start: var(--space-5);
  border-block-start: var(--border-default);
}
.composition-deck {
  display: grid;
  gap: var(--space-8);
  max-inline-size: 80rem;
  margin-inline: auto;
  padding: var(--space-8) var(--site-margin);
}
.composition-slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  justify-content: center;
  min-inline-size: 0;
  min-block-size: clamp(28rem, 56.25vw, 45rem);
  padding: clamp(var(--space-6), 5vw, var(--space-16));
  border: var(--border-default);
  scroll-margin-block-start: var(--space-4);
  overflow-wrap: anywhere;
}
.composition-slide > :is(h1, h2, p, figure) { margin: 0; }
.composition-slide__heading { max-inline-size: 19ch; text-wrap: balance; }
.composition-slide__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-5);
  border-block-start: var(--border-default);
}
.composition-slide__statement { max-inline-size: 34ch; }
.composition-slide .composition-flow > li { gap: var(--space-2); }

/* Geometry changes; type and color roles stay with the system. */
@media (max-width: 48rem) {
  .composition-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .composition-flow { grid-template-columns: minmax(0, 1fr); }
  .composition-flow > li { border-inline-end: 0; border-block-end: var(--border-default); }
  .composition-flow > li:last-child { border-block-end: 0; }
  .composition-deck { padding: var(--space-4); gap: var(--space-4); }
  .composition-slide { min-block-size: 0; padding: var(--space-6); }
}

@page membrane-slide { size: 13.333in 7.5in; margin: 0; }
@media print {
  .composition-deck-page :is(.composition-header, .composition-footer, .composition-deck-intro) { display: none; }
  .composition-deck { display: block; max-inline-size: none; padding: 0; margin: 0; }
  .composition-slide {
    page: membrane-slide;
    box-sizing: border-box;
    inline-size: 13.333in;
    block-size: 7.5in;
    min-block-size: 0;
    padding: var(--space-12) var(--space-16);
    border: 0;
    break-after: page;
    break-inside: avoid;
    gap: var(--space-6);
    color-scheme: light;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .composition-slide:last-child { break-after: auto; }
  .composition-slide__heading { font-size: calc(var(--space-12) + var(--space-2)); }
  .composition-slide__statement { font-size: var(--space-6); }
  .composition-slide .composition-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .composition-slide .composition-flow > li { border-block-end: 0; border-inline-end: var(--border-default); }
  .composition-slide .composition-flow > li:last-child { border-inline-end: 0; }
  .composition-slide__footer a { display: none; }
}