/* ============================================================
   Contact — the "Get in touch" closing section.

   The section-header pattern reused as content: a title over the
   email address, the address a mailto link that warms to full
   strength on hover.

     <section class="contact">
       <h2 class="contact__title">Get in touch</h2>
       <a class="contact__link" href="mailto:zsolt@vanstelko.com">zsolt@vanstelko.com</a>
     </section>

   TOKENS — 38px "Large" → --text-2xl; #86868b grey → --muted.
   ============================================================ */

.contact {
  padding-inline: var(--grid-margin);          /* 24px screen edge margin */
}

.contact__title,
.contact__link {
  display: block;
  font-size: var(--text-3xl);                  /* 48px — the section-header size */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);     /* the 3xl step */
  font-weight: var(--weight-regular);
}
.contact__title { color: var(--fg); }

.contact__link {
  width: fit-content;
  color: var(--muted);                         /* the email reads as the muted subtitle */
  text-decoration: none;
  transition: color 0.15s ease;
}
.contact__link:hover,
.contact__link:focus-visible { color: var(--fg); }

/* The address is one unbreakable 19-character run, and at the 38px it
   takes on phones it is wider than the 24px-margin column — on a
   narrow handset that pushed the whole PAGE sideways. The markup
   carries a <wbr> after the "@", so it breaks at its own seam
   ("zsolt@" / "vanstelko.com") instead of mid-word. `break-word` is
   the belt-and-braces backstop for a viewport narrow enough that even
   the domain won't fit; unlike `anywhere` it does NOT feed into
   intrinsic sizing, so `width: fit-content` above still measures the
   whole address and the line stays unbroken wherever it fits. */
.contact__link { overflow-wrap: break-word; }