/* About (CompanyScreen.js). The hook like every other page's, the scene beside the statement, one
   glass panel of the studio's facts and founders, and one quiet line. Folded, all of it stacks. */

.companyScreen {
  padding: 1rem 0 0; /* the hook sits where the home page's does; the newsletter bar below brings its own air */
}

.companyHero {
  text-align: center;
}

/* The hook is the plugins and news pages' hook, at the same size (Hook.css); only the space under
   the name goes, the scene and statement follow right away. */
.companyHero .heroTitle {
  margin-bottom: 0;
}

/* The scene beside the statement: the scene a little the wider, the words centered on its height. */

.companyAbout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0 0;
}

.companyAbout .playground {
  margin: 0;
}

.companyIntro {
  display: grid;
  gap: 1rem;
}

/* The lead is sized for half the width; the reasons after it sit a step quieter, so the lead reads
   first. */
.companyIntro p:first-child {
  font-size: clamp(1.25rem, 2.2vw, 1.875rem); /* m3-allow: the lead, fluid for half the width and kept regular, as no body role is this large */
  line-height: 1.3;
  color: var(--ink);
}

.companyIntro p + p {
  font: var(--md-sys-typescale-body-large);
  color: var(--ink-2);
}

.companyStudio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem;
  padding: 0;
  border-radius: var(--md-sys-shape-corner-xl);
  overflow: hidden;
}

.companyStudioFact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.75rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-medium);
}

.companyStudioFact + .companyStudioFact {
  border-left: 0.0625rem solid var(--glass-line);
}

.companyStudioLabel {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.companyStudioValue {
  font: var(--md-sys-typescale-headline-medium);
  color: var(--ink);
}

/* The founders: a name over its role, two names apart a little more than a name from its role, so
   each reads as one pair. */
.companyFounderList {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.companyFounderList li {
  display: grid;
  gap: 0.25rem;
}

.companyFounderList b {
  font: var(--md-sys-typescale-title-medium);
  color: var(--ink);
}

/* One quiet line: contact, and where we are (the link to the imprint). Each is a quiet pill
   (.textPill), in primary, a soft pill of it behind them on hover. */

.companyFacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  color: var(--ink-2);
}

@media (max-width: 56.25rem) {
  .companyAbout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .companyStudio {
    grid-template-columns: 1fr;
  }

  .companyStudioFact + .companyStudioFact {
    border-left: 0;
    border-top: 0.0625rem solid var(--glass-line);
  }
}