/* ============================================================
   CONTACT section — plain text contact list.
   Classes prefixed `contact-`. Uses theme.css design tokens.
   ============================================================ */

.contact-head { text-align: center; }
.contact-head .kicker { justify-content: center; }
.contact-head .section-sub { margin-left: auto; margin-right: auto; }

.contact-wrap { max-width: 560px; margin: 0 auto; }

.contact-list {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px 24px;
}

.contact-line {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 16px;
}

.contact-line:last-child { border-bottom: none; }

.contact-tag {
  flex: none;
  width: 92px;
  color: var(--text-dim);
  font-size: 14px;
  font-family: var(--font-mono);
}

.contact-line a {
  color: var(--amber);
  text-decoration: none;
  word-break: break-word;
  transition: color .2s var(--ease);
}

.contact-line a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* footer (theme .footer handles the base layout) */
.contact-footer-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contact-footer-dot { color: var(--border); }

@media (max-width: 520px) {
  .contact-list { padding: 6px 18px; }
  .contact-line { flex-direction: column; gap: 3px; }
  .contact-tag { width: auto; }
}