/**
 * Hero — the cream band, full-bleed.
 *
 * Hosts two components: `intro-sequence` on `.hero__inner`, which reveals the
 * direct children on a stagger, and `liquid-headline` on the `<h1>`.
 *
 * The headline is sized in `clamp()` rather than at breakpoints because
 * liquid-headline splits it into per-character boxes — a font-size that jumps
 * mid-animation re-measures every one of them.
 */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  padding-block: calc(var(--noir-header-h) + var(--vc-space-9)) var(--vc-space-7);
}

/**
 * The gap is the eyebrow-to-heading rhythm, shared with every section head.
 * The headline adds the difference on its own bottom margin to make the wider
 * gap under a display heading — see `--noir-sub-gap` in base.css.
 */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--noir-head-gap);
}

/**
 * The headline runs the width of the window, so it carries no max-width and no
 * `text-wrap: balance`. Balancing is the wrong instruction here: it evens the
 * lines out by pulling the last one in, and a ragged last line reaching for the
 * right edge is the shape this direction is after.
 *
 * `text-transform: uppercase` is safe on this one. liquid-headline splits the
 * headline into per-character spans and positions them from
 * `getBoundingClientRect`, which reports the box as rendered — so it measures
 * the caps, not the source string. (drip-type on the contact headline reads
 * `textContent` instead, which is why that file carries a caveat this one
 * does not.) The copy still lives in site.config.js; only its case is set here.
 *
 * Full-bleed: the headline cancels the gutter on both sides and spans the
 * viewport. Everything else in the hero stays inside `.shell` — it is the one
 * element on the page allowed to touch the edges, which is what makes it read
 * as the masthead rather than as large body copy.
 *
 * `font-weight: 400`: Anton has one weight, and anything heavier is
 * synthesised-bold, which at 256px is a smear rather than a weight.
 */
.hero__headline {
  align-self: stretch;
  width: calc(100% + var(--noir-gutter) * 2);
  margin-inline: calc(var(--noir-gutter) * -1);
  /* `--noir-head-gap` above the headline comes from the flex gap; this adds
     the remainder that makes the gap below it `--noir-sub-gap`. */
  margin-bottom: calc(var(--noir-sub-gap) - var(--noir-head-gap));
  font-family: var(--vc-font-display);
  font-size: var(--noir-display-hero);
  font-weight: 400;
  line-height: var(--noir-display-leading);
  letter-spacing: var(--noir-display-tracking);
  text-transform: uppercase;
}

.hero__lede {
  max-width: var(--noir-measure);
  color: var(--vc-ink-muted);
  font-size: var(--vc-text-lg);
}

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

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

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

/**
 * The standfirst line, pinned to the bottom of the band and ruled off from it.
 * It is the only thing between the hero and the next section, so it does the
 * work a border would otherwise do.
 */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-3);
  width: 100%;
  margin-top: var(--vc-space-10);
  padding-top: var(--vc-space-4);
  padding-inline: var(--noir-gutter);
  border-top: var(--noir-rule) solid var(--vc-ink);
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}