/* ==========================================================================
   Home hero. HAND-WRITTEN. Role tokens only. Figma: Home "hero headline" (desktop 202:3951,
   tablet 202:4261, mobile 202:4376). The two case-study cards are src/css/work-card.css.
   Desktop (1024 up): name, then the title in columns 1 to 8 and the subhead in columns 9 to 12,
   both sitting on the same bottom line. Tablet: title and subhead share one row, half each.
   Mobile: name, title, subhead stacked.
   ========================================================================== */
.home-hero {
  display: flex;
  flex-direction: column;
  gap: var(--arche-space-base-80);
  padding: var(--arche-space-base-48) var(--arche-page-pad);
  background: var(--arche-surface-brand-primary);
}
.home-hero__name { color: var(--arche-text-on-brand-name); }
.home-hero__lines { display: flex; flex-direction: column; gap: var(--arche-space-base-16); }
/* The title is as large as the H1 but in the body face and weight, as in Figma. */
.home-hero__title {
  margin: 0;
  color: var(--arche-text-on-brand-primary);
  font-family: var(--arche-type-lead-font);
  font-weight: 400;
  font-size: var(--arche-type-h1-size);
  line-height: var(--arche-type-h1-line);
}
.home-hero__subhead { margin: 0; color: var(--arche-text-on-brand-body); }
@media (min-width: 768px) {
  .home-hero__lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--arche-space-fine-16); }
}
@media (min-width: 1024px) {
  .home-hero { gap: var(--arche-space-base-96); padding-block: var(--arche-space-base-64); }
  .home-hero__lines { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--arche-space-base-24); align-items: end; }
  .home-hero__title { grid-column: 1 / span 8; }
  .home-hero__subhead { grid-column: 9 / span 4; }
}