/**
 * Studio — the near-black band. The about section. No component, on purpose.
 *
 * Four sections in a row all doing something is four sections of nothing. This
 * one is the rest between the handoff and the contact headline, and it earns
 * its place in the alternation by being the quietest thing on the page set in
 * the loudest colour.
 */

.studio__grid {
  display: grid;
  gap: var(--vc-space-9);
}

@media (min-width: 64rem) {
  .studio__grid {
    /* Prose gets the wider column; the aside is a margin note, not a sibling. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--vc-space-11);
  }

  .studio__head,
  .studio__stats {
    grid-column: 1 / -1;
  }
}

.studio__head {
  margin-bottom: 0;
}

.studio__prose {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-5);
  max-width: var(--noir-measure);
  font-size: var(--vc-text-lg);
}

@media (min-width: 48rem) {
  .studio__prose {
    font-size: var(--vc-text-xl);
  }
}

.studio__aside {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-4);
}

.studio__label {
  padding-bottom: var(--vc-space-2);
  border-bottom: 1px solid var(--vc-border);
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.studio__label + * {
  margin-top: calc(var(--vc-space-2) * -1);
}

/* The second label needs air above it; the first is already under a heading. */
.studio__label:not(:first-child) {
  margin-top: var(--vc-space-5);
}

.studio__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-2) var(--vc-space-3);
}

.studio__capabilities li {
  font-size: var(--vc-text-base);
}

.studio__capabilities li:not(:last-child)::after {
  content: " ·";
  color: var(--vc-accent);
}

.studio__recognition {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-2);
  color: var(--vc-ink-muted);
  font-size: var(--vc-text-sm);
}

.studio__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--vc-space-7);
  padding-top: var(--vc-space-8);
  border-top: var(--noir-rule) solid var(--vc-ink);
}

.stat__label {
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Three numerals, at display scale. They are the only figures on the page and
   the band has nothing else in it that competes. */
.stat__value {
  margin-top: var(--vc-space-2);
  font-family: var(--vc-font-display);
  font-size: var(--noir-display-stat);
  font-weight: 400;
  line-height: var(--noir-display-leading);
  letter-spacing: var(--noir-display-tracking);
  /* As on .panel__index: numerals now, and uppercase the moment one of these
     stats is given a unit. */
  text-transform: uppercase;
}