/* About — hero with the heads / middle cut / tails diagram, traits, slate stages, mist cards */
.about-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.about-hero .display { max-width: 15ch; }
.about-hero .lede { color: var(--charcoal); max-width: 52ch; }

/* the diagram: the logo's three bars, drawn large. Sides charcoal (set aside), centre copper (kept). */
.cut-diagram { margin: 0; width: 100%; max-width: 380px; justify-self: end; }
.cut-diagram svg { display: block; width: 100%; height: auto; }
.cd-side { fill: var(--charcoal); }
.cd-mid { fill: var(--copper); }
.cd-labels { list-style: none; display: grid; grid-template-columns: 124fr 152fr 124fr; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-strong); text-align: center; }
.cd-labels li { display: grid; gap: 2px; padding: 0 4px; }
.cd-term { font-size: var(--fs-kicker); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cd-what { font-size: var(--fs-body); font-weight: 500; letter-spacing: -.01em; color: var(--charcoal); }
.cd-fate { font-size: var(--fs-small); color: var(--muted); }

.name-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(32px, 6vw, 88px); margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line-strong); color: var(--muted); }
.name-story p { max-width: 58ch; }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; }
  .cut-diagram { justify-self: center; max-width: 280px; margin-inline: auto; }
  .name-story { grid-template-columns: 1fr; }
  .cd-what { font-size: .9375rem; }
}

.trait { font-size: var(--fs-kicker); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: 14px; }
.band-slate .steps p { color: #E4E7E9; }
.band-mist .card p { color: #4E565C; }
.who-facts a { color: var(--charcoal); }