/* ==========================================================================
   Contact: /contact/
   Two columns on wide screens: ways to reach Daniel directly on the left,
   a message form on the right. Stacked on phones, direct options first.
   Tokens only.
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-section);
}
@media (min-width: 60rem) {
  .contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); }
}
.contact__h { font-size: var(--step-2); letter-spacing: 0; }

/* The title lives in the left column, so the form card on the right starts
   level with it no matter how the intro wraps. */
.contact__title { padding-block: var(--space-7) var(--space-6); }
.contact__title .page-title__sub { text-wrap: balance; }
@media (min-width: 60rem) {
  .message { margin-top: var(--space-7); }
}

/* Direct --------------------------------------------------------------- */
.reach { display: grid; gap: var(--space-3); }
.reach__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--ink-3);
  font-size: var(--step-n1);
}
.reach__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-round);
  background: var(--accent);
  box-shadow: 0 0 0 var(--space-1) var(--accent-tint);
}

.tiles { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
a.tile:hover { border-color: var(--line-strong); background: var(--surface); }
a.tile:hover .tile__go { transform: translate(2px, -2px); color: var(--accent); }
.tile__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent);
}
.tile__icon svg { width: 20px; height: 20px; }
.tile__icon--text { font-family: var(--font-mono); font-size: var(--step-n1); font-weight: var(--weight-medium); }
.tile__text { display: grid; gap: 2px; min-width: 0; }
.tile__label { color: var(--ink-3); font-size: var(--step-n1); }
.tile__value {
  overflow: hidden;
  color: var(--ink);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
a.tile__value:hover { color: var(--accent); }
.tile__go { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease); }

/* The email tile is the main one: a little more room and two actions. */
.tile--email { grid-template-columns: auto minmax(0, 1fr); border-color: var(--line-strong); }
.tile--email .tile__value { font-size: var(--step-1); font-family: var(--font-serif); font-weight: var(--weight-regular); }
.tile__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 30rem) {
  .tile--email { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tile__actions { grid-column: auto; }
}
.copy { gap: var(--space-2); }
.copy .copy__done { display: none; }
.copy.is-done { border-color: var(--accent); color: var(--accent); }
.copy.is-done .copy__icon { display: none; }
.copy.is-done .copy__done { display: block; }

/* Message -------------------------------------------------------------- */
.message {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.message__lede { margin: var(--space-1) 0 var(--space-5); color: var(--ink-3); }
.message__nojs { margin-bottom: var(--space-4); color: var(--ink-2); }
.message__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .message__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}
.field { display: grid; gap: var(--space-2); }
.field label { color: var(--ink-2); font-size: var(--step-n1); font-weight: var(--weight-medium); }
.message .input { width: 100%; background: var(--paper); }
.message textarea.input { resize: vertical; min-height: 9rem; line-height: var(--leading); }
.message select.input { appearance: none; padding-right: var(--space-7); background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.message__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.message__status { color: var(--ink-3); font-size: var(--step-n1); }
.message__status[data-state="ok"] { color: var(--accent); }
.message__status[data-state="error"] { color: var(--gold-ink); }