/**
 * Contact — the closing cream band. The headline runs `drip-type`.
 *
 * drip-type draws into a canvas that extends `reach` px below the text. The
 * canvas is absolutely positioned, so it reserves no height of its own: what
 * stops a drip landing on the paragraph below is the gap under the headline,
 * and `reach` has to fit inside it. That gap is `--noir-sub-gap`, the same 32px
 * every other display heading gets, and `options.dripType.reach` in
 * site.config.js is set to match it — change one, change the other.
 *
 * It used to be 180px of margin for a 180px reach, which bought a long fall at
 * the price of the contact heading being the one heading on the page with six
 * times everyone else's spacing under it.
 *
 * `text-transform: uppercase`, with one known cost. drip-type positions each
 * drip from the character's layout box but reads its descent by measuring
 * `textContent`, which a CSS transform does not change — so on a letter whose
 * lowercase form has a descender and whose cap does not, a `g`, the drip
 * starts a few pixels below the glyph it is falling from. It is a sub-pixel
 * story at this size and it only affects descenders; the alternative was the
 * one display string on the page set in a different case from the rest.
 */

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--noir-head-gap);
}

.contact__headline {
  /* `--noir-head-gap` above comes from the flex gap on `.contact__inner`; this
     adds the remainder that makes the gap below `--noir-sub-gap`, which is
     also the ceiling on how far a drip may fall. */
  align-self: stretch;
  margin-bottom: calc(var(--noir-sub-gap) - var(--noir-head-gap));
  font-family: var(--vc-font-display);
  /* The section scale, not the hero's. The hero is the one 16rem moment on the
     page; a second one here pushed the address three screens down and left the
     drips falling into a margin nobody scrolls to. */
  font-size: var(--noir-display-section);
  font-weight: 400;
  line-height: var(--noir-display-leading);
  letter-spacing: var(--noir-display-tracking);
  text-transform: uppercase;
}

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

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

/**
 * The address is the one call to action on the band, so it is set at display
 * scale rather than as a link in a paragraph. `break-word`, because an email
 * long enough to overflow at this size would otherwise push a scrollbar across
 * the whole page.
 */
.contact__email {
  margin-top: var(--vc-space-3);
  font-family: var(--vc-font-display);
  font-size: var(--noir-display-sub);
  font-weight: 400;
  line-height: var(--noir-display-leading);
  letter-spacing: var(--noir-display-tracking);
  /* Uppercase like every other Anton string. Safe here in a way it is not on
     the headline above: this element carries no component, so nothing is
     measuring its text. */
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.06em;
  word-break: break-word;
}

/**
 * No rule above this. The band's items are `align-items: flex-start`, so a
 * border-top here drew a 2px line the width of one short line of text and no
 * further — a rule that starts and stops for no reason anyone can see, sitting
 * directly under the email. The accent colour already separates this line from
 * the address above it.
 */
.contact__availability {
  color: var(--vc-accent);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-5);
  margin-top: var(--vc-space-4);
}

.contact__socials a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}