/* ==========================================================================
   Home — page-specific composition only. Reusable pieces live in components.css.
   ========================================================================== */

/* Hero */
/* One screenful: headline, lead, belt and CTA share a single gap and are
   centred in what's left of the viewport below the header. */
.hero {
  --hero-gap: clamp(1.25rem, 4.5vh, 3.5rem);
  /* The ring's stage is taller than the cards actually paint, so the gap either
     side of it needs that slack removed to look even. */
  --ring-slack: calc((var(--conveyor-stage-h) - var(--conveyor-card-w) * 0.75) / 2);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hero-gap);
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--hero-gap);
  overflow: clip;
  text-align: center;
}
.hero__intro > * + * { margin-block-start: var(--hero-gap); }
/* Keep the white blocks trim so the whole hero clears a short viewport. */
.hero .panel { padding: clamp(var(--space-3), 3.2vh, var(--space-6)); }
.hero__conveyor { margin-block: calc(var(--ring-slack) * -1); }

/* About */
.about__grid {
  display: grid;
  justify-items: center;
  gap: var(--space-7);
  text-align: center;
}
.about__portrait {
  width: var(--portrait-size);
  aspect-ratio: 1;
  border-radius: var(--radius-round); /* circular mask — the artwork’s shoulders break out of the tan disc */
  object-fit: cover;
}
.about__body { --stack-gap: var(--intro-gap); }
.about__body .tag-link { margin-block-start: var(--space-2); }

@media (min-width: 48em) {
  .about__grid {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: clamp(2rem, -2rem + 8vw, 6.5rem);
    text-align: start;
  }
  .about__portrait { justify-self: center; }
}

/* Beliefs */
.beliefs__cta { margin-block-start: calc(var(--section-gap) * 1.75); }