/* =================== contact-list.css =================== */
.contact-list {list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0}
.contact-list > li {padding: var(--hc-sp-2) 0; border-bottom: 1px solid var(--hc-line)}
.contact-list a {display: flex; align-items: baseline; gap: 4px; padding: 6px 0; text-decoration: none; color: var(--hc-ink, #1a1714); border-bottom: 0.5px solid rgba(180, 151, 115, 0.10); background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 12px; flex-direction: column; transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease}
.contact-list a:last-child {border-bottom: none}
.contact-list a strong {font-weight: 400; color: var(--hc-ink, #1a1714); flex-shrink: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 15px}
.contact-list a span {color: var(--hc-accent-dark, #5d4d3a); font-weight: 500; font-size: 12px}
.contact-list a:hover {border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.5)); background: rgba(255, 255, 255, 0.95); transform: translateX(2px)}
.contact-list a:hover span {text-decoration: underline}
.contact-list strong {margin-right: 8px}

/* On ink-tinted cards (premium-surface--highlight) keep links readable. */
.premium-surface--highlight .contact-list a {
  color: rgba(252, 248, 240, 0.92);
  background: rgba(255, 252, 247, 0.04);
  border-color: rgba(212, 184, 150, 0.22);
}
.premium-surface--highlight .contact-list a strong {color: #fffdf8}
.premium-surface--highlight .contact-list a span {color: var(--hc-gold-1, var(--hc-gold, #d4b896))}
.premium-surface--highlight .contact-list a:hover {
  background: rgba(212, 184, 150, 0.10);
  border-color: rgba(212, 184, 150, 0.55);
}