/* Contact — builds on theme.css (.card, .button, section, headings). Everything snaps to the
   8px unit; the pixel is 4px, matching the theme's border and shadow. */
#contact .contact-title { font-family: var(--font-mono); font-size: 24px; line-height: 40px; margin: 0 0 16px; }

/* Dithered rule: a 4px checkerboard, hard stops only. */
#contact .contact-dither {
  height: 8px;
  margin-bottom: 32px;
  background-color: var(--bg);
  background-image: repeating-conic-gradient(#29366F 0% 25%, #1A1C2C 0% 50%);
  background-size: 8px 8px;
  image-rendering: pixelated;
}

#contact .contact-intro { margin: 0 0 32px; }

#contact .contact-card { max-width: 640px; }
#contact .contact-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; justify-items: start; }

/* Bitmap type for short labels only. Yellow clears 4.5:1 on --surface. */
#contact .contact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  color: #FFCD75;
  margin: 0 0 16px;
}

/* Block cursor: two hard frames, no interpolation. */
#contact .contact-cursor {
  width: 16px;
  height: 16px;
  background: #FFCD75;
  animation: contact-blink 800ms steps(1, end) infinite;
}
@keyframes contact-blink {
  0% { transform: scale(1); }
  50% { transform: scale(0); }
}

/* Black on red is the theme's button pair; a red text link would not clear 4.5:1 on --surface. */
#contact .contact-link {
  display: inline-block;
  max-width: 100%;
  min-height: 48px;
  padding: 8px 24px;
  line-height: 24px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#contact .contact-link:hover,
#contact .contact-link:active { transform: translate(4px, 4px); box-shadow: none; }
#contact .contact-link:focus-visible { outline: 4px solid #FFCD75; outline-offset: 4px; }

@media (max-width: 720px) {
  #contact .contact-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #contact .contact-cursor { animation: none; }
}