/* A content-first gallery card: all copy comes from the existing V06 label. */
.composition-frame { container-type: inline-size; }
.composition-card {
  width: 100%;
  height: 100%;
  padding: 6cqw;
  background: #30332f;
  color: #f6f3ed;
  display: flex;
  flex-direction: column;
  font-family: var(--sans, 'Source Sans', Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.composition-card .fc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(8px, 1.5cqw, 24px);
  line-height: 1.2;
  letter-spacing: .14em;
  font-weight: 550;
  color: #c5c6bd;
}
.composition-card .fc-mark { width: 3cqw; height: .8cqw; background: var(--orange); }
.composition-card .fc-title {
  font-family: var(--serif, 'Source Serif', Georgia, serif);
  font-weight: 400;
  font-size: clamp(24px, 7cqw, 112px);
  line-height: 1.04;
  letter-spacing: -.04em;
  margin: 2.6cqw 0 0;
}
.composition-card .fc-main {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4cqw;
  align-items: center;
  margin-top: 4cqw;
}
.composition-card .fc-dose {
  display: flex;
  align-items: baseline;
  gap: 1.3cqw;
  white-space: nowrap;
  font-family: var(--serif, 'Source Serif', Georgia, serif);
  font-size: 17cqw;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.065em;
}
.composition-card .fc-dose span { font-size: 4cqw; letter-spacing: -.025em; }
.composition-card .fc-dose-note {
  margin-top: 1.7cqw;
  font-size: clamp(10px, 2.1cqw, 34px);
  line-height: 1.3;
  color: #c5c6bd;
}
.composition-card .fc-components {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.6cqw;
  font-size: clamp(12px, 2.65cqw, 43px);
  line-height: 1.15;
}
.composition-card .fc-components li { display: flex; gap: 1.5cqw; align-items: baseline; }
.composition-card .fc-components li::before { content: '+'; color: #c5c6bd; font-weight: 400; }
.composition-card .fc-serving {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqw;
  margin: 3.8cqw 0 0;
  padding-top: 2cqw;
  border-top: 1px solid #6a6c62;
}
.composition-card .fc-serving div { display: grid; gap: .3cqw; }
.composition-card .fc-serving dt {
  font-size: clamp(9px, 1.8cqw, 29px);
  color: #c5c6bd;
  line-height: 1.2;
}
.composition-card .fc-serving dd {
  margin: 0;
  font-size: clamp(12px, 2.65cqw, 43px);
  font-weight: 500;
  line-height: 1.2;
}
.composition-card .fc-other {
  margin: auto 0 0;
  padding-top: 2cqw;
  font-size: clamp(10px, 1.95cqw, 32px);
  line-height: 1.3;
  color: #c5c6bd;
}
.composition-card .fc-other strong { font-weight: 500; color: #f6f3ed; }

@container (max-width: 400px) {
  .composition-card { padding: 5.5cqw; }
  .composition-card .fc-title { margin-top: 2cqw; }
  .composition-card .fc-main { margin-top: 3cqw; gap: 3cqw; }
  .composition-card .fc-components { gap: 1.4cqw; }
  .composition-card .fc-serving { margin-top: 2.7cqw; padding-top: 1.8cqw; }
  .composition-card .fc-other { padding-top: 1.5cqw; font-size: 9px; }
}