/* Contact block: one e-mail address, shown as text and as a link. */

@layer components {
  .contact-block {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-m);
    background: var(--tint);
  }

  .contact-block p { color: var(--ink-muted); }

  .contact-email {
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--accent);
    overflow-wrap: anywhere;
  }

  @media (min-width: 64rem) {
    .contact-block { padding: var(--space-7); }
  }
}