/* ============================================================================
   CONTACT — the closing frame. A quiet invitation, an enormous address,
   and the lights coming up.
   ============================================================================ */

.contact {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section);
}

.contact__title {
  font-family: var(--f-display);
  font-weight: var(--w-thin);
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-block: clamp(1.5rem, 4vh, 2.5rem) clamp(2.5rem, 7vh, 5rem);
  max-width: 22ch;
}

.contact__email {
  display: inline-grid;
  gap: 0.75rem;
  padding-block: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.contact__email-label { font-family: var(--f-mono); font-size: var(--fs-nano); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-mute); }
.contact__email-addr {
  position: relative;
  font-family: var(--f-display);
  font-weight: var(--w-thin);
  font-size: clamp(1.8rem, 1rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  width: max-content;
  max-width: 100%;
}
/* An underline that draws itself, like a signature. */
.contact__email-addr::after {
  content: ""; position: absolute; left: 0; bottom: -0.1em;
  width: 100%; height: 1px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-3) var(--e-out);
}
.contact__email:hover .contact__email-addr::after,
.contact__email:focus-visible .contact__email-addr::after { transform: scaleX(1); }

.contact__social {
  display: flex; gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 7vh, 4rem);
}
.contact__social a { color: var(--c-ink-dim); position: relative; transition: color var(--d-1) var(--e-out); }
.contact__social a::after {
  content: ""; position: absolute; left: 0; bottom: -0.35em; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-1) var(--e-out);
}
.contact__social a:hover { color: var(--c-ink); }
.contact__social a:hover::after { transform: scaleX(1); transform-origin: left; }

.contact__foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: var(--section);
  padding-top: clamp(1.5rem, 4vh, 2rem);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-mono); font-size: var(--fs-nano); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-ink-mute);
}
.contact__foot-mid { color: var(--c-ink-dim); }
@media (max-width: 40rem) { .contact__foot { flex-direction: column; gap: 0.75rem; } }